🥨
[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
にアクセスして確認する
Discussion