Works
制作実績
- 担当範囲
- コーディング、Next.js、WordPress
- 制作期間
- 80時間
- サイト概要
-
Basic認証
ユーザー名 ：flowmeister
パスワード ：nextsample
ページ数 ：6P
Next.jsで制作したコーポレートサイトです。
支給されたデザインをもとに、Next.jsでの実装、WordPress連携、フォーム連携、Vercelへのデプロイを担当しました。
WordPressを記事管理に利用しています。
特に、複数ページで利用するデータ取得処理の共通化、お知らせ機能の実装に力を入れました。
▼レンダリング設計
CMSの記事を表示するページではサーバーコンポーネントでデータを取得し、お問い合わせ・送信完了などの記事取得が不要なページとは処理を分けています。
トップ・お知らせ関連ページ：サーバー側での記事取得
・トップページでは、お知らせセクションで最新の3件を取得しています。記事表示をセクション単位に分け、トップページ全体の構成と取得処理を切り離しました。
・お知らせ一覧・詳細・カテゴリー別一覧では、共通のAPI関数を使い、ページ番号やカテゴリーIDに応じた記事を取得しています。
・記事詳細では、取得したタイトル・抜粋・アイキャッチ画像をメタデータにも利用し、記事内容に応じたタイトル・説明文・OGPを設定しています。
お問い合わせ・送信完了・404：記事取得が不要なページ
これらのページはWordPressへのアクセスを必要とせず、静的生成できる構成にしています。
お問い合わせは外部フォームサービスと連携し、受付処理をページの描画から分離しました。
▼API連携
WordPress REST APIへのアクセスをsrc/lib/wordpress.tsに集約し、ページコンポーネントからURLの組み立てやレスポンス取得の処理を切り離しました。
取得方法を変更する際の修正箇所をまとめ、ページ側では表示の組み立てに集中できるようにしています。
用途に応じた取得処理の共通化
記事一覧のgetPosts、詳細のgetPost、カテゴリー別一覧のgetCategoryPosts、カテゴリー情報のgetCategoryFromIdなど、用途ごとに関数を分けました。
一覧取得では表示件数やページ番号を引数で指定できるため、トップの3件表示とお知らせ一覧の9件表示に同じ取得処理を利用しています。
関連データの取得とページネーション
・記事取得に_embedを付け、アイキャッチ画像とカテゴリー情報を記事本文とまとめて取得しています。記事カードごとに関連情報を追加取得する処理を減らしています。
・getTotalPages・getCategoryTotalPagesでは、レスポンスヘッダーのX-WP-TotalPagesから総ページ数を取得し、通常一覧・カテゴリー別一覧のページリンクに反映しています。
▼フォーム連携
お問い合わせの受付・通知メール送信にSSGFormを採用しました。
静的生成したフォームページから外部サービスへ送信できるため、フォーム専用のバックエンドやメール送信基盤を自前で構築・運用する負担を抑えられると考えました。