Next.js 12.3 | Next.js

Next.js 12.3では、使い勝手を向上させるいくつかの改善を行いました。

高速リフレッシュの改善: .env、jsconfig.json、およびtsconfig.jsonファイルがホットリロードされるようになりました。
TypeScript自動インストール: .tsファイルを追加すると、TypeScriptが自動的に設定され、依存関係がインストールされます。
画像コンポーネント: next/future/imageが安定版になりました。
SWC Minifier: Next.jsコンパイラによるミニファイが安定版になりました。
新しいルーターとレイアウトのアップデート: 実装が開始され、新しい機能が説明されています。

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

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

Next.js Conf

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

Reactサーバーコンポーネント、ストリーミング、サスペンスを活用した機能。
開発者がアプリケーションの最適化とスケーリングを容易にするための規約。
ローカル開発と本番ビルドを高速化するオープンソースツール。

無料チケットをゲットして、Next.jsとReactの未来をご覧ください。また、@nextjsをフォローして、今後の発表にもご注目ください。また、コミュニティトークも募集しています。トークの提案を送信して、Next.jsで構築しているものについてお話しください。

TypeScript自動インストール

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

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

Next.jsによるTypeScriptの自動インストールを示す動画。

高速リフレッシュの改善

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

Next.js 12.3では、編集時にいくつかの設定ファイルもホットリロードされるようになりました。これには以下が含まれます。

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

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

Next.jsが`.env`ファイルをホットリロードする様子を示す動画。

画像コンポーネント

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

Next.js 12.2では、画像のスタイル設定を簡素化し、ネイティブブラウザの遅延読み込みを使用することでパフォーマンスを向上させる、新しい画像コンポーネントの試験的プレビューを公開しました。

新しい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 codemodを使用して容易に移行できます。次のメジャーバージョンに向けて、詳細情報を提供します。

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

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

remotePatternsを使用すると、ビルトインの画像最適化APIを使用する場合に、リモート画像のワイルドカードを指定できます。これは、ドメイン名に対して完全一致のみを行う既存のimages.domains設定を超えた、より強力なマッチングを可能にします。

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

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        // The `src` property hostname must end with `.example.com`,
        // otherwise the API will respond with 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

画像最適化の無効化（安定版）

画像最適化APIは、要求された画像をオンデマンドで最適化するサーバーを必要とします。これは、next startでセルフホスティングする場合、またはVercelなどのプラットフォームにデプロイする場合に最適です。ただし、これはnext exportでは機能しません。なぜなら、画像を最適化するサーバーが含まれていないからです。以前は、loaderプロップを使用してサードパーティの画像最適化プロバイダーを設定する必要がありましたが、現在はnext.config.jsを使用して、next/imageのすべてのインスタンスに対して画像最適化を完全に無効にできます。

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

next.config.js

module.exports = {
  images: {
    unoptimized: true,
  },
};

SWC Minifier（安定版）

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

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

next.config.js

module.exports = {
  swcMinify: true,
};

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

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

今年初めに、2016年のリリース以来、Next.jsにとって最大のアップデートとなるレイアウトRFCを公開しました。これらの変更には、React Server Componentsの上に構築された新しいルーターが含まれています。実装作業は開始されており、次のメジャーバージョンで公開ベータ版を目指しています。

本日、今後の機能に関する詳細情報を共有します。これには以下が含まれます。

ルートグループ：レイアウトからルートを除外したり、URLパスに影響を与えずにルートを整理するために使用します。
インスタント読み込み状態：Suspenseを使用して構築された、読み込みUIを簡単に追加するための新しいファイル規則。
エラー処理：入れ子になったエラーバウンダリとエラーUIを簡単に追加するための新しいファイル規則。
テンプレート：異なるインスタンスを作成し、状態を共有しない共有UIを追加するための新しいファイル規則。
ルートのインターセプト、並列ルート、および条件付きルート：高度なルーティングパターンを実装できる新しい規則。

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

これらの新機能の詳細については、レイアウト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。