「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パスで直接アクセス可能です。

開発環境の立ち上げ方法

npm run dev

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