Next.js 8.0.4
投稿者: Connor Davis @ connordav_is, JJ Kasper @ _ijjk, Joe Haddad @ timer150, Luis Alvarez @ luis_fades, Tim Neutkens @ timneutkens
プロダクション対応の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の依存関係ツリーと全体的なコードベースで多くの最適化を行い、すべてのサーバーレス関数を44KB（5.44KB gzip）小さくすることができました。サーバーレス関数のサイズは、サーバーレスの起動パフォーマンスに直接影響します。関数が小さいほど起動が高速になります。
| 8.0 | 8.0.4 | 差分 |
|---|
| サーバーレスページサイズ | 259 KB | 215 KB | 17%小さく |
| サーバーレスページサイズ（gzip） | 62.3 KB | 56.8 KB | 9%小さく |
Next.js 8のリリース後、少数のユーザーからNext.js外部（例：テストスイート）でReactコンポーネントをインポートする際に問題が発生したという報告を受けました。これは、nextへのインポートがNext.jsコードベース内の正しいファイルに書き換えられることが原因でしたが、この最適化はnext/babelプリセットのすべてのユーザーに適用されていました。この最適化はNext.jsビルドプロセス自体に移動されたため、ユーザーのbabel設定と競合することはなくなりました。
デフォルトのViewport Metaタグ
Next.jsの目標の一つは、Webアプリケーションを書くための最良のデフォルトを提供することです。Next.jsでCSSメディアクエリを実装する際に必要な設定量を減らすための取り組みです。
デフォルトでは、ブラウザはCSS @mediaクエリとズームを期待通りに処理しないため、CSS @mediaクエリを書く際に予期しない不整合が生じる可能性があります。
ほぼすべてのケースで、Next.jsユーザーはこれらの不整合を解決するためにアプリケーションにviewport metaタグを追加していました。
バージョン8.0.4以降、このviewportタグはほとんどの場合不要になりました。アプリケーションでviewportが設定されていない場合、デフォルトのviewportが適用されます：
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
viewportタグはnext/headを使用して上書きすることもできます：
pages/index.js
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テストスイートでテストされるようになります。これにより、ホットモジュール置換、プロダクションビルド、その他の機能がプラグインとうまく連携することを保証できます。
学習ガイドの改善
Next.js Learnは、クイズと例を含むNext.jsを学ぶためのステップバイステップガイドです。ウェブサイトは最近MDXを使用して再構築され、これまで以上に貢献しやすくなりました。
誰でも学習ウェブサイトに貢献することを歓迎します！
ウェブサイトは、Next.js 8で導入されたNext.jsサーバーレスターゲットを使用するようにアップグレードされ、ウェブサイトがスケールし、世界中のユーザーにとって高速であることを保証しています。
コンテンツの改善に関してコミュニティから多くのフィードバックを受け、過去数週間にわたってそれに対応してきました。Next.js Learnには、更新された例と各セクションの詳細が追加され、指示をより理解しやすくしました！
コントリビューション
Next.jsの採用が継続的に成長していることを非常に嬉しく思います。660人以上のコントリビューターがいます。GitHubでは、プロジェクトが36,150回以上スターされています。最初のリリース以降、2,950以上のプルリクエストが提出されています。
このNext.jsリリースに貢献してくださったすべての方に感謝したいと思います。コアへの貢献であれ、成長し続けるexamplesディレクトリの拡張と改善であれ、すべての貢献に感謝しています。
Next.jsへの貢献を始めたい場合は、「good first issue」または「help wanted」ラベルの付いたissueが良い出発点です。
コミュニティ
Next.jsコミュニティは6,000人以上のメンバーに成長しました。GitHub discussionsは、Next.jsについてチャットし、問題の解決方法についてアドバイスを得て、Next.jsの知識で他のコミュニティメンバーを助けることができる場所です。
GitHubでコミュニティに参加しましょう！