Next.js13のAppDirectoryについてドキュメントを読んでみる

参照元 - Next.js 13 Beta ドキュメント

https://beta.nextjs.org/docs/getting-started

# そもそもAppDirってなんぞや
v13で実験的な機能として、appディレクトリでページを作成していこうという取り組みです
("実験的"なので、デフォルトの機能はpagesディレクトリ配下)

# pages directoryを振り返る
App Directoryについては下の方で書いていきますが、
まずはデフォルトのpagesの機能についてのおさらい

`pages`配下にページを作っていくことで、そのままURLの扱いになります

サンプルの配置(pages以外は記載しません)
```text
project
└── pages
    ├── _app.tsx
    ├── about.tsx
    ├── api
    │   └── hello.ts
    ├── blog
    │   └── [id].tsx
    └── index.tsx
```

| path | URL |
| -- | -- |
| pages/index.tsx | https://example.com |
| pages/about.tsx | https://example.com/about |
| pages/blog/[id].tsx | https://example.com/blog/1 <br /> https://example.com/blog/2  |
| pages/api/hello.ts | https://example.com/api/hello |

要は作ったファイル名やフォルダ名に合わせてマッピングされる
`index`の場合はフォルダに合わせて、
`index`以外の場合はファイル名に合わせて、
`[]`で囲まれたファイルは動的に生成できるという感じ

まぁ、細かいことはドキュメント見てください

https://nextjs.org/docs/basic-features/pages


# じゃあapp directoryって？
`app`配下にファイルを置いていくことでURLパターンが作成されます
では、`pages`と何が違うのか。

app directoryではファイル名の指定があり、URLの基本的な構成はフォルダに依存します
![](https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1666568300/nextjs-docs/darkmode/route-segments-to-path-segments.png)

https://beta.nextjs.org/docs/routing/fundamentals#route-segments

公式より抜粋

## 決まっているファイル名
現在は7個です

- page.tsx - 
- layout.tsx
- loading.tsx
- error.tsx
- tempplate.tsx
- head.tsx
- not-found.tsx

コンポーネントとして表すと下記のようになるらしい
(`head.tsx`はそのルートで`title`タグや`meta`タグが変えられる機能)
![](https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1666568300/nextjs-docs/darkmode/special-files.png)

ちなみに`tsx`,`jsx`,`js`は認められていますが、`ts`はまだサポートされていないそうです

https://beta.nextjs.org/docs/routing/fundamentals#special-files

なので、上で表した`pages`の配置を`app`に変更すると下記のようになる
```
app
├── about
│   └── page.tsx
├── blog
│   └── [id]
│       └── page.tsx
├── error.tsx
├── head.tsx
├── layout.tsx
├── loading.tsx
├── page.tsx
└── template.tsx
```

ちなみに必要最低限なので、blogの各ページでタイトルを変えたければそのディレクトリに`head.tsx`を配置したりする必要がある
ない場合はネストされるので、ルートディレクトリのものが使用される

apiについては書いてなかったので、一旦放置...

じゃあ、URLの通りにしかフォルダを配置できないかというと、そういうことでもないらしい
`()`のフォルダを作成することで、管理上は複数のフォルダに分けても、
URLは管理とはまた別の表示にできるみたい。

![](https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1666568350/nextjs-docs/darkmode/route-group-opt-in-layouts.png)

各ファイルの機能を詳しく知るのはこっち

https://beta.nextjs.org/docs/routing/pages-and-layouts#templates

## データ取得方法

app directoryになって変わったのはファイル名だけではありません
データの取得方法が変わり、お馴染みの`getServerSideProps`、`getStaticProps`、`getInitialProps`がサポートされなくなりました。
コンポーネント単位でのデータの取得、キャッシュ、再検証を行うようになったらしい

Reactがv18になったことでSuspenseの機能が使えるようになったので実現したのかな？
とりあえず詳しいところは下記記事見てほしい

https://beta.nextjs.org/docs/data-fetching/fundamentals

ちなみに`getStaticPaths`だけはやっぱ残すっぽい(`generateStaticParams`に名称変更)

https://beta.nextjs.org/docs/data-fetching/generating-static-params

実際の使い方は下記のようにするらしい

- async/awaitを使う方法
```tsx:page.tsx
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

export default async function Page() {
  const name = await getData();

  return '...';
}
```

- reactのuseを使う方法
```tsx:page.tsx
"use client";

import { use } from 'react';

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

export default async function Page() {
  const name = use(getData());

  return '...';
}
```

キャッシュとかデータの再検証は下記ページ参照

https://beta.nextjs.org/docs/data-fetching/fetching

キャッシュについてはもっと詳しく書いてあった↓

https://beta.nextjs.org/docs/data-fetching/caching

データのアップデートとかを行った時に、画面のデータどうやって更新するの？
→今の所`router.refresh`使ってくれって書いてある
新しいRFCの機能に期待ですね

https://beta.nextjs.org/docs/data-fetching/mutating


# とりあえず雑にかくとこんな感じ？
StylingとかOptimizingとかも見たんですけど、
その辺はapp directoryには関係ないかな？
Linkがaタグ入らなくなったとか、Imageがローカルにあるものならwidth/height不要になったとかはドキュメント読んでください(面倒になった)