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

2021年3月29日（月）

Next.js 10.1

投稿者
Belén Curcio
Belén Curcio@okbel
JJ Kasper
JJ Kasper@_ijjk
Joe Haddad
Joe Haddad@timer150
Lee Robinson
Lee Robinson@leeerob
Luis Alvarez
Luis Alvarez@luis_fades
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens

Next.js 10.1を発表できることを嬉しく思います。主な機能は以下のとおりです。

3倍高速なリフレッシュ

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の依存関係グラフを最適化しました。ローカルでもCI / CDプロセスでも、これまでになく高速にNext.jsプロジェクトを作成できます。

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 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: 背景画像。( デモ)

詳細については、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="Picture of the author"
      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 行の変更 で行えます。また、機能 API を作成して、ユースケースに基づいて機能を切り替えることができるようにしました。すべて、クラス最高のパフォーマンスを維持しながら実現します。

Lighthouse metrics for Next.js Commerce around the globe.
世界中の 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 - 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, and @scottmacdonnellの皆様のご協力によるものです。