💭

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.jsroute.jsは同じ階層に置けない。

UIを作る

page.jsReact componentexportして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も実装しやすいようになっているみたいです。

GitHubで編集を提案

Discussion