[Next.js] page.tsxについて

はじめに

Next.jsの学習の為に、下記書籍を読みました。
下記書籍のルートディレクトリについて学びがあったので、執筆します。

Next.js のページ構造について

Next.js プロジェクトのルートディレクトリまたはsrcディレクトリ内にはpagesというフォルダがあります。
このフォルダ内に配置されたファイルは、自動的に URL ルートにマッピングされます。
例えば、pages/about.tsx ファイルは /about というルートに対応します。

Next.js 13 からは、アプリディレクトリ（app ディレクトリ）を使ってページやレイアウトを構築する新しいアプローチが導入されました。
これにより、より柔軟で効率的なページ管理が可能になります。
ここで、app/sample/page.tsx ファイルは /sample というルートに対応します。

やり方

1. page.tsx の作成

下記コマンドを実行し、プロジェクト作成する

mkdir -p src/app/sample
touch src/app/sample/page.tsx

実行結果は、下記の通りです

src
└── app
    ├── sample
    │   └── page.tsx
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.module.css
    └── page.tsx

2. page.tsx のコーディング

下記のように page.tsx を編集する

src/app/sample/page.tsx

export default function Page() {
  return (
    <div>こちらは、sampleディレクトリーに配置したpage.tsxです。</div>
  )
}

3. 動作確認

下記コマンドを実行し、プロジェクトを起動する

npm run dev

実行結果は、下記の通りです
http://localhost:3000/sample にアクセスして確認する