Next.js 8.0.4

プロダクションレディのNext.js 8.0.4をご紹介できることを嬉しく思います。

ビルドパフォーマンスの向上
決定論的なビルド
より小さいクライアントランタイム
より小さいサーバーレス関数
デフォルトのviewportタグ
学習ガイドの改善

いつものように、これらのメリットが**完全に後方互換性がある**ことを保証するよう努めてきました。ほとんどのNext.jsアプリケーションでは、実行するだけで十分です。

npm i next@latest react@latest react-dom@latest

ビルドパフォーマンス

Next.jsのビルドは、コードが変更されない限り、ビルド出力が毎回同じ結果を保持することを意味する、より決定論的になりました。

これにより、ビルドプロセスで実行される作業の多くをキャッシュできるようになり、最初のビルド後の本番コードの再ビルドが高速化されます。

当社の測定によると、ビルド時間の大部分はJavaScriptの最小化に費やされています。ビルド出力がより決定論的になったため、最小化されたファイルがキャッシュに既に存在している可能性が高くなっています。

Vercelにデプロイするユーザーは、これらのキャッシュ改善を自動的に体験できます。

非同期でロードされるモジュールのみを含むように、サーバーサイドのnext/dynamicマニフェストを簡素化しました。この簡素化されたマニフェストは、計算が速く、JavaScriptの生成量が少なくなります。

CircleCIユーザーは、ビルド時間の短縮に気づくはずです。以前は、CircleCI環境が利用可能なCPUの量を正確に反映していなかったため、ワーカーが過剰にスケジューリングされていました。Next.jsは現在CircleCIを検出し、利用可能なリソースに基づいて適切なCPU数を設定します。

より小さいランタイムフットプリント

Next.jsは、以前のバージョンよりも**5.58KB少ない**クライアントサイドJavaScriptを生成し、HTTPペイロードが小さくなりました。

withRouterはhoist-non-react-staticsに依存しなくなり、バンドルサイズが**3KB**削減されました。withRouterは引き続きgetInitialPropsをホイストしますが、その他の静的プロパティはホイストしません。

next/babelプリセットは、より**スリム**で**高速**なJavaScriptを生成するように最適化されました。

X-Powered-Byヘッダーが削除され、HTTPペイロードサイズが削減されました。コミュニティへの調査の結果、このヘッダーは本番環境では無効にされていることが多いため、削除を決定しました。これにより、プロジェクトでオプションが有効になっていた場合は、next.config.jsからpoweredByHeaderを削除できることも意味します。

Next.jsの依存関係ツリーとコードベース全体に多くの最適化を施した結果、すべてのServerless Functionを**44KB（gzipで5.44KB）小さく**することができました。

Serverless Functionのサイズは、Serverlessの起動パフォーマンスに直接影響します。関数が小さいほど、起動は速くなります。

	8.0	8.0.4	差分
Serverlessページサイズ	259 KB	215 KB	17%小さい
Serverlessページサイズ（gzip）	62.3 KB	56.8 KB	9%小さい

Next.js 8のリリース後、一部のユーザーから、テストスイートなど、Next.js以外でReactコンポーネントをインポートする際に問題が発生したという報告がありました。これは、nextへのインポートがNext.jsコードベース内の正しいファイルに書き換えられたことが原因でしたが、この最適化はnext/babelプリセットのすべてのユーザーに適用されていました。この最適化はNext.jsのビルドプロセス自体に移動されたため、ユーザーのbabel設定と競合しなくなりました。

デフォルトのViewportメタタグ

Next.jsの目標の1つは、Webアプリケーション作成のための最良のデフォルトを提供することです。Next.jsでCSSメディアクエリを実装する際の設定量を減らすための取り組みです。

デフォルトでは、ブラウザはCSSの@mediaクエリとズームを期待どおりに処理しないため、CSS@mediaクエリを作成する際に予期しない不整合が生じる可能性があります。

ほとんどの場合、Next.jsユーザーはこれらの不整合を解決するために、アプリケーションにviewportメタタグを追加していました。

バージョン8.0.4以降、ほとんどの場合、このviewportタグは不要になりました。アプリケーションによってviewportが設定されていない場合、デフォルトのviewportが適用されます。

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

next/headを使用すると、viewportタグを上書きすることもできます。

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テストスイートでテストされるようになります。これにより、ホットモジュールリプレイスメント、本番ビルド、その他の機能がプラグインと連携してうまく機能することを確認できます。