Next.js 10.2変更点の和訳
はじめに
今回の記事は、以下の記事の和訳になります。
社内共有用の記事です。ところどころ意訳しておりますので、ご了承頂けると幸いです。
Next.js 10.2のご紹介
Next.js 10.2の主要な変更点は、以下になります。
-
ビルドを高速化
→ キャッシュを使用した後続のビルドを最大60%高速化 -
更新を高速化
→ 100ミリ秒から200ミリ秒の高速更新 -
起動の高速化
→ 最大24%高速化（next dev）。 -
アクセシビリティの向上
→ ルートの変更がスクリーンリーダーによってアナウンスされるようになりました。 -
柔軟なリダイレクトとリライト
→ 任意のヘッダー、Cookie、またはクエリ文字列にマッチします -
自動Webフォント最適化
→ フォントCSSをインライン化することでパフォーマンスを向上させました
次のコマンドを実行して、Next.jsを更新してください。
npm i next@latest
Webpack 5
Next.js10.1で、Fast Refreshを改善し、インストール時間を短縮しました。今回は、webpack5によるさらなるパフォーマンスの向上についてご紹介します。
本日は、Next.jsアプリケーションへのwebpack 5の導入を拡大します。Next.js 10.2以降、next.config.jsにカスタムのwebpack設定を使用していないすべてのアプリケーションは、自動的にwebpack 5を使用します。
webpack 5が有効になると、以下のような新機能や改善点が自動的に得られます。
-
ディスクキャッシングの改善
→ ディスクキャッシングにより、コンパイラは次回のビルド実行時にも作業を継続することができます。変更されたファイルのみがコンパイルされ、パフォーマンスの向上に繋がります。Vercel社のお客様であるScale氏は、次回のビルドで63%のスピードアップを確認しています。 -
Fast Refrechの改善
→ Next.jsでは、Fast Refresh関連のコンパイルが優先されるようになり、毎回100ミリ秒から200ミリ秒の高速更新が可能になりました。 -
アセットの長期キャッシングの改善
→複数のnext build間の出力が決定論的になり、稼働中のJavaScriptアセットのブラウザキャッシングが改善されました。ページのコンテンツが変更されない場合、ハッシュは同じ値に保たれます。 -
Tree Shakingの改善
→CommonJSモジュールをTree Shakingして、使われていないコードを自動的に削除できるようになりました。*export **はより多くの情報を追跡し、デフォルトの export が使用されているというフラグを立てなくなりました。インナーモジュールのTree Shakingも可能になり、使用されていないエクスポートでのみ使用されるインポートをツリーシェイクできるようになりました。
私たちは、webpack 4から5へのスムーズな移行のために努力してきました。3,400以上の統合テストを含むNext.jsのコアテストスイートは、webpack 5サポートを有効にしたすべてのプルリクエストで実行されます。
アプリケーションがカスタムのwebpack設定をしている場合は、ドキュメントに従ってwebpack 5を有効にすることをお勧めします。Next.jsでwebpack 5にアップグレードした後、何かフィードバックがありましたら、ぜひ私たちに教えてください。
起動時のパフォーマンス向上
Next.js CLIの初期化が改善され、初回実行後のnext devの起動時間が最大で24%短縮されました。例えば、vercel.comの次の開発では、3.3秒から2.5秒になりました。
私たちは、お客様のローカル開発環境をリアルタイムに（20倍速く）することを使命としています。今後のリリースでは、起動時のパフォーマンスがさらに改善される予定ですので、ご期待ください。
アクセシビリティの向上
ルートの変更が、スクリーンリーダーやその他の支援技術にデフォルトでアナウンスされるようになりました。
以下の例では、「Real Data. Real Data.Real Performance」という見出しが、クライアントサイドのナビゲーションでmacOS VoiceOverによってアナウンスされています。ページ名は、最初に<h1>要素を探し、document.titleにフォールバックし、最後にパス名を探しています。
書き換えとリダイレクトにおけるヘッダー、クッキー、クエリのマッチング
Next.jsの書き換え、リダイレクト、ヘッダーに新しいhasプロパティが追加され、受信するヘッダー、クッキー、クエリ文字列とのマッチングが可能になりました。
Vercel社の顧客であるJoyn氏は、hasを利用してコンテンツの発見性とパフォーマンスの両方を最適化しています。例えば、User-Agentに基づいて古いブラウザをリダイレクトすることができます。
module.exports = {
async redirects() {
return [
{
source: '/:path*',
has: [
{
type: 'header',
key: 'User-Agent',
value:
'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)'
}
],
destination: '/old-browser',
permanent: false
}
]
}
}
別の例として、場所に基づいてlocationに基づいてユーザーをリダイレクトする場合があります。
module.exports = {
async redirects() {
return [
{
source: '/:path*',
has: [
{
type: 'header',
key: 'x-vercel-ip-country',
value: 'GB'
}
],
destination: '/:path*/uk',
permanent: true
}
]
}
}
最後に、ユーザーがすでにログインしている場合はリダイレクトできます。
module.exports = {
async redirects() {
return [
{
source: '/:path*',
has: [
{
type: 'header',
key: 'x-authorized',
value: '(?<authorized>yes|true)'
}
],
destination: '/dashboard?authorized=:authorized',
permanent: false
}
]
}
}
自動フォント最適化
デスクトップ向けWebページの82%がWebフォントを使用しています。カスタムフォントは、サイトのブランディング、デザイン、クロスブラウザ/デバイスでの一貫性を保つために重要です。しかし、ウェブフォントを使用することで、パフォーマンスを犠牲にすることはできません。
Next.jsは、ウェブフォントを使用する際の「自動ウェブフォント最適化」に対応しました。デフォルトでは、Next.jsはビルド時にフォントのCSSを自動的にインライン化し、フォント宣言を取得するための余分なラウンドトリップを排除します。これにより、First Contentful Paint（FCP）とLargest Contentful Paint（LCP）が改善されます。例えば、以下のようになります。
// Before
<link
href="https://fonts.googleapis.com/css2?family=Inter"
rel="stylesheet"
/>
// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
@font-face{font-family:'Inter';font-style:normal.....
</style>
自動ウェブフォント最適化は現在、Google Fontsに対応していますが、さらに他のフォントプロバイダーにも対応できるように努力しています。また、ロードストラテジーやフォント表示値のコントロールも追加する予定です。デフォルトでフォントを最適化することで、開発者の皆様が追加の作業をすることなく、より迅速にウェブサイトを提供し、Core Web Vitalsを向上させることができるようになります。
この機能の実装にご協力いただいたGoogleのパートナーとJanicklas Ralph氏に感謝します。
終わりに
ここまで読んでいただきありがとうございました。
皆様のお役に少しでも立てれば幸いです。
お疲れさまでした。
Discussion