Next.js 13 DocのRouting周りをざっと読んでみました
とりあえず作り始めるためにざっとDocを読んでみました。
Next.js 13 から追加されたApp Routerについてです。
メモ程度の内容です。
Defining Routes
appフォルダ内にフォルダを作ってその中にpage.jsもしくはroute.jsを作ることでroutableなRouteを作ることができる。
Nestingすることで/dashboard/settingのように階層を作れる。
page.jsとroute.jsは同じ階層に置けない。
UIを作る
page.jsでReact componentをexportしてUIを作る。
Layout
Root Layoutが必須で、returnで<html>と<body>を返す必要がある。
下の階層にも別のlayout.jsを使うことができ、下の階層にnestされる。
<Link>
プロジェクト内のリンクの場合は基本的に<Link>を使うようにする。
<Link>をつかうことでPrefetchingやCachingなどが有効になる。
APIを作る
route.jsでAPIを作ることができる。
GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONSを作れる。
TypeScriptでエラーになるのでResponseはNextResponseで処理するようにした方がいいそう。
Route Groups
app/(admin)/dashboardのようにすることでpathに影響せずグループにまとめることができて、フォルダ管理が綺麗にできる。
この場合 /dashboardでroudingされる。
Dynamic Routes
app/blog/[slug]/page.jsのようにすることで、パラメータとしてpage.jsに渡したslugでroutingできる。
例えば、渡したslugがtodayであれば、/blog/todayでroutingできる。
Middleware
redirectしたりパスを書き換えたりしてアクセスをコントロールできる。
coockiesをチェックしたり、セットしたり削除したりもできる。
middleware.jsをプロジェクトのrootにおくのがconvention。
Project Organization and File Colocation
Next.jsのフォルダやファイル名のconventionはあるものの自由にファイルを置いていいとのこと。
個人的にはappフォルダの中はrouting関連のファイルだけにしておきたいなと思いました。
Private Folders
フォルダ名の頭に_をつけることでprivateにすることができる。もしもapp/_test/page.jsがあったとしてもアクセスできない。
その他
LoadingやError、Intercepting Routes、Parallel Routesなどありますがとりあえずすぐに使わなそうなので軽く目を通しただけです。Internationalizationも実装しやすいようになっているみたいです。
Discussion