DocsDigest
Back to listLanguage: JA
OpenAINext.jsDec 22, 2022, 4:00 PM

Next.js 13.1

A condensed section focused on the key takeaways first.

Original Post
OpenAIClaude

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

Next.js 13.1 release highlights

next.jsapp-directoryedge-runtimeswcturbopackmiddlewaretranspilation

Key Points

  • Edge Runtime stable for API routes
  • Built-in transpilePackages replaces next-transpile-modules
  • Middleware can return responses and set request headers

Summary

Next.js 13.1 improves the app/ (beta) experience, stabilizes the Edge Runtime for API routes, and adds performance and developer ergonomics features: built-in module transpilation, an SWC modularizeImports transform to reduce bundle size, Turbopack enhancements, and more powerful Middleware. Upgrade with npm i next@latest react@latest react-dom@latest eslint-config-next@latest.

Key Points

  • app directory (beta): reduced client-side JS (~9.3kB baseline reduction), removed extra layout <div>s, new TypeScript plugin (IDE hints for pages/layouts and Server/Client component usage), and multiple reliability/memory fixes.
  • Built-in module transpilation: replace next-transpile-modules by configuring transpilePackages in next.config.js to transpile local and external packages (monorepos supported).
  • SWC import resolution: modularizeImports rewrites barrel imports into direct imports to skip compiling unused modules and speed up builds.
  • Edge Runtime (stable): light Node-compatible runtime is now stable for API routes and used by Middleware; set export const config = { runtime: 'edge' } for API handlers.
  • Middleware improvements: Middleware can now return responses and mutate incoming request headers (no experimental flag required), enabling direct JSON responses and header injection.
  • Turbopack updates: added support for Tailwind/PostCSS, next/image, @next/font, CSS from dynamic import(), improved HMR, memory usage, and source maps. Try it with next dev --turbo (alpha).
  • Misc: next/dynamic now uses React.lazy + Suspense, @next/font supports multiple weights/styles, updated create-next-app template, and new example templates (image gallery, app directory playground).

Practical notes: test transpilePackages and modularizeImports if you use monorepos or libraries that rely on barrel files to reduce compile time and bundle size. Run the upgrade command above to update next, react, react-dom, and eslint-config-next.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

Next.js 13.1

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-