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