Zenn
🐾

【Next.js v13】appディレクトリについて

2023/01/02に公開
Next.js
idea

触りながらちょっとずつメモ

appディレクトリ

ルーティング

  • appディレクトリがルート/となる
  • appディレクトリ内の各ディレクトリがルートセグメントとなり、URLパス内の対応するセグメントにマッピングされる
  • ディレクトリをルートセグメントとするには、ディレクトリ内にpage.jsファイルを１つ作る必要がある
  • ディレクトリをネストさせることで、ネストしたルートを作成できる
  • ユーザーが新しいルートに移動するとURLが更新され、Next.jsは変更されたセグメントのみをレンダリングする
    image

ルートで使用できる特別なファイル

  • page.js
  • layout.js
  • loading.js
  • error.js
  • template.js
  • head.js
  • not-found.js
    image

コロケーション

特別なファイル以外にも、スタイルシートやテスト、コンポーネントなどの関連するファイルをまとめて配置することができる
image

Layouts

  • <html>と<body>を持ったルートレイアウトが必ず必要
  • ディレクトリをネストさせることで、ネストしたレイアウトを作成できる
  • レイアウトはセグメントで共有され、セグメント内のページ移動では再レンダリングされない
  • レイアウト内でデータ取得が可能
  • 親子レイアウト間でデータを渡すことはできない

Server Components

  • ReactのServer Componentsアーキテクチャのサポートを導入
  • appの内部のコンポーネントはデフォルトではReact Server Componentとなる
  • ページの先頭に"use client";を書いて、Client Componentとすることも可能

Streaming

  • appディレクトリではUIのレンダリングを段階的に行い、レンダリングされた単位で段階的にストリーミングできる
  • Server ComponentsとNext.jsのネストされたレイアウトを使うと、データがいらない部分は即座にレンダリングし、データを取得している部分については読み込み状態を表示するため、ユーザーはページ全体のロードを待たずに操作を開始できる

Data Fetching

  • 新しいフックは、以前のgetStaticPropsやServerSidePropsのNext.js API を置き換える
    image
  • コンポーネント レベルでデータをフェッチ、キャッシュ、および再検証する柔軟な方法が 1 つになった
    image
  • リッチでインタラクティブなクライアント側のエクスペリエンスを維持しながら、デフォルトで出荷される JavaScript を大幅に減らすことができる
  • アプリケーションでサーバー コンポーネントの数が増えても、必要なクライアント側の JavaScript の量は変わらない

Discussion