Backブログに戻る

Next.js 13.1

Next.js 13.1では、appディレクトリの改善、ビルトインモジュールのトランスパイル、APIルートの安定版エッジランタイム、Turbopackサポートの多数の改善が導入されました。

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

今日アップデートするには以下を実行：

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

appディレクトリの信頼性とサポートの改善

Next.js 13では、新しいappディレクトリ（ベータ版）を発表しました。この新しいルーティングとデータ取得システムは、既存のpagesディレクトリと併用して段階的に導入できます。

appディレクトリは、強化されたレイアウト、コンポーネント・テスト・スタイルの同位置配置、コンポーネントレベルのデータ取得など多くの利点を提供します。皆様のフィードバックと初期テストを通じて、appディレクトリの信頼性をいくつか改善しました：

  • レイアウトdivの削除: 以前はappディレクトリがナビゲーション時にスクロール位置を保持するため追加の<div>要素を生成していました。13.1ではこれらの余分な要素は作成されませんが、スクロール動作は維持されます。
  • TypeScriptプラグイン: ページとレイアウト設定オプションの提案、IDE内での直接ドキュメント表示、サーバーコンポーネントとクライアントコンポーネントの使用ヒント（サーバーコンポーネントでのuseState使用防止など）を提供する新しいTypeScriptプラグインを開発しました。詳細はこちら
  • 信頼性の改善: CSSモジュールサポートの改善、レイアウトとページでのcache()とfetch()の適切な重複排除、メモリリークなど多数のバグを修正
  • クライアントサイドJavaScriptの削減: appディレクトリは現在、pagesディレクトリより9.3kB少ないクライアントサイドJavaScriptを含みます。このベースラインは、1つまたは1000のサーバーコンポーネントをアプリケーションに追加しても増加しません。Reactランタイムは一時的に若干大きくなっていますが、この増加はNext.jsが以前処理していたメカニズムを処理するReactサーバーコンポーネントランタイムによるものです。さらに削減するために作業中です。
pages/app/差分
初回読み込みJS合計ベースライン-9.3kB12.1% 削減
Next.jsランタイムベースライン-12kB56.8% 削減
Reactランタイムベースライン+2.7kB5.2% 増加

appディレクトリの安定性向上に向けて引き続き進展を続けられることを嬉しく思います。ベータ版ドキュメントは皆様のフィードバックに基づき数百の更新が行われています。

ビルトインモジュールトランスパイル（安定版）

ローカルパッケージ（モノレポなど）や外部依存関係（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';

これによりパッケージ利用者は1行で名前付きエクスポートを使用できます：

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

バンドラーはこれらのバレルファイルを理解し、未使用の再エクスポート（「デッドコード削除」）を除去できますが、このプロセスには全ての再エクスポートファイルの解析/コンパイルが含まれます。公開ライブラリの場合、数千のモジュールを再エクスポートするバレルファイルを含むnpmパッケージもあり、コンパイル時間が遅くなります。これらのライブラリはこの問題を回避するためbabel-plugin-transform-importsを推奨していましたが、SWCユーザー向けのサポートはありませんでした。Next.jsに組み込まれた新しいSWC変換modularizeImportsを追加しました。

この新しい設定により、定義されたパターンに基づいてインポート文を変更するSWC変換が有効になります。例えば、上記の3つのコンポーネント使用コードは、開発者が手動で記述することなく、自動的に直接インポートを使用するように変換されます：

// 変換前（バレルファイル使用）
import { Button, Slider, Dropdown } from '@acme/ui';
 
// 変換後（プラグインによるモジュール化インポート）
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オプションで可能です：

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

この変換を@mui/icons-materialやlodashで活用すると、未使用ファイルのコンパイルをスキップできます。詳細はこちら

デモを視聴して実際の動作を確認してください。

エッジ向け軽量Node.jsランタイム、APIルートで安定版に

Next.js内のエッジランタイムは、Vercelなどのエッジコンピューティングプラットフォームやセルフホスティング時に互換性のあるNode.js API（Request、Responseなど）の厳密なサブセットを使用します。これらのAPIはブラウザを含むどこでも実行可能で、開発者が一度学べばどこでも記述できます。

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

Next.jsミドルウェアはデフォルトでこの軽量エッジランタイムを使用し、より優れたパフォーマンスを実現しています。ミドルウェアはアプリケーションの全リクエスト前に実行可能なため、低遅延を保証する軽量ランタイムが重要です。Next.js 12.2ではAPIルートでもこのランタイムをオプションで使用できるようにしました。

