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

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は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.010.1差分
平均インストール時間約15秒約5秒3.0倍高速
インストールサイズ96.5MB39.9MB58%削減
依存関係の数を42418756%削減

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

next/image の改善

Apple Silicon サポート

Next.js 10のリリース時、Image Optimizationはネイティブ依存関係によってサポートされていました。これによりインストール時間が長くなり、ネイティブ依存関係が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>;
}

Strict PostCSS設定の読み込み

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

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

今日から試してみて、フィードバックをお聞かせください。詳細については、PostCSS Config ドキュメントをご覧ください。

tsconfig.jsonでのextendsのサポート

Next.jsで使用されるtsconfig.jsonで、プロジェクト内の別の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 の貢献によるものです！