Next.js 10.1

claudejamodel: claude-sonnet-4-20250514

Next.js 10.1

2021年3月29日（月）投稿者：Belén Curcio、JJ Kasper、Joe Haddad、Lee Robinson、Luis Alvarez、Shu Ding、Steven、Tim Neutkens

Next.js 10.1をご紹介できることを嬉しく思います。以下の機能を搭載しています：

3倍高速なRefresh：変更不要で200ms高速化
インストール時間の改善：インストールサイズが58%削減、依存関係が56%削減
next/imageの改善：Apple Silicon（M1）サポート、レイアウトとローダーオプションの追加
Next.js Commerce Shopify統合：構成可能なeコマースアプリ用の柔軟なデータレイヤー
カスタム500ページ：エラーページに独自のロゴとブランディングを追加
厳密なPostCSS設定読み込み：Webpack 5によるキャッシュの改善
tsconfig.jsonでのextendsサポート：大規模TypeScriptアプリ用の拡張可能な設定
プレビューモード有効時の検出：プレビュー表示時の条件付きコンテンツ表示
ルーターメソッドのトップスクロール：すべてのルーティングで一貫した自動トップスクロール
ドキュメントの改善：段階的導入、移行、Docker デプロイメント

3倍高速なRefresh

v9.4以降、Next.jsはFacebookのFast Refreshをオープンソースに導入し、Reactコンポーネントの編集に対する瞬時のフィードバックを実現しました。これにより、Next.jsは編集したファイルのコードのみを更新し、コンポーネントの状態を失うことなく、そのコンポーネントのみを再レンダリングします。これには、スタイル（インライン、CSS-in-JS、CSS/Sassモジュール）、マークアップ、イベントハンドラー、エフェクト（useEffect経由）が含まれます。

今回、コード変更なしで編集のたびに200ms高速化しました。平均して、Fast Refreshが3倍高速になります。

さらに高速なパフォーマンスとより良いビルド時間をお求めですか？新しいfutureフラグで今すぐWebpack 5をオプトインしてください。このフラグはリリース候補（RC）で、Webpack 5は間もなくデフォルトになります。このフラグを有効にした後は、フィードバックをお聞かせください。

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

Webpack 5が後方互換性を保ちながらアプリケーションにどのように展開されるかについて詳しくは、ドキュメントをご確認ください。

インストール時間の改善

Next.jsの依存関係グラフを最適化し、インストール時間と依存関係サイズを削減しました。Next.jsプロジェクトの作成が、ローカルでもCI/CDプロセスでも、これまで以上に高速になりました。

	10.0	10.1	差分
平均インストール時間	~15s	~5s	3.0倍高速
インストールサイズ	96.5MB	39.9MB	58%削減
依存関係数	424	187	56%削減

依存関係の最適化目標の一環として、作者によって非推奨とマークされたnpmパッケージを更新・置換しました。これは依存関係ツリーの深い部分にあるものも含みます。Next.js 10.1の新規インストールでは、パッケージ警告が表示されなくなります。

next/imageの改善

Apple Siliconサポート

Next.js 10がリリースされた時、画像最適化はネイティブ依存関係によって動作していました。これによりインストール時間が遅くなり、ネイティブ依存関係がNext.jsの総インストールサイズの50%を占めていました。さらに、インストール後のスクリプト実行とオンデマンドコンパイレーションが発生していました。

next/imageによる自動画像最適化がWebAssemblyで動作するようになりました。この最適化はnext devとnext startを使用して、そのまま動作します。WASMを使用することで、インストールサイズを約30MB削減し、Apple Silicon M1 MacBookのサポートを追加しました。

SIMD拡張とマルチスレッドを活用して、WebAssemblyのパフォーマンスを継続的に改善しています。

追加レイアウト

フィードバックに基づき、next/image用の様々な新しいレイアウトとオプションを追加しました：

layout=fill：widthとheightを提供する必要がありません（デモ）
layout=fixed：ネイティブimg動作（デモ）
layout=responsive：固定アスペクト比での柔軟な幅（デモ）
layout=intrinsic：固定アスペクト比で拡大せず、縮小可能（デモ）
objectFit=cover：背景画像（デモ）

詳細については、レイアウトドキュメントをご確認ください。

画像最適化サポートの改善

カスタムローダーを追加する機能により、next/image用の組み込み画像ローダーを拡張しました。新しいloaderプロパティを使用することで、任意のプロバイダーやCDNで画像を最適化できます。

