💭

Next.js 13 DocのRouting周りをざっと読んでみました

2023/08/05に公開

とりあえず作り始めるためにざっとDocを読んでみました。

Next.js 13 から追加されたApp Routerについてです。

メモ程度の内容です。

Defining Routes

appフォルダ内にフォルダを作ってその中にpage.jsもしくはroute.jsを作ることでroutableなRouteを作ることができる。
Nestingすることで/dashboard/settingのように階層を作れる。

page.jsとroute.jsは同じ階層に置けない。

page.jsでReact componentをexportしてUIを作る。

Root Layoutが必須で、returnで<html>と<body>を返す必要がある。
下の階層にも別のlayout.jsを使うことができ、下の階層にnestされる。

プロジェクト内のリンクの場合は基本的に<Link>を使うようにする。
<Link>をつかうことでPrefetchingやCachingなどが有効になる。

route.jsでAPIを作ることができる。
GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONSを作れる。
TypeScriptでエラーになるのでResponseはNextResponseで処理するようにした方がいいそう。

app/(admin)/dashboardのようにすることでpathに影響せずグループにまとめることができて、フォルダ管理が綺麗にできる。
この場合 /dashboardでroudingされる。

app/blog/[slug]/page.jsのようにすることで、パラメータとしてpage.jsに渡したslugでroutingできる。
例えば、渡したslugがtodayであれば、/blog/todayでroutingできる。

redirectしたりパスを書き換えたりしてアクセスをコントロールできる。
coockiesをチェックしたり、セットしたり削除したりもできる。

middleware.jsをプロジェクトのrootにおくのがconvention。

Next.jsのフォルダやファイル名のconventionはあるものの自由にファイルを置いていいとのこと。
個人的にはappフォルダの中はrouting関連のファイルだけにしておきたいなと思いました。

フォルダ名の頭に_をつけることでprivateにすることができる。もしもapp/_test/page.jsがあったとしてもアクセスできない。

LoadingやError、Intercepting Routes、Parallel Routesなどありますがとりあえずすぐに使わなそうなので軽く目を通しただけです。Internationalizationも実装しやすいようになっているみたいです。