Next.js 13

Next.js Confで発表したように、Next.js 13（安定版）は無制限にダイナミックな基盤を築きます：

主な機能

app Directory（ベータ版）

• より簡単、高速、少ないクライアントJS
• レイアウト
• React Server Components
• ストリーミング

Turbopack（アルファ版）

• 最大700倍高速なRustベースのWebpack代替

新しいnext/image

• ネイティブブラウザ遅延読み込みによる高速化

新しい@next/font（ベータ版）

• レイアウトシフトゼロの自動セルフホストフォント

改良されたnext/link

• 自動<a>タグによる簡素化されたAPI

Next.js 13とpagesディレクトリは安定しており、本番環境で使用できます。以下のコマンドで今すぐアップデートしてください：

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

新しいapp Directory（ベータ版）

今日、私たちはNext.jsのルーティングとレイアウトの体験を改善し、appディレクトリの導入によりReactの未来と歩調を合わせています。これは、コミュニティフィードバックのために以前に公開されたLayouts RFCのフォローアップです。

appディレクトリは現在ベータ版であり、まだ本番環境での使用は推奨していません。改良されたnext/imageやnext/linkコンポーネントなどの安定した機能でpagesディレクトリを使用してNext.js 13を使用し、自分のペースでappディレクトリを選択できます。pagesディレクトリは予見可能な将来にわたってサポートされ続けます。

appディレクトリには以下のサポートが含まれています：

• レイアウト: 状態を保持し、高価な再レンダリングを回避しながら、ルート間でUIを簡単に共有
• Server Components: 最もダイナミックなアプリケーションでサーバーファーストをデフォルトに
• ストリーミング: 瞬時のローディング状態を表示し、レンダリングされるUIの単位でストリーミング
• データフェッチのサポート: 非同期Server Componentsと拡張fetch APIにより、コンポーネントレベルでのフェッチが可能

appディレクトリは既存のpages/ディレクトリから段階的に採用できます。

レイアウト

app/ディレクトリにより、ナビゲーション間で状態を維持し、高価な再レンダリングを回避し、高度なルーティングパターンを可能にする複雑なインターフェースを簡単にレイアウトできます。さらに、レイアウトをネストし、コンポーネント、テスト、スタイルなどのアプリケーションコードをルートと同じ場所に配置できます。

app/内でルートを作成するには、単一のファイルpage.jsが必要です：

// app/page.js
// このファイルはインデックスルート（/）にマップされます
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

その後、ファイルシステムを通じてレイアウトを定義できます。レイアウトは複数のページ間でUIを共有します。ナビゲーション時に、レイアウトは状態を保持し、インタラクティブなままで、再レンダリングしません。

// app/blog/layout.js
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

Server Components

app/ディレクトリは、ReactのServer Componentsアーキテクチャのサポートを導入します。ServerとClient Componentsは、それぞれが最も得意とするサーバーとクライアントを使用し、優れた開発者体験を提供する単一のプログラミングモデルで高速で高度にインタラクティブなアプリを構築できます。

Server Componentsにより、クライアントに送信されるJavaScriptの量を削減しながら複雑なインターフェースを構築する基盤を築き、より高速な初期ページロードを可能にします。

ストリーミング

app/ディレクトリは、UIのレンダリングされた単位をクライアントに段階的にレンダリングし、段階的にストリーミングする機能を導入します。

Next.jsのServer Componentsとネストされたレイアウトにより、データを特に必要としないページの部分を即座にレンダリングし、データを取得しているページの部分にローディング状態を表示できます。

データフェッチ

Reactの最近のSupport for Promises RFCは、コンポーネント内でデータを取得し、プロミスを処理する強力な新しい方法を導入します：

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // 戻り値はシリアライズされません
  // Date、Map、Setなどを返すことができます
  return res.json();
}

// これは非同期Server Componentです
export default async function Page() {
  const data = await getData();
  return <main>{/* ... */}</main>;
}

ネイティブfetch Web APIもReactとNext.jsで拡張されています。fetchリクエストを自動的に重複排除し、コンポーネントレベルでデータを取得、キャッシュ、再検証する柔軟な方法を提供します。

// このリクエストは手動で無効化されるまでキャッシュされるべきです
// `getStaticProps`と同様
fetch(URL, { cache: 'force-cache' });

// このリクエストはすべてのリクエストで再取得されるべきです
// `getServerSideProps`と同様
fetch(URL, { cache: 'no-store' });

// このリクエストは10秒の有効期間でキャッシュされるべきです
// `revalidate`オプション付きの`getStaticProps`と同様
fetch(URL, { next: { revalidate: 10 } });

Turbopack（アルファ版）の導入

Next.js 13には、WebpackのRustベースの後継であるTurbopackが含まれています。Webpackは30億回以上ダウンロードされています。Webの構築に不可欠な部分でしたが、JavaScriptベースのツールで可能な最大パフォーマンスの限界に達しました。

Next.js 13でTurbopackアルファ版を使用すると：

• Webpackより700倍高速な更新
• Viteより10倍高速な更新
• Webpackより4倍高速なコールドスタート

Turbopackは大規模アプリケーションで700倍高速なHMRを持つ、WebpackのRustベース後継です。

Next.js 13でTurbopackアルファ版を今すぐ試すには：

next dev --turbo

next/image

Next.js 13は強力な新しいImageコンポーネントを導入し、レイアウトシフトなしで画像を簡単に表示し、パフォーマンス向上のためにオンデマンドでファイルを最適化できます。

新しいImageコンポーネント：

• より少ないクライアントサイドJavaScriptを配信
• スタイリングと設定が簡単
• デフォルトでaltタグを要求することでよりアクセシブル
• Webプラットフォームと整合
• ネイティブ遅延読み込みがハイドレーションを必要としないため高速

// app/page.js
import Image from 'next/image';
import avatar from './lee.png';

export default function Home() {
  // "alt"はアクセシビリティ向上のため必須になりました
  // オプション：画像ファイルはapp/ディレクトリ内に同じ場所に配置できます
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

Next.js 13へのnext/imageアップグレード

古いImageコンポーネントはnext/legacy/imageに名前が変更されました。既存のnext/imageの使用をnext/legacy/imageに自動的に更新するcodemodを提供しています。

npx @next/codemod next-image-to-legacy-image ./pages

@next/font

Next.js 13は以下の機能を持つ全く新しいフォントシステムを導入します：

• カスタムフォントを含むフォントの自動最適化
• プライバシーとパフォーマンス向上のための外部ネットワークリクエストの削除
• 任意のフォントファイルの組み込み自動セルフホスティング
• CSSのsize-adjustプロパティを使用した自動ゼロレイアウトシフト

// app/layout.js / pages/_app.js
import { Inter } from '@next/font/google';
const inter = Inter();

<html className={inter.className}></html>

カスタムフォントもサポートされており、フォントファイルの自動セルフホスティング、キャッシュ、プリロードをサポートしています：

// app/layout.js / pages/_app.js
import localFont from '@next/font/local';
const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}></html>

next/link

next/linkは子として手動で<a>を追加する必要がなくなりました。これは12.2で実験的オプションとして追加され、現在はデフォルトです。

Next.js 13では、<Link>は常に<a>をレンダリングし、基礎となるタグにpropsを転送できます：

import Link from 'next/link'

// Next.js 12: `<a>`をネストする必要があります
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>`は常に`<a>`をレンダリングします
<Link href="/about">
  About
</Link>