Next.js主要ファイルとフォルダ

Page content

Next.js主要ファイルとフォルダ　分かりやすく解説

Next.jsプロジェクトの基本的なファイル・フォルダの役割について、わかりやすくまとめました。

ページやURLに関するディレクトリ

  • app/ フォルダ（App Router / 新推奨方式）

    • フォルダ階層＝ページのURL。例: app/about/page.tsx ⇒ /about
    • layout.tsx: サイト全体のレイアウト（ヘッダー・フッター等）を定義
    • page.tsx: ページごとのコンテンツ本体

  • pages/ フォルダ（Pages Router / 従来方式）

    • ファイル名＝ページのURL。例: pages/contact.tsx ⇒ /contact
    • pages/api/: サーバーサイドAPIエンドポイントを定義

再利用UIや静的ファイル

  • components/ フォルダ

    • ボタン・ヘッダー・フォームなど再利用可能なUI部品を整理

  • public/ フォルダ

    • 画像・フォント・faviconなどの静的ファイル置き場
    • サイトURL直下からアクセスできる（例: /logo.png）

主要な設定ファイル

  • package.json

    • プロジェクトの設計図として、依存ライブラリ群・バージョン・コマンドスクリプト（例: npm run dev）などを定義

  • next.config.js

    • Next.js自体の設定ファイル
      • 画像最適化やルーティングのリダイレクトなどをカスタマイズ

  • tailwind.config.ts

    • Tailwind CSS専用の設定ファイル
      • content: CSSを適用する対象ファイルを指定（パージ不要分の削除を促す）
      • theme: サイト全体の色・フォント等のカスタマイズ

  • tsconfig.json

    • TypeScriptのコンパイル・型チェックの細かいルールを制御するための設定ファイル

このような構成・役割を理解することで、Next.jsの開発がよりスムーズに行えます。