はじめに
Next.jsを触ったことがあるものの、基礎的な部分がよくわかっていないまま開発をしていたので、改めて一から勉強し直すためにまとめていこうと思いました。
今回はNext.jsのプロジェクト構造についてです。
プロジェクト構造
今回まとめているのは、Pages RouterのNext.js ver14の内容です。
Top level folder
-
public：静的なファイル（画像、フォント、スタイルシート等）を置く -
src：プロジェクトのソースコードを整理するために任意で使用されるディレクトリ -
pages：Pages Router用。srcの中にある場合もある
Top level file
-
next.config.js：Next.js の設定ファイル -
package.json：プロジェクトの依存関係とスクリプト -
instrumentation.ts：OpenTelemetry等、アプリケーションのパフォーマンスや動作を計測・監視するためのコードを記述するファイル -
middleware.ts：ミドルウェアを設定するファイル -
.env：環境変数 -
.env.local：ローカル環境変数 -
.env.production：本番環境変数 -
.env.development：開発環境変数 -
.eslintrc.json：ESLintの設定ファイル -
.gitignore：git管理から外すファイルを記載するファイル -
next-env.d.ts：Next.js の TypeScript 宣言ファイル -
tsconfig.json：TypeScript の設定ファイル -
jsconfig.json：JavaScript の設定ファイル
pagesディレクトリ内
ファイル
-
_app.js|.jsx|.tsx：Next.js のカスタム App コンポーネントを定義する。これによって、全てのページに共通のレイアウトや状態管理、グローバルなスタイルを適用できる -
_document.js|.jsx|.tsx：Next.js のカスタム Document コンポーネントを定義する。これによって、サーバーサイドでレンダリングされる HTML ドキュメントの構造をカスタマイズ（<html>や<body>タグのカスタマイズ、メタタグの追加、カスタムフォントの読み込み等）できる -
_error.js|.jsx|.tsx：アプリケーション内で発生するエラー（404エラーや500エラーなど）に対してカスタマイズされたエラーページを表示できる -
404.js|.jsx|.tsx：404 エラーページ -
500.js|.jsx|.tsx：500 エラーページ
ディレクトリ構成
Routes
パターン1
pages/
├── index.js // ホームページ (/)
├── about.js // ネストされたページ (/about)
└── contact.js // ネストされたページ (/contact)
パターン2
pages/
├── index.js // ホームページ (/)
├── about/
│ └── index.js // ネストされたページ (/about)
└── contact/
└── index.js // ネストされたページ (/contact)
Dynamic Routes
パターン1
pages/
├── [user]/
│ └── index.js // 動的ルートセグメント (/user1, /user2)
├── [...slug]/
│ └── index.js // キャッチオールルートセグメント (/a, /a/b, /a/b/c)
└── [[...slug]]/
└── index.js // オプションキャッチオールルートセグメント (/, /a, /a/b, /a/b/c)
パターン2
pages/
├── post/
│ └── [id].js // 動的ルートセグメント (/post/1, /post/2)
├── docs/
│ └── [...slug].js // キャッチオールルートセグメント (/docs/a, /docs/a/b, /docs/a/b/c)
└── docs/
└── [[...slug]].js // オプションキャッチオールルートセグメント (/docs, /docs/a, /docs/a/b, /docs/a/b/c)
参考