Next.js の App Router を使う上で知っておくと良さそうなことの雑なメモ

特別な意味のあるファイル名

• page.ts 画面
• router.ts API定義
• layout.ts 共通レイアウト
• template.ts 共通レイアウト（レンダリングあり）
• loading.ts ローディング画面
• error.ts エラー画面
• not-found.ts notFound時の画面

page.ts

/hoge/page.ts をつくると /hoge にアクセスして表示できる

router.ts

APIのエンドポイントを書く
/hoge/router.ts とすると /hoge がエンドポイントになる
export function GET() {
}

layout.ts

layout.ts があるディレクトリ以下の画面に共通のレイアウトを適用できる

loading.ts

loading.ts をつくるだけで同じディレクトリのpage.tsに対するローディング画面が作れる。

export default function Loading() {
}

error.ts や not-found.tsも同じ

特別な意味のあるディレクトリ

• [dir]
  • 動的パス
  • app/product/[id]/page.ts
• (dir)
  • URLの構成から外れる
• _dir
  • ルーティングに含まれない
• @dir
  • 直リンク不可な画面

データを取得するには fetch を使う
自動的に SSG、SSR、ISRが判定される？