Next.js 12.3 | Next.js 日本語

Next.js 12.3で以下のような開発体験の改善をリリースしました:

Fast Refreshの改善: .env、jsconfig.json、tsconfig.jsonファイルがホットリロードされるようになりました
TypeScript自動インストール: .tsファイルを追加すると、TypeScriptの設定と依存関係のインストールが自動で行われます
Imageコンポーネント: next/future/imageが安定版になりました
SWCミニファイヤー: Next.jsコンパイラによるミニフィケーションが安定版になりました
新しいルーターとレイアウトの更新: 実装が開始され、新機能が説明されました

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

10月25日に第3回グローバルNext.jsカンファレンスを開催します。今すぐ登録 →

Next.js Conf

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

React Server Components、ストリーミング、Suspenseを活用した新機能
アプリケーションの最適化とスケーリングを容易にする規約
ローカル開発とプロダクションビルドを高速化するオープンソースツール

無料チケットを取得してNext.jsとReactの未来をご覧ください。最新情報は@nextjsをフォローしてください。また、コミュニティトークも募集しています。トーク提案を投稿して、Next.jsで構築しているものについてのストーリーを共有してください。

TypeScript自動インストール

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

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

Next.jsがTypeScriptを自動インストールする様子を示す動画。

Fast Refreshの改善

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

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

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

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

.envファイルをホットリロードするNext.jsの動画。

Imageコンポーネント

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

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

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

前回のリリース以降、さらに以下の改善を行いました:

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

将来的には、next/imageをnext/legacy/imageに、next/future/imageをnext/imageに改名する予定です。これにより、新しいNext.jsプロジェクトでは優れた体験が提供され、既存プロジェクトではnext/imageコードモッドを使用して簡単に移行できるようになります。次のメジャーバージョンに向けて詳細を提供していきます。

現在の使用方法については、移行ガイドを含むドキュメントを参照してください。

リモートパターン（安定版）

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

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

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        // `src`プロパティのホスト名は`.example.com`で終わる必要があります
        // そうでない場合、APIは400 Bad Requestで応答します
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

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ミニファイヤー（安定版）

Next.js 12では、Next.jsコンパイラの実験的機能の一部としてSWCを使用したコードミニフィケーションを導入しました。初期の結果では、SWCによるミニフィケーションはTerserを使用した以前のバージョンよりも7倍高速であることが示されました。

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

next.config.js

module.exports = {
  swcMinify: true,
};

次のメジャーバージョンではSWCミニファイヤーをデフォルトにする予定です。

新しいルーターとレイアウトの更新

今年初め、Layouts RFCを公開し、2016年のリリース以来Next.js最大の更新を紹介しました。これらの変更には、React Server Components上に構築された新しいルーターが含まれます。実装作業が開始され、次のメジャーバージョンで公開ベータを目指しています。

今日は、以下のような今後の機能についてさらに情報を共有します:

ルートグループ: レイアウトからルートを除外したり、URLパスに影響を与えずにルートを整理するために使用
インスタントローディング状態: Suspenseで構築されたローディングUIを簡単に追加する新しいファイル規約
エラーハンドリング: ネストされたエラーバウンダリとエラーUIを簡単に追加する新しいファイル規約
テンプレート: 異なるインスタンスを作成し状態を共有しない共有UIを追加する新しいファイル規約
インターセプティングルート、パラレルルート、条件付きルート: 高度なルーティングパターンを実装できる新しい規約

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

これらの新機能について詳しくはLayouts RFCをご覧ください。

その他の改善

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

コミュニティ

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