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

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

そもそもAppDirってなんぞや

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

pages directoryを振り返る

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

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

サンプルの配置(pages以外は記載しません)

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 https://example.com/blog/2
pages/api/hello.ts	https://example.com/api/hello

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

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

じゃあapp directoryって？

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

app directoryではファイル名の指定があり、URLの基本的な構成はフォルダに依存します

公式より抜粋

決まっているファイル名

現在は7個です

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

コンポーネントとして表すと下記のようになるらしい
(head.tsxはそのルートでtitleタグやmetaタグが変えられる機能)

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

なので、上で表した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は管理とはまた別の表示にできるみたい。

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

データ取得方法

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

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

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

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

• async/awaitを使う方法

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を使う方法

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 '...';
}

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

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

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

とりあえず雑にかくとこんな感じ？

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