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

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@leerob
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はReactコンポーネントへの編集に即座にフィードバックを得るため、FacebookのFast Refreshをオープンソース化しました。

これにより、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行の変更で行えます。また、Features 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!