Next.jsのapp/の構造を掴む

Next.js v13でapp/がbetaで入った

以前のNext.jsと差異が大きすぎるので学ぶのが大変

Routing: Fundamentals | Next.js

Routing: Defining Routes | Next.js

Routing: Pages and Layouts | Next.js

app/とは何か

root部分に設置するdir

以前のpages/に概念としては近い

app/以下の.tsxはdefaultで全てserver componentsになる

client componentにするためにはファイルの1行目に'use client' を追記する

app/の中身

app/直下はこんな感じ

code:tree

app

├── cart

│ ├── AddToCart.tsx

│ ├── delay.ts

│ ├── layout.tsx

│ └── page.tsx

├── category

│ ├── id

│ ├── layout.tsx

│ └── page.tsx

├── hoge

│ ├── (main)

│ └── (shop)

├── ...

│ └── ...

├── head.tsx

├── layout.tsx

└── page.tsx

cart/、category/、hoge/のようなdir

これでfile-system based routingをしている

以前はpages/直下のfileで表現していたが、dirになった

https://gyazo.com/b906918e91a0ec847ed01038bb4f7ee6 https://beta.nextjs.org/docs/routing/fundamentals

ここで定義したdir名が、URLの1つ目のSegmentになる

dirの中身は後述

docsにならってこれらのことをFoldersと呼ぶことにするmrsekut.icon

dir名が()で囲まれているものはRoute Groups

head.tsx、layout.tsx、page.tsxなどのfile

これらのfile名はNext.jsが規定しているもの

これらのfileは、Folders内でも定義されるものと同じ

Folders内で定義されていない時に同じ意味で参照されるルートの設定になる

例えば、cart/head.tsxがない時、/cartページでの<head>の内容は、app/head.tsxで定義されたものになる

Folders

名前の予約されたfileを設置する

docsではSpecial Filesと呼んでている

今のところ7種類のfile名が予約されている

もちろんそれ以外のfileを置いても良い

app/page.tsxが置かれて初めて、そのdirはページとして公開される ref

逆に言えば、page.tsxを置かなければ通常のdirとして利用できる

Foldersのネスト

ネストできる

この動きがわかりやすい

https://i.gyazo.com/bfa8af3d80e469d559a4caa707a25af1.mp4

vercel/app-playgroundを触る