More than 1 year has passed since last update.

Next.js13雑多なメモ

Last updated at 2023-01-09Posted at 2022-12-03

appディレクトリ

ざっくり概要

appディレクトリにあるページはデフォルトでServer Components
ページがClient Componentsであるpagesディレクトリとは異なる

RootLayout

RootLayoutは必須 → app/layout.tsxのこと
Layoutは状態を維持して再レンダリングされない
- 状態の変更などが関わってくるときはTemplateを使用する
- Templateを使用する特別な理由がない限り、Layoutを使用することが推奨されている

type Props = {
  children: React.ReactNode
}

const RootLayout = ({ children }: Props) => {
  return (
    <html lang="ja">
      <body>
        {children}
      </body>
    </html>
  )
}

export default RootLayout

その他変更点

_app.jsと_document.jsは不要になる → layout.tsxに置き換わる
next/headはhead.tsxに置き換わる（予定）
APIルートは従来通りpages/api/*ディレクトリで定義する

ServerComponents

appディレクトリ内のコンポーネントは、特殊ファイルやコロケーションされたコンポーネントも含め、デフォルトですべてReact Server Components
- Server ComponentsとClient Componentsにより、Reactはクライアントとサーバーでレンダリングできるようになり、コンポーネントレベルでレンダリング環境を選択することができるようになった
追加のJavaScriptは、Client Componentsの使用により、アプリケーションにクライアントサイドのインタラクティブ性が必要な場合にのみ追加される
Client Componentを使用する必要があるまでは、Server Componentを使用することを推奨

Client Components

Client Componentsを使用するときは'use client'; 宣言をする
Client Componentsは、クライアント上でレンダリングされる
Next.jsでは、Client Componentsをサーバー上でプリレンダリングして、クライアント上でハイドレーションすることもできる
Server ComponentとClient Componentは、同じコンポーネントツリーに挟み込むことができる
Server Componentがサーバー専用のコード（データベースやファイルシステムのユーティリティなど）を持つ可能性があるため、Client Componentsの中にServer Componentsをインポートすることには制限がある

データフェッチ

ざっくり概要

getServerSideProps、getStaticProps、getInitialPropsは、appディレクトリではサポートされない。よりシンプルなAPIに置き換わった。→ fetchのオプションで指定する
SSG、SSRなどページ単位でのレンダリングという概念ではなく、コンポーネントレベルでデータのフェッチ（静的・動的）を使い分ける新しいメンタルモデル
Server ComponentsはJavaScriptバンドルを送信しないため、クライアントへのJavaScriptの送信が少なくなる。Client Componentsでもデータフェッチは可能だが、特別な理由がない限り、データを直接必要とするServer Components内部でのデータフェッチを推奨。
Client Componentsでのデータ取得はSWRやReact Queryなどのサードパーティライブラリを使用することを推奨。将来的には、Reactのuse()フックを使用して、Client Componentsからデータを取得することも可能になる。

サーバーコンポーネント間でのフェッチリクエストの共有

Server Components ではpropsは使用せず、データが必要な箇所でフェッチリクエストを送ることが推奨されている。
フェッチリクエストはサーバーコンポーネントで自動的に重複排除されるので、各ルートセグメントは重複したリクエストを気にしなくて良い。キャッシュから同じ値を読み取る。

fetch()

Next.js はfetch()関数のoptionsオブジェクトを拡張し、サーバー上の各リクエストで独自の持続的キャッシュ動作を設定できるようになった。
コンポーネントレベルのデータ取得とあわせて、データが使用される場所で、アプリケーションコード内で直接キャッシュを設定することが可能になる。
Reactはfetchを拡張してリクエストの自動的な重複排除を提供し、Next.jsはfetch optionsオブジェクトを拡張して各リクエストに独自のキャッシュと再バリデーションのルールを設定できるようになる。

静的データフェッチ（デフォルト）

デフォルトでは、fetch()リクエストの結果をキャッシュする。
getStaticPropsに似ている
force-cacheがデフォルトで省略可能

// `app` directory

async function fetchData() {
  const res = await fetch('https://.../data'); // cache: 'force-cache' is the default
  const data = await res.json();
  return data;
}

ダイナミックレンダリング

すべてのリクエストでリフェッチされる
getServerSidePropsに似ている

// `app` directory

async function fetchData() {
  const res = await fetch(`https://.../data`, { cache: 'no-store' });
  const data = await res.json();
  return data;
}

データの再検証

有効期限でキャッシュされる
getStaticPropsにrevalidateオプションをつけたものに似ている。

// `app` directory

async function fetchData() {
  const res = await fetch(`https://.../data`, { next: { revalidate: 10 } });
  const data = await res.json();
  return data;
}

サードパーティ

クライアントのみの機能に依存するサードパーティコンポーネントを、独自のクライアントコンポーネントでラップすることができる
ほとんどのサードパーティコンポーネントは、Client Componentsの中で使用される可能性が高いので、ラップする必要はないかもしれないが、プロバイダコンポーネントは例外で、Reactの状態とコンテキストに依存しており、通常はアプリケーションのルートで必要になる

'use client';

import { AcmeCarousel } from 'acme-carousel';

export default AcmeCarousel;

参考資料

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up