app・public・srcで理解する主要ディレクトリ構造 | 開発環境構築とNext.js（TypeScript）入門 | Next.jsによるWebアプリケーション開発概論

この節で学ぶこと

この節では、Next.js プロジェクトで頻繁に見る app、public、src の3つを中心に、「どこに何を書くのか」を初心者向けに整理します。

Next.js の公式ドキュメントでは、Project Structure と file-system conventions が独立した学習テーマとしてまとめられており、app は App Router の中心、public は静的ファイルの配置場所、src は任意のソース格納ディレクトリとして扱われています。

この節を読み終えたときの到達目標は、次の3つです。

1つ目は、app・public・src の役割の違いを言えること。2つ目は、ファイルをどこに置くべきかを大まかに判断できること。3つ目は、Next.js の初期プロジェクトを見ても「何が置いてあるのか」が以前より読めることです。

3つのディレクトリの役割

app は「画面とルーティングの中心」

Next.js の App Router では、app ディレクトリがルーティングと UI 構成の中心です。公式の Project Structure では、app を App Router 用のトップレベルフォルダとして位置づけ、page、layout、loading、error などのファイル規約がこの配下で機能すると説明しています。

初心者向けにかなり雑に言えば、app は「ページの並びを作る場所」です。たとえば app/page.tsx はトップページ、app/about/page.tsx は /about に対応します。フォルダ構造が URL 構造とかなり近いので、見た目より筋が通っています。

public は「そのまま配信する静的ファイル置き場」

public フォルダは、画像・アイコン・robots.txt などの静的ファイルをルート URL から参照できる場所です。Next.js 公式では、public/avatars/me.png は /avatars/me.png のように参照できると案内されています。

つまり、public の中に置いたものは、ビルド後にそのまま外から見える資産と考えると分かりやすいです。コードの部品というより、アプリが使う画像や公開ファイルの保管棚です。

src は「アプリのソースコードをまとめるための任意フォルダ」

src は必須ではありません。Next.js 公式では、src を使う場合は app Router なら src/app、Pages Router なら src/pages に移動すると説明しています。

つまり src は、ソースコードをルート直下に散らさず、ひとまとまりに整理するための入れ物です。

public は基本的にルート直下に置きますが、app は src/app に移して使うこともできます。

つまり、src は app を包むことがある一方で、public は普通そこに入りません。役割が違うからです。

Next.js プロジェクトを木構造で見る

srcを使わない場合

src を使わない初期構成のイメージは、だいたい次のようになります。

my-app/
├─ app/
│  ├─ page.tsx
│  ├─ layout.tsx
│  └─ globals.css
├─ public/
│  ├─ favicon.ico
│  └─ images/
│     └─ logo.png
├─ package.json
├─ tsconfig.json
└─ eslint.config.mjs

この形では、app と public がルート直下に並びます。app は画面やルート、public は画像や公開ファイルです。package.json や tsconfig.json はプロジェクト全体の設定ファイルなので、同じくルート直下に置かれます。

srcを使う場合

src を有効にすると、構成は次のような雰囲気になります。

my-app/
├─ src/
│  └─ app/
│     ├─ page.tsx
│     ├─ layout.tsx
│     └─ globals.css
├─ public/
│  ├─ favicon.ico
│  └─ images/
│     └─ logo.png
├─ package.json
├─ tsconfig.json
└─ eslint.config.mjs

この場合、アプリ本体のコードは src の中に寄せられます。Next.js 公式の src folder ドキュメントでも、App Router を使うなら src/app に置くとされています。

app ディレクトリをもう少し具体的に見る

page.tsx は「そのURLの画面」

App Router では、page ファイルが実際のページを表します。たとえば app/page.tsx は /、app/profile/page.tsx は /profile に対応します。これは Next.js の file-system routing の基本です。

export default function Page() {
  return <h1>こんにちは、Next.js</h1>
}

このコードを app/page.tsx に置くと、トップページに見出しが表示されます。初心者のうちは、「フォルダ名がURLに近い」と覚えるだけでもかなり楽になります。

layout.tsx は「共通の外枠」

layout は、そのディレクトリ配下に共通する UI の枠を定義するための仕組みです。たとえばヘッダーやフッター、全ページ共通のレイアウトをここで包めます。Project Structure の公式説明でも、layout はルート間で共有される UI として位置づけられています。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>
        {children}
      </body>
    </html>
  )
}

この children が、各ページの中身です。外枠は layout.tsx、中身は page.tsx。建物でいえば、layout が共通フレーム、page が各部屋です。

globals.cssは「全体に効くCSS」

globals.css のようなグローバル CSS は、アプリ全体に効くスタイルを書く場所として使われます。初期生成されたプロジェクトにもグローバル CSS が含まれることがあり、layout.tsx から import して使う構成が一般的です。これは create-next-app の初期テンプレートでもよく見られる形です。

import './globals.css'

この1行は短いですが、意味は大きいです。

「このアプリ全体で使う基本の見た目を読み込む」という宣言です。

publicディレクトリを正しく理解する

`public` に置くもの

public は、静的に配信したいファイルを置く場所です。Next.js 公式では画像に加えて robots.txt、Google Site Verification のファイル、favicon.ico などの配置先としても案内されています。

たとえば、こんなファイルは public に置きやすいです。

ロゴ画像
OGP 画像
favicon.ico
robots.txt
sitemap.xml を静的に置く場合のファイル
検索エンジン向けの認証ファイル

`public` の参照方法

public/images/logo.png を置いた場合、コード上では /images/logo.png として参照します。ファイルパスに public を含めないのがポイントです。これは公式ドキュメントの例と一致します。

import Image from 'next/image'

export default function Logo() {
  return (
    <Image
      src="/images/logo.png"
      alt="ロゴ"
      width={160}
      height={60}
    />
  )
}

