Next.js 10.1のリリースを発表します。主な新機能は以下の通りです:
- 3倍高速なリフレッシュ:コード変更なしで200ms高速化
- インストール時間の改善:インストールサイズ58%削減、依存関係56%削減
next/image
の改善:Apple Silicon(M1)サポート、追加レイアウトとローダーオプション- Next.js Commerce Shopify統合:コンポーザブルなeコマースアプリのための柔軟なデータ層
- カスタム500ページ:エラーページにロゴやブランディングを追加
- 厳格なPostCSS設定読み込み:Webpack 5によるキャッシュ改善
tsconfig.json
でのextends
サポート:大規模TypeScriptアプリのための拡張可能な設定- プレビューモード検出:プレビュー閲覧時にコンテンツを条件付き表示
- ルーターメソッドのトップスクロール:すべてのルーティングで一貫した自動トップスクロール
- ドキュメントの改善:段階的採用、移行、Dockerデプロイメント
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はまもなくデフォルトになります。このフラグを有効にした後、フィードバックを共有してください。
module.exports = {
future: {
webpack5: true,
},
};
Webpack 5がどのように後方互換性のある方法でアプリケーションに展開されるかについて詳しくは、ドキュメントをご覧ください。
インストール時間の改善
Next.jsの依存関係グラフを最適化し、インストール時間と依存関係サイズを削減しました。Next.jsプロジェクトの作成がこれまで以上に高速化され、ローカル環境とCI/CDプロセス両方で効率化されます。
10.0 | 10.1 | 差分 | |
---|---|---|---|
平均インストール時間 | ~15秒 | ~5秒 | 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
:背景画像(デモ)
詳細はlayout
ドキュメントをご覧ください。
画像最適化サポートの改善
next/image
の組み込み画像ローダーを拡張し、任意のカスタムローダーを追加できるようになりました。新しいloader
プロップを使用して、任意のプロバイダーやCDNで画像を最適化できます。
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開発者は独自のeコマースストアをクローン、デプロイ、完全カスタマイズできます。nextjs.org/commerceで詳細を確認し、Shopifyデモをお試しください。他のコマースプロバイダーのサポートも近日公開予定です。
カスタム500ページ
カスタムpages/500.js
を作成し、エラー表示時に独自のロゴやブランディングを追加できるようになりました。pages/404.js
と同様、このファイルはビルド時に静的に生成されます。
export default function Custom500() {
return <h1>500 - サーバーサイドエラーが発生しました</h1>;
}
厳格なPostCSS設定読み込み
PostCSSとWebpack 5を使用している場合、新しいfuture
フラグでパフォーマンス(キャッシュ経由)を改善できます。
module.exports = {
future: {
webpack5: true,
strictPostcssConfiguration: true,
},
};
今すぐお試しいただき、フィードバックをお寄せください。詳細はPostCSS設定ドキュメントをご覧ください。
tsconfig.json
でのextends
サポート
Next.jsで使用されるtsconfig.json
でextends
を使用できるようになりました。例えば、プロジェクト内の別のtsconfig.base.json
から次のように拡張できます:
{
"extends": "./tsconfig.base.json"
}
詳細はTypeScriptドキュメントをご覧ください。
プレビューモード検出
プレビューモードが有効なときに検出できるようになり、編集者専用に特定のコンポーネントをレンダリングできます。
import { useRouter } from 'next/router';
function MyComponent() {
const { isPreview } = useRouter();
return <>{isPreview ? <h1>プレビューモード有効</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!