13.1では、Next.js内のエッジランタイムがAPIルート向けに安定版になりました。セルフホスティング時、エッジランタイムを使用するミドルウェアとAPIルートはデフォルトでnext startの一部としてシングルリージョンワークロードで実行されます。Vercelでは、Next.jsミドルウェアとAPIルートは可能な限り低遅延のためVercel Edge Functionsを使用してグローバルにデプロイされます。Vercel Edge Functionsも一般提供開始しました。

Turbopackの改善

Next.js 13でTurbopackアルファをリリース後、信頼性の向上、最も要望の多かった機能のサポート追加、他のフレームワークでのプラグインと使用の計画定義に注力してきました。

Next.js 13.0.0以降、Turbopackでは：

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

Evan You氏とViteコミュニティに、Turbopackベンチマークを可能な限り正確にするためのフィードバックと貢献に感謝します。Viteチームと協力して最新のTurbopackベンチマークを検証し、テスト方法論に多数の改善を加えました。

この協力の結果、Reactの更新メカニズムで費やされた時間を含むより正確な指標を使用するようになりました。TurbopackとNext.js 13.1（webpack）のReact Fast Refresh時間を30ms改善できました。また、デフォルトのVite（Babel使用）と比較してパフォーマンスが向上したSWC使用時のVite向け新ベンチマークも追加しました。更新されたベンチマークを閲覧またはテスト方法論についてお読みください。

Next.js 13でnext dev --turboを使用して今日からTurbopackアルファ版をお試しください。フィードバックはGitHub Discussionでお知らせください。

Next.js高度なミドルウェア

皆様のフィードバックにより、Next.jsミドルウェアをこれまで以上に強力にしています。13.1では、ミドルウェアからレスポンスを返却し、リクエストにヘッダーを設定できるようになりました。

これらのAPI改善により、Next.jsルーティングライフサイクルのあらゆる部分をカスタマイズする新しい柔軟性が得られます。next.config.js内のexperimental.allowMiddlewareResponseBody設定オプションは不要になりました。

リクエストにヘッダーを設定したり、rewriteやredirectなしで直接応答したりすることがより簡単になりました：

middleware.ts
import { NextResponse } from 'next/server';
 
export function middleware(request: Request) {
  // ユーザーがアクセス権限を持っているか確認...
  if (!isAuthorized(request)) {
    return NextResponse.json({ message: 'Unauthorized' });
  }
 
  // 新しいヘッダーを追加。これは受信リクエストヘッダーを変更します
  // getServerSidePropsやAPIルートで読み取れます
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13.1');
 
  return NextResponse.next({
    request: {
      // 新しいリクエストヘッダーを適用
      headers: requestHeaders,
    },
  });
}

Next.js高度なミドルウェアについてさらに学ぶ

その他の改善

コミュニティ

Next.jsは、2,400人以上の個人開発者、GoogleやMetaなどの業界パートナー、そしてVercelのコアチームの共同作業の成果です。週間350万以上のnpmダウンロードと97,900以上のGitHubスターを獲得し、Next.jsはWebを構築する最も人気のある方法の1つです。

GitHub Discussions、Reddit、Discordでコミュニティに参加してください。

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

そして以下の貢献者の方々: @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-ralph, @jaredpalmer, @jaykch, @jimcresswell, @joliss, @josephcsoti, @joshuaslate, @joulev, @jueungrace, @juliusmarminge, @karlhorky, @kikobeats, @kleintorres, @koenpunt, @koltong, @kosai106, @labyrinthitis, @lachlanjc, @laityned, @leerob, @leoortizz, @lorenzobloedow, @lucasassisrosa, @m7yue, @manovotny, @marcus-rise, @matthew-heath, @mattpr, @maxleiter, @maxproske, @meenie, @mmaaaaz, @mnajdova, @moetazaneta, @mrkldshv, @nathanhammond, @nekochantaiwan, @nfinished, @niedziolkamichal, @nocell, @notrab, @nuta, @nutlope, @obusk, @orionmiz, @peraltafederico, @reshmi-sriram, @reyrodrigez, @rightones, @rishabhpoddar, @saseungmin, @serkanbektas, @sferadev, @silvioprog, @sivtu, @soonoo, @sqve, @steven-tey, @sukkaw, @superbahbi, @teobler, @theevilhead, @thomasballinger, @timeyoutakeit, @valentinh, @ws-jm, @wxh06, @yasath, @yutsuten, @zekicaneksi