ここで src="/public/images/logo.png" と書きたくなる人がいますが、それは違います。

URL の基準は公開ルートなので、public は書きません。これ、地味ですが最初につまずきやすい点です。

`public` に置かない方がよいもの

public はソースコード置き場ではありません。React コンポーネントやユーティリティ関数、サーバ処理などは置きません。また、公開したくない秘密情報も当然置いてはいけません。public は外から参照される前提の場所だからです。これは公式の「base URL から参照できる」という説明からも分かります。

src ディレクトリはなぜ使うのか

ソースコードをまとめたいから

src を使う一番大きな理由は、ルート直下の散らかりを減らすためです。小さなプロジェクトでは不要なこともありますが、ファイルが増えるほど効果が出ます。Next.js 公式も src を optional application source folder として位置づけています。

たとえば、今後 components、lib、types、hooks、features のようなディレクトリを増やしたくなったとします。ルート直下に全部置くより、src の中に寄せた方が見通しは良くなります。

my-app/
├─ src/
│  ├─ app/
│  ├─ components/
│  ├─ lib/
│  ├─ hooks/
│  └─ types/
├─ public/
├─ package.json
└─ tsconfig.json

この形にすると、「コードは src、公開ファイルは public、設定はルート」と分かれて、頭の中がかなり静かになります。

`src` を使うときの注意点

Next.js 公式では、src を使うなら app Router は src/app に移す必要があると説明しています。つまり、src フォルダだけ作って中が空では意味がありません。アプリの入口自体を src 配下へ移動させる必要があります。

また、public は通常そのままルート直下に残します。

この非対称さは少し不思議ですが、役割を考えれば自然です。src はソースコードの整理箱、public は公開資産の棚だからです。

初心者が迷いやすいポイント

`app` と `public` は用途が違う

画像を表示するコードは app 側に書きますが、画像ファイル本体は public に置くことが多いです。つまり、「表示する仕組み」と「表示される材料」が別の場所にあるわけです。

app/page.tsx → 画面を作るコード
public/images/photo.jpg → 画面で使う画像ファイル

この分離が見えると、フォルダの役割がかなり整理されます。

`src` は必須ではない

src を使わない構成でも Next.js は動きます。create-next-app の初期プロンプトでは src ディレクトリを使うかどうかの選択肢があり、どちらも公式に認められた形です。

ですので、src がないから間違い、あるから上級者、という話ではありません。

整理方針の違いです。まずは「どちらでもよいが、実務では src を使うチームも多い」と理解しておけば十分です。出典なしの補足ですが、後半の実務的慣習はチーム文化にも左右されます。

`public` はURLから直接見える

これはとても重要です。

public/manual.pdf を置いたら、配信設定によっては /manual.pdf で直接アクセスできます。つまり、公開してよいものだけを置くのが原則です。

具体例で流れをつかむ

例：トップページにロゴ画像を出す

まず public/images/logo.png に画像を置きます。次に app/page.tsx または src/app/page.tsx に、次のコードを書きます。

import Image from 'next/image'

export default function Page() {
  return (
    <main>
      <h1>会社トップページ</h1>
      <Image
        src="/images/logo.png"
        alt="会社ロゴ"
        width={200}
        height={80}
      />
    </main>
  )
}

このときの役割分担はこうです。

app/page.tsx → ページを描画する
public/images/logo.png → 実際の画像ファイル
src を使うなら src/app/page.tsx に置く

この対応関係が見えると、ディレクトリ構造は急に怖くなくなります。

この節の到達目標

到達目標1

app は画面・ルーティング、public は静的ファイル、src はソースコード整理用、という違いを説明できる。

到達目標2

画像や robots.txt のような公開ファイルを public に置く理由が分かる。

到達目標3

src を使うときは app を src/app に移す、という基本ルールを理解している。

到達目標4

Next.js プロジェクトを開いたときに、「どこから読めばよいか」の見当がつく。

練習問題

問1

public/avatars/me.png に画像を置いたとき、コードから参照するパスとして正しいものはどれですか。

public/avatars/me.png
/public/avatars/me.png
/avatars/me.png
./public/avatars/me.png

答え

解説

public 配下のファイルは、ベース URL / から参照します。公式例でも public/avatars/me.png は /avatars/me.png で参照されます。

問2

src ディレクトリを使う場合、App Router の基本配置として正しいものはどれですか。

src/public
src/app
public/src
root/app/src

答え

解説

Next.js 公式では、src を使う場合は App Router を src/app に置くと説明しています。

問3

次のうち、public に置くものとして最も適切なのはどれですか。

page.tsx
layout.tsx
logo.png
useUser.ts

答え

解説

public は静的ファイル置き場です。画像、アイコン、認証ファイル、robots.txt などが代表例です。

問4

app ディレクトリの役割として最も近いものはどれですか。

npm パッケージの保存先
画面とルーティングの中心
データベース本体
OS の設定ファイル置き場

答え

解説

App Router では app ディレクトリがページ、レイアウト、ルーティング規約の中心です。

まとめ

この節で一番大切なのは、フォルダ名を丸暗記することではありません。

役割の違いをつかむことです。

app は画面とルートの中心
public はそのまま配信する静的ファイル
src はソースコード整理のための任意フォルダ

この3つが見えるようになると、Next.js のプロジェクトは「得体の知れない箱」から、「部屋が分かれた建物」に変わります。次の節では、この建物を実際にどう作るか、あるいは他の設定ファイルがどう関わるかをさらに具体的に見ていきます。

参考文献

Next.js Documentation, Project Structure and Organization.
Next.js Documentation, public Folder.
Next.js Documentation, create-next-app CLI.
Next.js Documentation, src Folder.
Next.js Documentation, Assets.