Next.js 8.0.4のプロダクションリリースをお知らせします:
これまでと同様、これらの改善はすべて完全な後方互換性を保つように努めました。ほとんどの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設定と競合することはなくなります。
デフォルトのビューポートメタタグ
Next.jsの目標の1つは、Webアプリケーション開発に最適なデフォルトを提供することです。Next.jsでCSSメディアクエリを実装する際に必要な設定を減らす取り組みの一環として、この変更を行いました。
デフォルトでは、ブラウザはCSSの@mediaクエリとズームを期待通りに処理せず、CSSの@mediaクエリを記述する際に予期しない不整合が生じる可能性があります。
ほとんどの場合、Next.jsユーザーはこれらの不整合を解決するためにアプリケーションにviewportメタタグを追加していました。
バージョン8.0.4から、ほとんどの場合このviewportタグは不要になりました。アプリケーションで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/loaderNext.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を使用して再構築され、これまで以上に貢献が容易になりました。learnウェブサイトへの貢献を歓迎します！
このウェブサイトはまた、Next.js 8で導入されたNext.jsサーバーレスターゲットを使用するようにアップグレードされ、世界中のユーザーに対してサイトがスケールし高速であることが保証されています。
コミュニティから多くのフィードバックを受け取り、過去数週間にわたってコンテンツの改善に取り組んできました。Next.js Learnには、理解しやすいように例が更新され、各セクションに詳細が追加されました！
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ディスカッションは、Next.jsについて話し合い、問題解決のアドバイスを得たり、Next.jsの知識を活かして他のコミュニティメンバーを助けることができる場所です。