Next.js 12.3

2022年9月8日（木曜日）

投稿者: Balázs Orbán @ balazsorban44, DongYoon Kang @ kdy1dev, Jiachi Liu @ huozhi, JJ Kasper @ ijjk, Maia Teegarden @ padmaia, Shu Ding @ shuding, Steven @ styfle, Tim Neutkens @ timneutkens

Next.js 12.3では、開発体験を向上させる改善を提供しています：

• Fast Refreshの改善: .env、jsconfig.json、tsconfig.jsonファイルがホットリロードに対応
• TypeScript自動インストール: .tsファイルを追加するだけでTypeScriptが自動設定され、依存関係がインストールされます
• Imageコンポーネント: next/future/imageが安定版になりました
• SWC Minifier: Next.jsコンパイラによる最小化が安定版になりました
• 新しいRouterとLayoutsの更新: 実装が開始され、新機能について説明します

今すぐnpm i next@latestを実行してアップデートしてください。

10月25日に開催される第3回グローバルNext.jsコミュニティカンファレンスを発表します。今すぐ登録 →

Next.js Conf

10月25日に開催されるグローバルNext.jsコミュニティカンファレンスにご招待します。Next.jsの6周年を記念して、以下を紹介します：

• React Server Components、Streaming、Suspenseを活用した機能
• 開発者がアプリケーションを最適化・スケールしやすくする規約
• ローカル開発と本番ビルドを高速化するオープンソースツール

無料チケットを取得して、Next.jsとReactの未来をご覧ください。詳細は@nextjsをフォローしてください。

コミュニティトークも募集中です。トーク提案を提出して、Next.jsで構築しているものの話を共有してください。

TypeScript自動インストール

Next.jsにはTypeScriptを自動設定する機能が組み込まれています。これまで、既存のプロジェクトにTypeScriptを追加するには、必要な依存関係を手動でインストールする必要がありました。

このリリースでは、Next.jsがプロジェクトにTypeScriptファイルが追加されたことを自動検出し、必要な依存関係をインストールして、tsconfig.jsonファイルを追加します。

これはnext devとnext buildの実行時に動作します。

Fast Refreshの改善

高速な反復処理は、ローカル開発ワークフローにとって重要です。Next.jsはFast Refreshを使用して、Reactコンポーネントに加えた編集に対する瞬時のフィードバックを提供します。保存を押すだけで、ページをリロードすることなく、ブラウザに変更が反映されます。

Next.js 12.3では、以下の設定ファイルも編集時にホットリロードされるようになりました：

• .envおよびenv.*バリアント
• jsconfig.json
• tsconfig.json

これらの設定ファイルを変更する際に、ローカル開発サーバーを再起動する必要がなくなりました。

Imageコンポーネント

next/future/imageコンポーネント（安定版）

Next.js 12.2では、画像のスタイリングを簡素化し、ネイティブブラウザの遅延読み込みを使用してパフォーマンスを向上させる新しいImageコンポーネントの実験的プレビューを共有しました。

新しいImageコンポーネントは安定版となり、実験的フラグが不要になりました。

前回のリリース以降、さらなる改善を行いました：

• 画像が親要素を埋めるfillレイアウトモードのサポートを追加
• blur-upプレースホルダーを改善し、透明画像で動作し、<noscript>が不要になり、next devがnext startと一致するように
• 画像読み込み中にalt textを非表示にして、微細なレイアウトシフトを防止（Chrome以外のブラウザ）
• アクセシビリティ向上のためalt属性を必須に
• ハイドレーション前にエラーが発生した場合のonErrorプロパティを修正
• widthまたはheightプロパティのみを持つ静的インポート画像のアスペクト比を修正
• 不適切な設定や構成を使用した場合のエラーメッセージを改善

将来的には、next/imageをnext/legacy/imageに、next/future/imageをnext/imageにリネームする予定です。これにより、新しいNext.jsプロジェクトに優れた体験を提供し、既存のプロジェクトはnext/imageコードモッドを使用して簡単に移行できます。

詳細については、移行ガイドを含むドキュメントを参照してください。

Remote Patterns（安定版）

remotePatternsを使用すると、組み込みのImage Optimization APIを使用する際に、リモート画像のワイルドカードを指定できます。ドメイン名の完全一致のみを実行する既存のimages.domains設定を超えて、より強力なマッチングが可能になります。

このオプションは安定版となり、以下の設定オプションで使用できます：

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        // `src`プロパティのhostnameは`.example.com`で終わる必要があります。
        // そうでなければAPIは400 Bad Requestで応答します。
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

Image Optimizationの無効化（安定版）

Image Optimization APIは、リクエストに応じて画像をオンデマンドで最適化するサーバーが必要です。これはnext startでのセルフホスティングやVercelなどのプラットフォームへのデプロイ時には問題なく動作します。

しかし、next exportでは画像を最適化するサーバーが含まれていないため、これは動作しません。以前はloaderプロパティを使用してサードパーティのImage Optimization プロバイダーを設定する必要がありましたが、next.config.jsを使用してnext/imageのすべてのインスタンスでImage Optimizationを完全に無効化できるようになりました。