// components/my-image.js
import Image from 'next/image';

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

詳細については、next/imageドキュメントをご確認ください。

Next.js Commerce Shopify統合

Eコマースは、Next.jsを採用する最も急成長している業界の一つです。Apple、Wal-Mart、McDonald's、Nikeなどの企業がNext.jsを信頼しています。Eコマースアプリケーション構築のための高性能な出発点を提供するため、Next.js Commerceをリリースしました。

Shopifyに対する数千のリクエストを受けて、Next.js Commerceをプロバイダー非依存のUIで更新し、お好みのヘッドレスEコマースソリューションを導入できるようにしました。プロバイダー間の切り替えは、設定の1行変更で可能です。

また、Features APIを作成し、使用ケースに基づいて機能を切り替えることができます。すべて最高クラスのパフォーマンスを維持しながら実現しています。

数回のクリックで、Next.js開発者は独自のEコマースストアをクローン、デプロイ、完全カスタマイズできます。詳細はnextjs.org/commerceで、Shopifyデモをお試しください。

より多くのコマースプロバイダーのサポートが近日公開予定です。

カスタム500ページ

エラー表示時に独自のロゴとブランディングを追加するため、カスタムpages/500.jsを作成できるようになりました。pages/404.jsと同様に、このファイルはビルド時に静的生成されます。

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

厳密なPostCSS設定読み込み

PostCSSとWebpack 5を使用している場合、新しいfutureフラグでパフォーマンス（キャッシュ経由）を改善できます。

// next.config.js
module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

今すぐお試しいただき、フィードバックをお聞かせください。詳細については、PostCSS設定ドキュメントをご確認ください。

tsconfig.jsonでのextendsサポート

Next.jsで使用されるtsconfig.jsonでextendsを使用して、プロジェクト内の別のtsconfig.jsonから拡張できるようになりました。例えば、プロジェクト内のtsconfig.base.jsonから以下のように拡張できます：

// tsconfig.json
{
  "extends": "./tsconfig.base.json"
}

詳細については、TypeScriptドキュメントをご確認ください。

プレビューモード有効時の検出

プレビューモードが有効な時を検出できるようになり、エディター専用の特定のコンポーネントをレンダリングできます。

// components/MyComponent.js
import { useRouter } from 'next/router';

function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Preview Mode Enabled</h1> : null}</>;
}

詳細については、プレビューモードドキュメントをご確認ください。

ルーターメソッドのトップスクロール

next/linkを使用したナビゲーション時、Next.jsは自動的にトップにスクロールします。Next.js 10.1では、router.pushとrouter.replaceもnext/linkの動作に合わせて自動的にトップにスクロールします。

scrollオプションを使用して自動スクロールをオプトアウトできます。詳細については、next/routerドキュメントをご確認ください。

ドキュメントの改善

以下を含む様々な新しいガイド、リソース、ドキュメントも追加しました：

コミュニティ

Next.jsの採用が継続的に成長していることを嬉しく思います：

1,540人以上の独立した貢献者がおり、10.0リリース以降240人以上の新しい貢献者が参加
GitHubでプロジェクトが64,950回以上スターされています

GitHub DiscussionsでNext.jsコミュニティにご参加ください。Discussionsは、他のNext.jsユーザーとつながり、自由に質問したり作品を共有したりできるコミュニティスペースです。公式Next.js Discordにもご参加いただけます。

クレジット

このリリースの形成に貢献した外部フィードバックと貢献を含む、コミュニティに感謝いたします。このリリースは以下の方々の貢献によって実現されました：

