Next.js 10.1
2021年3月29日（月）投稿者：Belén Curcio、JJ Kasper、Joe Haddad、Lee Robinson、Luis Alvarez、Shu Ding、Steven、Tim Neutkens
Next.js 10.1をご紹介できることを嬉しく思います。以下の機能を搭載しています：
- 3倍高速なRefresh：変更不要で200ms高速化
- インストール時間の改善：インストールサイズが58%削減、依存関係が56%削減
- next/imageの改善：Apple Silicon（M1）サポート、レイアウトとローダーオプションの追加
- Next.js Commerce Shopify統合：構成可能なeコマースアプリ用の柔軟なデータレイヤー
- カスタム500ページ：エラーページに独自のロゴとブランディングを追加
- 厳密なPostCSS設定読み込み：Webpack 5によるキャッシュの改善
- tsconfig.jsonでのextendsサポート：大規模TypeScriptアプリ用の拡張可能な設定
- プレビューモード有効時の検出：プレビュー表示時の条件付きコンテンツ表示
- ルーターメソッドのトップスクロール：すべてのルーティングで一貫した自動トップスクロール
- ドキュメントの改善：段階的導入、移行、Docker デプロイメント
3倍高速なRefresh
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は間もなくデフォルトになります。このフラグを有効にした後は、フィードバックをお聞かせください。
module.exports = {
future: {
webpack5: true,
},
};
Webpack 5が後方互換性を保ちながらアプリケーションにどのように展開されるかについて詳しくは、ドキュメントをご確認ください。
インストール時間の改善
Next.jsの依存関係グラフを最適化し、インストール時間と依存関係サイズを削減しました。Next.jsプロジェクトの作成が、ローカルでもCI/CDプロセスでも、これまで以上に高速になりました。
| 10.0 | 10.1 | 差分 |
|---|
| 平均インストール時間 | ~15s | ~5s | 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：背景画像（デモ）
詳細については、レイアウトドキュメントをご確認ください。
画像最適化サポートの改善
カスタムローダーを追加する機能により、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="Picture of the author"
width={500}
height={500}
/>
);
};
詳細については、next/imageドキュメントをご確認ください。
Next.js Commerce Shopify統合
Eコマースは、Next.jsを採用する最も急成長している業界の一つです。Apple、Wal-Mart、McDonald's、Nikeなどの企業がNext.jsを信頼しています。Eコマースアプリケーション構築のための高性能な出発点を提供するため、Next.js Commerceをリリースしました。
Shopifyに対する数千のリクエストを受けて、Next.js Commerceをプロバイダー非依存のUIで更新し、お好みのヘッドレスEコマースソリューションを導入できるようにしました。プロバイダー間の切り替えは、設定の1行変更で可能です。
また、Features APIを作成し、使用ケースに基づいて機能を切り替えることができます。すべて最高クラスのパフォーマンスを維持しながら実現しています。
数回のクリックで、Next.js開発者は独自のEコマースストアをクローン、デプロイ、完全カスタマイズできます。詳細はnextjs.org/commerceで、Shopifyデモをお試しください。
より多くのコマースプロバイダーのサポートが近日公開予定です。
カスタム500ページ
エラー表示時に独自のロゴとブランディングを追加するため、カスタムpages/500.jsを作成できるようになりました。pages/404.jsと同様に、このファイルはビルド時に静的生成されます。
export default function Custom500() {
return <h1>500 - Server-side error occurred</h1>;
}
厳密なPostCSS設定読み込み
PostCSSとWebpack 5を使用している場合、新しいfutureフラグでパフォーマンス（キャッシュ経由）を改善できます。
module.exports = {
future: {
webpack5: true,
strictPostcssConfiguration: true,
},
};
今すぐお試しいただき、フィードバックをお聞かせください。詳細については、PostCSS設定ドキュメントをご確認ください。
tsconfig.jsonでのextendsサポート
Next.jsで使用されるtsconfig.jsonでextendsを使用して、プロジェクト内の別のtsconfig.jsonから拡張できるようになりました。例えば、プロジェクト内のtsconfig.base.jsonから以下のように拡張できます：
{
"extends": "./tsconfig.base.json"
}
詳細については、TypeScriptドキュメントをご確認ください。
プレビューモード有効時の検出
プレビューモードが有効な時を検出できるようになり、エディター専用の特定のコンポーネントをレンダリングできます。
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