この以前は実験的だったオプションは安定版となり、以下の設定オプションで使用できます：

// next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

SWC Minifier（安定版）

Next.js 12では、Next.js Compilerの実験的機能の一部として、SWCを使用したコード最小化を導入しました。初期の結果では、SWCによる最小化はTerserを使用した以前のバージョンより7倍高速でした。

このリリースでは、この機能が安定版となり、以下のnext.config.jsオプションを使用してオプトインできます：

// next.config.js
module.exports = {
  swcMinify: true,
};

次のメジャーバージョンでSWC minifierをデフォルトにする予定です。

新しいRouterとLayoutsの更新

今年の初めに、2016年のリリース以来最大のNext.jsアップデートを紹介するLayouts RFCを公開しました。これらの変更には、React Server Componentsの上に構築された新しいルーターが含まれています。

実装作業が開始され、次のメジャーバージョンでのパブリックベータに向けて取り組んでいます。

本日、以下を含む今後の機能について詳細情報を共有します：

• Route Groups: ルートをレイアウトからオプトアウトし、URLパスに影響を与えることなくルートを整理するために使用
• Instant Loading States: Suspenseで構築された、読み込みUIを簡単に追加する新しいファイル規約
• Error Handling: ネストしたError BoundariesとエラーUIを簡単に追加する新しいファイル規約
• Templates: 異なるインスタンスを作成し、状態を共有しない共有UIを追加する新しいファイル規約
• Intercepting Routes、Parallel Routes、Conditional Routes: 高度なルーティングパターンを実装できる新しい規約

さらに、別のRFCで、新しいappディレクトリでのGlobal CSS Importsのサポート追加を検討しています。これにより、追加設定なしで独自の.cssファイルをインポートするパッケージを使用できるようになります。

これらの新機能の詳細については、Layouts RFCをお読みください。

その他の改善

• Next.jsの組み込みアクセシビリティ機能に関する新しいドキュメント
• create-next-appテンプレートに、システム設定を使用したダークモードサポートが自動的に含まれるように
• 統合ESLintサポート使用時にsrc/がデフォルトのlintingディレクトリに
• next.config.jsにajvによるスキーマ検証が含まれ、設定オプションの誤用を防止
• next.config.jsに実験的設定フラグfallbackNodePolyfills: falseが追加され、Next.jsがブラウザ用にNode.js APIをポリフィルすることを防止（バンドルサイズの増加につながる）。このオプションにより、Next.jsは不要なインポートの場所を示すビルド時エラーを表示

コミュニティ

Next.jsは、2,000人を超える個人開発者、Google ChromeやMetaなどの業界パートナー、そしてVercelのコアチームの共同作業の結果です。

このリリースは以下の貢献者によってもたらされました： @pthomas931, @madmed88, @sanjaiyan-dev, @balazsorban44, @DonghyukJacobJang, @chaiwattsw, @styfle, @dunglas, @ahkhanjani, @promer94, @terrierscript, @shawncal, @insik-han, @QuiiBz, @ykzts, @JoshuaKGoldberg, @lucasassisrosa, @dikwickley, @Brooooooklyn, @sicarius97, @FourwingsY, @manovotny, @SukkaW, @pepoeverton, @jdeniau, @sumiren, @anthonyshew, @pekarja5, @huozhi, @leerob, @fediev, @atcastle, @shuding, @feugy, @jonohewitt, @zakiego, @Schniz, @timneutkens, @wyattjoh, @MaedahBatool, @X7Becka, @nnnnoel, @dcdev67, @alvinometric, @timothympace, @jeferson-sb, @ijjk, @theMosaad, @Yuddomack, @msquitieri, @andreizanik, @nix6839, @thomasballinger, @ziishaned, @xyeres, @nyedidikeke, @maxproske, @sokra, @titusdmoore, @thebergamo, @fikrikarim, @Kikobeats, @clearlyTHUYDOAN, @nasso, @qutek, @kdy1, @kyliau, @housseindjirdeh, @barissayil, @seveibar, @Jessidhia, @santidalmasso, @JohnDaly, @Nikhilnama18, @mduleone, @colinhacks, @ductnn, @josh, @hiro0218, @eltociear, @kwonoj, @valcosmos, @mihaic195, @stefanprobst, @KATT, @thiagomorales, @danielcavanagh, @steven-tey, @hellomhc, @trevor-fauna, @nguyenyou, @eminvergil, @lobsterkatie, @dorian-davis, @sambecker, @isaac-martin, @lfades, @amorimr, @javivelasco, @mongolyy, @Thisen, @zorrolisto, @ethomson, @padmaia, @thisisjofrank, @dominiksipowicz, @awareness481, @pakaponk, @apledger, @longzheng, @tknickman, @rbrcsk, @emersonlaurentino, @carstenlebek, @edusig, @riccardogiorato, @hanneslund, @ryanhaticus, @j-mendez, @armandabric, @WinmezzZ, @andershagbard, @dammy001, @MarDi66, @okmttdhr, @rishabhpoddar, @marjorg, @dustinsgoodman, @zanechua