@shuding、@edazpotato、@laithyounes、@ijjk、@harshitsan、@selrond、@sromexs、@melono6、@timneutkens、@madou、@mottox2、@leerob、@divmain、@nblthree、@KennethKinLum、@KarthikeyanRanasthala、@alex-safian、@rishabhpoddar、@daviavmello、@jpalmieri、@merceyz、@Segolene-Alquier、@michrome、@janicklas-ralph、@Parnswir、@giraffesyo、@balazsorban44、@Cicada95、@vzaidman、@deniseyu、@eltociear、@unimprobable、@getspooky、@Timer、@armand1m、@alexknipfer、@elitan、@atcastle、@noahfschr、@amille44420、@laanayam333、@spidgorny、@devuxer、@Janpot、@nickbabcock、@rsipakov、@NkxxkN、@dominicfraser、@alevosia、@Kerumen、@CMeeg、@Pomaio、@tim-hanssen、@lachlanjc、@lebreRafael、@AryanBeezadhur、@guybedford、@petecorreia、@kaznak、@sam3d、@fwuensche、@rafaellaurindo、@sphilee、@styxlab、@rexxars、@smitbarmase、@maerzhase、@matamatanot、@lucleray、@jeremybalog、@tarunama、@zainfathoni、@destumme、@VictorAssis、@bhbs、@ciruz、@simnalamburt、@Almad、@frol、@ludofischer、@elliottsj、@Baheya、@Lalit2005、@vldmrkl、@AriFreyr、@kaykdm、@Sharcoux、@ramasilveyra、@devknoll、@botv、@pkellner、@sumanthratna、@sokra、@lfades、@thorwebdev、@berndartmueller、@davidspiessens、@ShashiSrinath、@elsigh、@MMT-LD、@hankandre、@maxnowack、@kmjennison、@darshkpatel、@mohsen1、@DylanRJohnston、@calmonr、@imrobinized、@justintemps、@ncarchedi、@btk、@faizanv、@chulkilee、@ryan-lustre、@dfelber、@Ymirke、@Robogeek95、@mcha-dev、@youngvform、@andrehsu、@Simply007、@rokobekavac0、@ja0n、@mattruby、@xom9ikk、@niko20、@LauraBeatris、@armspkt、@xiaooye、@sungpro、@awareness481、@joebernard、@jensmeindertsma、@donavon、@DaneTheory、@Zertz、@danielyefet、@lfender6445、@tajo、@jorrit、@tvler、@mustafaKamal-fe、@prateekbh、@gregrickaby、@enochndika、@zimv、@lharries、@JstnEdr、@zbialecki、@fredmontet、@leo、@kachkaev、@mongolyy、@justinphilpott、@mjr、@fireairforce、@jvarho、@gr-qft、@thomaswang、@c316、@benbender、@michael、@damusnet、@farhankk360、@smaktacular、@webda2l、@chibicode、@bar7b、@SiTaggart、@lolobosse、@jamesgeorge007、@nikosantis、@mikan3rd、@oshdev、@UnbearableBear、@tunesmith、@jamsinclair、@ivandotv、@Arthie、@louison、@FutureKode、@wesleytian、@dennismorello、@vispaduchuri、@styfle、@caulagi、@berekuk、@jescalan、@cascandaliato、@coetry、@PepijnSenders、@dkempner、@dlackty、@aralroca、@felixmeziere、@bmvantunes、@hideokamoto、@bram-l、@craigdanj、@ErikAugust、@joiglifberg、@blvdmitry、@bragle、@ykdojo、@vitorhsb、@TrySound、@mattfwood、@ka2jun8、@rfinkley、@bannier、@karlhorky、@shihabus、@yakovlevyuri、@dav-is、@lundgren2、@NoobTW、@Cow258、@toshi1127、@jorisw、@rifaidev、@willianjusten、@willheslam、@alexvilchis、@vitordino、@matthewlilley、@Prottoy2938、@brunocrosier、@OriginalEXE、@sidthesloth92、@davidsonsns、@saitolume、@tolfino、@iczero、@WestonThayer、@galanggg、@davidgolden、@weichienhung、@ashconnell、@callumbooth、@lyderichti59、@lukyth、@FredyC、@danielstocks、@valse、@MrJmpl3、@Sm1t、@lucas-varela、@jose-donato、@chr-ge、@pocorschi、@jflayhart、@aried3r、@LittleboyHarry、@Akumzy、@xeust、@tonyspiro、@yordis、@AmrSaber、@Mzaien、@PaulPCIO、@quinnturner、@SebastianTroc、@JipSterk、@developit、@yokinist、@queq1890、@oriverk、@ospira、@danielivert、@huv1k、@minhtule、@shunkakinoki、@khades、@eric-burel、@turadg、@huozhi、@scottmacdonnell

要約

Summary

Key Points

翻訳

Next.js 10.1

3倍高速なRefresh

インストール時間の改善

next/imageの改善

Apple Siliconサポート

追加レイアウト

画像最適化サポートの改善

Next.js Commerce Shopify統合

カスタム500ページ

厳密なPostCSS設定読み込み

tsconfig.jsonでのextendsサポート

プレビューモード有効時の検出

ルーターメソッドのトップスクロール

ドキュメントの改善

コミュニティ

クレジット