独学でプログラミングを学んできたという筆者が、自身のプロジェクト開発の中で使っているNext.js（React）のApp Routerについて解説しています。検証環境はNext.js 16.2.12、React 19.2.4、Windows 10です。
App RouterはNext.js 13以降で導入されたルーティングの仕組みで、サーバーコンポーネントを採用しコンポーネント内で直接async/awaitを使用できます。layout.tsxによる入れ子レイアウトや、loading.tsx・not-found.tsxによるローディング画面・404ページの自動管理など、旧来のPages Routerとの違いが紹介されています。
出典が伝えている要点
- App Routerは、Next.js 13以降で導入されたルーティングの仕組みである
- 記事の検証環境はNext.js 16.2.12、React 19.2.4、Windows 10である
- 筆者は独学で8年ほどプログラミングを勉強してきたと述べている
- App Routerはサーバーコンポーネントを採用している
- App Routerはコンポーネント内で直接async/awaitを使用できる
- layout.tsxを使うことで入れ子レイアウトを実装できる
- loading.tsxとnot-found.tsxにより、ローディング画面と404ページを自動的に管理できる
原文より
App Router は、Next.js 13 以降で導入されたルーティングの仕組みです
出典: zenn.dev