「Next.js+ヘッドレス CMS ではじめる！ かんたんモダン Web サイト制作入門」のサンプルリポジトリです。

本書の動作環境

OS は Windows、Mac ともに対応していますが、それぞれ本書において動作確認を行なったバージョンは次の通りです。

• Windows：Windows 11 Pro
• Mac：Ventura 13.2

また、本書でコーポレートサイト制作を行うための動作環境は以下の通りです。

• Node.js v20.13.1
• Next.js v14.1.4

ディレクトリ構成

app ディレクトリ

このディレクトリは、アプリケーションの主要な機能やロジックを含む部分をまとめたものです。

• _actions：Next.js の ServerActions 処理を格納します。本書においては、お問い合わせの送信処理が記述されています。
• _components：再利用可能な React コンポーネントを格納します。UI の構築に使用される小さな部品がここに含まれます。
• _constants：定数を格納します。本書では各ページのデータ取得件数が定義されています。
• _libs：共通のユーティリティ関数やライブラリを格納します。これにはデータフォーマット関数や API 呼び出しのヘルパー関数などが含まれます。
• contact：お問い合わせページに関するビューやロジックが格納されています。
• members：メンバーページに関するビューやロジックが格納されています。
• news：ニュースページに関するビューやロジックが格納されています。

contents ディレクトリ

このディレクトリは、ニュースとして CMS にインポートするためのコンテンツを格納しています。

public ディレクトリ

このディレクトリは、静的ファイル（画像、フォント、その他のアセット）を格納します。 Next.js では、このディレクトリ内のファイルは URL パスで直接アクセス可能です。

開発環境の立ち上げ方法

1. 依存パッケージのインストール

npm install

上記コマンドでpackage.json内に記載されている依存パッケージがインストールされます。

2. 環境変数の準備 ご自身の microCMS 環境と接続を行うために環境変数の設定が必要です。 設定方法につきましては、本書の 5-3-1「事前準備をしよう」内に記載されている「環境変数の設定」をご参照ください。

3. 開発環境を起動する

npm run dev

コマンドラインにて上記コマンドを入力後、http://localhost:3000にアクセスします。