Backブログに戻る

Next.js 10.1

Next.js 10.1では、3倍高速なリフレッシュ、58%小さくなったインストールサイズ、56%削減された依存関係、WebAssemblyによる画像最適化、next/imageのサポート強化などが導入されました!

Next.js 10.1のリリースを発表します。主な新機能は以下の通りです:

3倍高速なリフレッシュ

v9.4以降、Next.jsはFacebookの高速リフレッシュ(Fast Refresh)をオープンソース化し、Reactコンポーネントの編集に対する即時フィードバックを実現しました。

これはNext.jsが編集したファイルのコードのみを更新し、コンポーネントの状態を失うことなくそのコンポーネントのみを再レンダリングすることを意味します。これにはスタイル(インライン、CSS-in-JS、CSS/Sassモジュール)、マークアップ、イベントハンドラ、エフェクト(useEffect経由)が含まれます。

今回、コード変更なしで編集ごとに200ms高速化しました。平均して、高速リフレッシュは3倍速くなります。

さらに高速なパフォーマンスとビルド時間を希望ですか?新しいfutureフラグでWebpack 5を今すぐ試せます。このフラグはリリース候補(RC)であり、Webpack 5はまもなくデフォルトになります。このフラグを有効にした後、フィードバックを共有してください

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

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

インストール時間の改善

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

10.010.1差分
平均インストール時間~15秒~5秒3.0倍高速
インストールサイズ96.5MB39.9MB58%削減
依存関係数42418756%削減

依存関係最適化の一環として、作者によって非推奨とマークされたnpmパッケージを更新または置換しました。Next.js 10.1の新規インストールでは、パッケージ警告が発生しません。

next/imageの改善

Apple Siliconサポート

Next.js 10リリース時、画像最適化はネイティブ依存関係によって実現されていました。これによりインストール時間が遅くなり、ネイティブ依存関係がNext.jsの総インストールサイズの50%を占めていました。

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

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

追加レイアウト

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

  • layout=fillwidthheightの指定不要(デモ
  • layout=fixed:ネイティブimgの動作(デモ
  • layout=responsive:可変幅で固定アスペクト比(デモ
  • layout=intrinsic:拡大しないが縮小可能な固定アスペクト比(デモ
  • objectFit=cover:背景画像(デモ

詳細はlayoutドキュメントをご覧ください。

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

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="著者の写真"
      width={500}
      height={500}
    />
  );
};

詳細はnext/imageドキュメントをご覧ください。

Next.js Commerce Shopify統合

eコマースはNext.jsを採用する成長最速の業界の1つです。Apple、Wal-Mart、McDonald's、Nikeなどの企業がNext.jsを信頼しています。

高性能なeコマースアプリケーション構築の出発点を提供するため、Next.js Commerceをリリースしました。Shopifyに関する数千のリクエストを受け、Next.js Commerceをプロバイダーに依存しないUIで更新しました。これにより、任意のヘッドレスeコマースソリューションを選択できます。

プロバイダー間の切り替えは設定の1行変更で可能です。また、ユースケースに基づいて機能を切り替えられるFeatures APIを作成し、最高クラスのパフォーマンスを維持しています。

Next.js CommerceのグローバルなLighthouseメトリクス

Next.js CommerceのグローバルなLighthouseメトリクス

数回のクリックで、Next.js開発者は独自のeコマースストアをクローン、デプロイ、完全カスタマイズできます。nextjs.org/commerceで詳細を確認し、Shopifyデモをお試しください。他のコマースプロバイダーのサポートも近日公開予定です。

カスタム500ページ

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

pages/500.js
export default function Custom500() {
  return <h1>500 - サーバーサイドエラーが発生しました</h1>;
}

厳格なPostCSS設定読み込み

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

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

今すぐお試しいただき、フィードバックをお寄せください。詳細はPostCSS設定ドキュメントをご覧ください。

tsconfig.jsonでのextendsサポート

Next.jsで使用されるtsconfig.jsonextendsを使用できるようになりました。例えば、プロジェクト内の別の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>プレビューモード有効</h1> : null}</>;
}

詳細はプレビューモードドキュメントをご覧ください。

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

next/linkを使用したナビゲーション時、Next.jsは自動的にトップにスクロールします。Next.js 10.1ではrouter.pushrouter.replacenext/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!