Next.js
by Natsumi Chiba
Next.js の基礎（App Router 編）
ここでは Next.js について学習します。
Pages Router と App Router の違い
| 項目 | Pages Router（従来） | App Router（新しい） |
|---|---|---|
| フォルダ名 | pages | app |
| URLの決め方 | ファイル名がURLになる | フォルダ名がURLになる |
| 例（/about） | pages/about.tsx | app/about/ |
create-next-app でプロジェクトを作成するときに表示される
「Would you like to use App Router?」
という質問は、
どちらのルーティング方式を使うかを選んでいる、という意味です。
ページ定義の書き方
export default function Page() { ... }
この構文は、
「このファイルがWebページです」
と Next.js に伝えるための決まり文句です。
CSSクラスの参照方法（2パターン）
1. ドット表記
object.property
クラス名が通常の形式（キャメルケースなど）の場合に使用します。
2. ブラケット表記
object["property"]
クラス名がケバブケース（例：class-name）の場合に使用します。
CSSファイルのパス指定
| 書き方 | 意味 |
|---|---|
| ./page.module.css | 同じフォルダ |
| ../page.module.css | 1つ上のフォルダ |
| 違い | パス（場所）の違いだけ |
Linkコンポーネントの使い方
Link コンポーネントは next/link からインポートして使用します。
主な props
href（必須）
遷移先のパスを指定する
例：app や pages フォルダ内のパス
replace
- 初期値：false
- 型：boolean
true の場合：
履歴を追加せず、現在の履歴を上書きする
scroll
- 初期値：true
- 型：boolean
true の場合：
ページ遷移後にページトップへスクロールする
prefetch
- 初期値：true
- 型：boolean
true の場合：
リンク先のページを事前に読み込む（高速化）
tags: