Next.js 13 より、App Router が使われるようになりました。基礎的な使い方をまとめます。

対象環境

  • Next.js 13

App Router の基礎

ページ

1
2
3
app
 └ about
    └ page.tsx

ページは URL に表示したい名前でディレクトリを作成して、その中にpage.tsxという名前でファイルを作れば OK です。

ローディング

1
2
3
4
app
 └ about
    ├ page.tsx
    └ loading.tsx

loading.tsxをpage.tsxと同一階層に置いておくと、読み込み中だけloading.tsxの内容を表示してくれます。

Not Found

1
2
app
 └ not-found.tsx

存在しない URL にアクセスすると、not-found.tsxの内容が表示されます。

まとめ

App Router はローディングや Not Found ページを簡単に表示できるので使っていきたいと思います。