Next.js 13.1

公開: 2022-12-22

投稿者: OJ Kwon (@_ojkwon), Tim Neutkens (@timneutkens)

Next.js 13.1 では、pages/（安定）と app/（ベータ） の両ディレクトリに対する改善が含まれます。

• app ディレクトリ（ベータ）での改善: 信頼性とパフォーマンスの向上
• 組み込みモジュールトランスパイル: next-transpile-modules の機能をコアに統合
• Edge Runtime（安定）: エッジ向けの軽量な Node.js ランタイム
• Turbopack の更新: Tailwind CSS、next/image、@next/font などのサポート
• Middleware の改善: レスポンスの返却やリクエストヘッダの設定が可能に
• SWC のインポート解決: バレルファイル使用時の JavaScript バンドルを小さくする変換
• メモリ使用量の改善、新しいテンプレートなど多数

今日の更新方法:

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

app ディレクトリ（ベータ）に対する信頼性向上

Next.js 13 で新登場した app ディレクトリ（ベータ）は、既存の pages ディレクトリと並行して段階的に導入できます。app ディレクトリは、改善されたレイアウト、コンポーネント／テスト／スタイルの共置、コンポーネントレベルのデータフェッチなど、多くの利点を提供します。フィードバックと初期テストのおかげで、以下の信頼性向上を行いました。

• 不要なレイアウト用の <div> を削除: 以前はナビゲーション時にスクロール位置のために追加の <div> が挿入されていましたが、13.1 ではこれらの要素は生成されません。スクロール挙動は維持されます。

• TypeScript プラグイン: ページ／レイアウトの設定オプションの提案、IDE へのドキュメントの直接表示、Server/Client Components に関する使用上のヒント（例: Server Components での useState の使用防止）を提供する新しい TypeScript プラグインを導入しました。詳しくは Learn more を参照してください。

• 信頼性の改善: CSS モジュールのサポート改善、cache() と fetch() のレイアウト／ページ間での重複排除の修正、メモリリーク修正など多数のバグフィックスを行いました。

• クライアントサイド JavaScript の削減: app ディレクトリは pages ディレクトリと比べてクライアントサイド JavaScript を 9.3kB 減らします。このベースラインは、アプリに Server Components を 1 個追加しても 1000 個追加しても増加しません。React ランタイムは一時的にやや大きくなっていますが、これは React Server Components ランタイムによるもので、Next.js が以前扱っていた一部の仕組みを担っています。さらに削減する作業を進めています。

• pages/ vs app/ の差分（概算）:

  • Total First Load JS Baseline: -9.3kB（12.1% 小さい）
  • Next.js Runtime Baseline: -12kB（56.8% 小さい）
  • React Runtime Baseline: +2.7kB（5.2% 大きい）

ベータ版ドキュメントは皆さんのフィードバックに基づき数百件の更新を受けています。

組み込みモジュールトランスパイル（安定）

ローカルパッケージ（モノレポなど）や外部依存（node_modules）の依存関係をトランスパイルしてバンドルするようマークできるようになりました。この組み込みサポートは、人気のあった next-transpile-modules パッケージの代替です。

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
};
module.exports = nextConfig;

この機能の実装やコミュニティ要件を満たす支援を行ってくれた Pierre de la Martinière (@martpie) に感謝します。

インポート解決による小さなバンドル

多くの npm パッケージは「バレルファイル」を使い、別ファイルを再エクスポートすることで単一のエントリを提供します。例:

@acme/ui/index.ts
export { default as Button } from './dist/Button';
export { default as Slider } from './dist/Slider';
export { default as Dropdown } from './dist/Dropdown';

消費側は次のように単一行で利用できます:

import { Button, Slider, Dropdown } from '@acme/ui';

バンドラーはこれらのバレルファイルを理解し未使用の再エクスポートを除去（デッドコード削除）できますが、処理には再エクスポートされたすべてのファイルの解析／コンパイルが必要です。公開ライブラリの中には何千ものモジュールを再エクスポートするバレルを含むものがあり、コンパイル時間が遅くなります。これを回避するために babel-plugin-transform-imports を推奨するライブラリもありましたが、SWC を使用する場合のサポートはありませんでした。

Next.js に新しく組み込まれた SWC トランスフォーム modularizeImports を追加しました。この設定は指定パターンに基づいてインポート文を書き換えます。例えば上記の例は、開発者が手動で書き換えなくても次のように変換されます:

// Before (with barrel file)
import { Button, Slider, Dropdown } from '@acme/ui';

// After (with modularized imports from plugin)
import Button from '@acme/ui/dist/Button';
import Slider from '@acme/ui/dist/Slider';
import Dropdown from '@acme/ui/dist/Dropdown';

next.config.js に modularizeImports オプションでこの変換を有効にできます:

module.exports = {
  modularizeImports: {
    '@acme/ui': {
      transform: '@acme/ui/dist/{{member}}',
    },
  },
};

@mui/icons-material や lodash と組み合わせることで未使用ファイルのコンパイルをスキップできます。Learn more。デモで動作を確認できます。

エッジ向けの軽量 Node.js ランタイムが API Routes でも安定化

Next.js の Edge Runtime は Request、Response などの Node.js API の厳選サブセットを使い、Vercel のようなエッジプラットフォームやセルフホスティングで互換性を保ちます。これらの API はブラウザでも動作するため、一度学べばどこでも書ける利点があります。

例:

pages/api/hello.ts
// "experimental-" プレフィックスは不要になりました
export const config = { runtime: 'edge' };
export default function handler(req: Request) {
  return new Response('Hello World');
}

