Next.jsの基本構造を理解

Next.jsプロジェクトのフォルダ構成

Next.js（App Router構成）でアプリを作成すると、以下のようなフォルダやファイルが自動で作成されます。

1my-next-app/
2├── app/
3├── public/
4├── styles/
5├── node_modules/
6├── .gitignore
7├── package.json
8├── README.md
9

それぞれの役割を見ていきましょう。

各フォルダ・ファイルの説明

• app/
  ページやルーティングに関するファイルを格納する場所です。App Routerの中心となります。
• public/
  画像やfaviconなど、URLで直接アクセスされる静的ファイルを配置します。
• styles/
  CSSファイル（スタイル）をまとめて管理するためのフォルダです。
• node_modules/
  使用しているライブラリ群が自動的に保存される場所です。触る必要はありません。
• .gitignore
  Gitで管理しないファイルを指定する設定ファイルです。
• package.json
  プロジェクトの情報や依存ライブラリ、使用コマンドなどが書かれています。

appディレクトリの構造

Next.jsのApp Router構成では、以下のようにappフォルダの中にルートページやその他のページが入ります。

1app/
2├── page.tsx        ← トップページ
3├── about/
4│   └── page.tsx    ← /about に対応
5├── layout.tsx      ← 全体のレイアウト

このようにフォルダ名とpage.tsxの組み合わせでルーティングされます。

開発中によく使う場所

• app/：ページを作るたびに編集します。
• public/：画像などを置くときに使います。
• styles/：スタイルを調整したいときに使います。