コンテンツへスキップ
ブログに戻る

2022年9月8日 木曜日

Next.js 12.3

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

Next.js 12.3では、いくつかの品質改善を施しました。

今すぐ 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の実行時に機能します。

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

Fast Refreshの改善

高速なイテレーションは、ローカル開発ワークフローにおいて非常に重要です。Next.jsはFast Refreshを使用して、Reactコンポーネントへの変更を即座にフィードバックします。保存するだけで、ページをリロードすることなくブラウザに変更が反映されます。

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

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

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

Next.jsが.envファイルをホットリロードする様子を示すビデオ。

Imageコンポーネント

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

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

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

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

  • 画像が親要素を埋めるようにするfillレイアウトモードのサポートを追加しました。
  • blur-upプレースホルダーを改善し、透明な画像でも動作するようにし、<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を使用して簡単に移行できるようになります。次期メジャーバージョンに向けて、さらなる詳細情報を提供する予定です。

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

Remote Patterns（安定版）

remotePatternsを使用すると、組み込みのImage Optimization 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',
      },
    ],
  },
};

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

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

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

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

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

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

今年初め、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, and @zanechuaの貢献によって実現しました。