Next.js の Middleware は既にデフォルトでこの軽量エッジランタイムを使用しています。Middleware はアプリのほぼすべてのリクエスト前に実行され得るため、低レイテンシを保証するために軽量なランタイムが重要です。Next.js 12.2 で API Routes でこのランタイムをオプションで使えるようにしましたが、13.1 で API Routes に対しても Edge Runtime が安定化しました。

セルフホスト時は next start 実行時に Middleware と Edge Runtime を使う API Routes はデフォルトで単一リージョンワークロードとして実行されます。Vercel 上では Middleware と API Routes が Vercel Edge Functions としてグローバルにデプロイされ、可能な限り低いレイテンシを実現します。Vercel Edge Functions は一般利用可能になっています。

Turbopack の改善

Next.js 13 で Turbopack アルファをリリースして以来、信頼性向上、要望の多かった機能のサポート追加、プラグインや他フレームワークでの利用計画の策定に注力してきました。13.0.0 以降の Turbopack の改善点:

• PostCSS（Tailwind CSS を含む）のサポート
• next/image のサポート
• @next/font（Google Fonts）のサポート
• 動的な import() からの CSS 読み込みのサポート
• CSS ソースマップのサポート（貢献: @ahabhgk）
• next dev のエラーオーバーレイにおけるエラーハンドリング改善
• メモリ使用量の改善
• CSS モジュールのサポート改善
• HMR 更新のためのチャンク分割アルゴリズムの改善
• HMR ソースマップの信頼性向上

Vite コミュニティ（Evan You ら）からのフィードバックと貢献に感謝します。Turbopack のベンチマークをより正確にするため、Vite チームと協力してテスト手法を改善しました。その結果、React の更新メカニズムで費やされる時間を含む、より正確なメトリクスを使うようになりました。これにより Turbopack と webpack（Next.js 13.1）で React Fast Refresh の時間を 30ms 改善できました。また、SWC を用いた Vite の新しいベンチマークを追加し、デフォルトの Vite（Babel）に比べて性能が向上することを示しています。

Turbopack アルファは Next.js 13 で next dev --turbo によって試せます。フィードバックは GitHub Discussion で受け付けています。

Next.js 高度な Middleware

フィードバックにより Middleware の機能を拡張しました。13.1 では Middleware からレスポンスを直接返せるようになり、リクエストのヘッダを設定することもできます。これらの API 改善により、Next.js のルーティングライフサイクルのあらゆる部分を柔軟にカスタマイズできるようになりました。

next.config.js の experimental.allowMiddlewareResponseBody 設定はもはや不要です。リライトやリダイレクトを行わずに直接レスポンスを返したり、リクエストヘッダを変更することがより簡単になりました。

例:

middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  // ユーザーのアクセス権をチェック
  if (!isAuthorized(request)) {
    return NextResponse.json({ message: 'Unauthorized' });
  }

  // 新しいヘッダを追加。これにより getServerSideProps や API routes で読み取れる
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13.1');

  return NextResponse.next({
    request: {
      // 新しいリクエストヘッダを適用
      headers: requestHeaders,
    },
  });
}

Next.js 高度な Middleware については Learn more を参照してください。

その他の改善

• @next/font は同じフォント宣言内で複数のフォントウェイトとスタイルを指定することをサポートするようになりました。Learn more。
• next/dynamic は内部で React のプリミティブ lazy() と <Suspense> を使うようになりました。以前の suspense オプションは不要です。これにより next/dynamic は app ディレクトリと互換になりました。
• create-next-app は新しいデザインに更新され、デフォルトで @next/font を含み、フォントの自己ホスティング（ゼロレイアウトシフト）を自動で行います。npx create-next-app@latest を試すかテンプレートをデプロイしてください。
• App Directory Playground を多数改善しました。app ディレクトリ（ベータ）の最新機能や慣習を紹介しています。Deploy your own。
• 高性能なイメージギャラリーテンプレートを作成しました。イメージプレースホルダ、遅延読み込み、自動最適化、キーボードサポートなどを含みます。Deploy your own。
• 大規模なオープンソースの React + Express.js アプリを Next.js に移行する方法を理解するためのリソース（詳細なウォークスルーとコミットへのリンク付き）を作成しました。

コミュニティ

Next.js は 2,400 人以上の個別開発者、Google や Meta のような産業パートナー、そして Vercel のコアチームによる共同作業の成果です。週あたり 360 万以上の npm ダウンロード、97,900+ の GitHub スターを誇り、Next.js は Web を構築する最も人気のある方法の一つです。GitHub Discussions、Reddit、Discord でコミュニティに参加してください。

このリリースは以下の方々によってもたらされました。

• Next.js チーム: Balazs, Hannes, Jan, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim, Wyatt
• Turbopack チーム: Alex, Donny, Justin, Leah, LongYinan, Maia, OJ, Tobias, Will
• および多数の貢献者: @aarnadlr, @aaronbrown-vercel, @aaronjy, @abayomi185, @ademilter, @adictonator, @adilansari, @adtc, @alantoa, @aleksa-codes, @alfred-mountfield, @alpha-xek, @andarist, @andykenward, @anujssstw, @artdevgame, @artechventure, @arturbien, @aziyatali, @bennettdams, @bertho-zero, @blue-devil1134, @bot08, @brkalow, @brvnonascimento, @chanceaclark, @chibicode, @chrisipanaque, @chunsch, @colinking, @craigwheeler, @ctjlewis, @cvolant, @danmindru, @davidnx, @delbaoliveira, @devvspaces, @dtinth, @ducanhgh, @duncanogle, @ethomson, @fantaasm, @feugy, @fomichroman, @gruz0, @haschikeks, @hughlilly, @idoob, @iiegor, @imranbarbhuiya, @ingovals, @inokawa, @ishaqibrahimbot, @ismaelrumzan, @jakemstar, @janicklas-