Next.js 8.0.4
投稿日: 2019年4月2日（火）
投稿者: Connor Davis (@connordav_is)、JJ Kasper (@_ijjk)、Joe Haddad (@timer150)、Luis Alvarez (@luis_fades)、Tim Neutkens (@timneutkens)
主な変更点:
- ビルドパフォーマンスの改善
- 決定論的（Deterministic）ビルド
- クライアントランタイムの縮小
- Serverless 関数の縮小
- デフォルトの viewport メタタグ追加
- Learn（学習ガイド）の改善
常に後方互換性を保つよう努めています。ほとんどの Next.js アプリケーションでは、次のコマンドを実行するだけでアップデートできます。
ターミナル:
npm i next@latest react@latest react-dom@latest
ビルドパフォーマンス
Next.js のビルドはより決定論的になりました。つまり、コードが変更されていない場合は、ビルド出力が毎回同じになるため、ビルドプロセスでのキャッシュが効きやすくなり、最初のビルド以降のリビルドが高速化します。
測定では、ビルド時間の多くが JavaScript の圧縮（minify）に費やされていることがわかりました。ビルド出力がより決定論的になることで、圧縮済みファイルが既にキャッシュに存在する可能性が高まり、結果的に高速化します。Vercel にデプロイしているユーザーはこれらのキャッシュ改善を自動的に体験できます。
サーバー側の next/dynamic マニフェストを、非同期に読み込まれるモジュールのみを含むよう簡素化しました。この簡素化されたマニフェストは計算が速く、生成される JavaScript も少なくなります。
CircleCI を使用しているユーザーはビルド時間の短縮に気づくはずです。以前は CircleCI 環境が利用可能な CPU 数を正確に反映しておらず、ワーカーが過剰にスケジューリングされていました。Next.js は現在 CircleCI を検出すると、利用可能なリソースに基づいて適切な CPU 数を設定します。
ランタイムフットプリントの縮小
Next.js はクライアント側の JavaScript を合計で 5.58KB 減少させ、HTTP ペイロードを小さくしました。
withRouter はもはや hoist-non-react-statics に依存しないため、バンドルサイズが約 3KB 減少しました。withRouter は getInitialProps をホイストしますが、他の静的プロパティはホイストしません。next/babel プリセットは、より軽量で高速な JavaScript を生成するよう最適化されました。X-Powered-By ヘッダーを削除し、HTTP ペイロードを削減しました。コミュニティ調査で多くのプロダクション環境でこのヘッダーが無効化されていることがわかったため、このヘッダーを削除しています。プロジェクトで poweredByHeader オプションを next.config.js に設定している場合は、これを削除して問題ありません。
依存ツリーとコードベースの最適化により、すべての Serverless Function を平均で 44KB（gzip 5.44KB）小さくすることに成功しました。Serverless 関数のサイズは起動性能に直接影響するため、関数が小さいほど起動が速くなります。
| バージョン | Serverless ページサイズ | Serverless ページサイズ (gzip) |
|---|
| 8.0 | 259 KB | 62.3 KB |
| 8.0.4 | 215 KB | 56.8 KB |
| 差分 | 17% 小 | 9% 小 |
next/babel プリセット関連の修正
Next.js 8 のリリース後、一部のユーザーが Next.js の外部（例: テストスイート）で React コンポーネントをインポートする際に問題を報告しました。これは next へのインポートが Next.js コードベース内の正しいファイルへ書き換えられる最適化が、next/babel プリセットの全ユーザーに対して適用されていたことが原因でした。この最適化は Next.js のビルドプロセス自体に移動されたため、ユーザーの Babel 設定と競合することはなくなりました。
デフォルトの viewport メタタグ
Next.js の目標の一つは、ウェブアプリケーションを書く際に最適なデフォルトを提供することです。CSS の @media クエリを実装する際のセットアップを減らすため、ほとんどの場合で追加の viewport メタタグが不要になるようにしました。ブラウザはデフォルトでは期待通りに @media クエリやズームを扱わないことがあり、CSS の一貫性に予期せぬ差異が生じることがあります。そのため、ほとんどの Next.js ユーザーは一貫性を得るためにアプリに viewport メタタグを追加していました。
バージョン 8.0.4 から、アプリケーションが viewport を設定していない場合は次のデフォルトが適用されます:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
必要であれば、next/head を使って上書きできます。例:
import Head from 'next/head';
function HomePage() {
return (
<>
<Head>
<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1" />
</Head>
</>
);
}
export default HomePage;
この変更に協力し実装を行ってくれた Jason Miller に感謝します。
新しい @next/mdx プラグイン
MDX を使うと Markdown ドキュメント内に JSX を書くことができます。通常の Markdown 構文でコンテンツを書きつつ、React コンポーネントをインポートして文書をインタラクティブかつ動的に拡張できます。
Next.js 用の MDX サポートを提供するプラグイン @zeit/next-mdx は Next.js の GitHub リポジトリに移され、現在は @next/mdx として利用可能です。
インストール:
npm i @next/mdx @mdx-js/loader
Next.js アプリで利用可能にするには、next.config.js を作成して次のように含めます:
const withMDX = require('@next/mdx')()
module.exports = withMDX()
今後、より多くの Next.js プラグインが Next.js リポジトリに移され、Next.js コアと一緒にリリースされ、Next.js のテストスイートでテストされる予定です。これにより、Hot Module Replacement、production ビルドなどがプラグインと一緒にうまく動作することを保証できます。
Learn（学習ガイド）の改善
Next.js Learn はクイズやサンプルを備えたステップバイステップのチュートリアルです。サイトは最近 MDX を使って再構築され、コントリビュートがこれまでより簡単になりました。Learn サイトへの貢献を歓迎します！
また、Learn サイトは Next.js 8 で導入された serverless ターゲットを使うようにアップグレードされ、世界中のユーザーに対してスケーラブルで高速なサイトになっています。
コミュニティから多くのコンテンツ改善のフィードバックを受け、過去数週間でそれらに対応してきました。Next.js Learn には更新された例や各セクションの詳細が追加され、手順がより分かりやすくなっています。
貢献と数値
Next.js の採用が継続して拡大していることを嬉しく思います。現在までに 660 を超えるコントリビューターが参加しています。GitHub でのスターは 36,150 回以上、最初のリリース以来 2,950 を超える pull request が提出されています。
このリリースに貢献してくださったすべての方に感謝します。コアへの貢献でも、増え続ける examples ディレクトリの拡充や改善でも、そのすべてを歓迎します。Next.js への貢献を始めたい場合は、good first issue や help wanted ラベルが付いた issue が良い出発点です。
コミュニティ
Next.js コミュニティは 6,000 人を超えるメンバーに成長しました。GitHub Discussions は Next.js について話し合い、問題解決のアドバイスを受けたり、他のメンバーを助けたりする場です。ぜひ GitHub 上でコミュニティに参加してください！