2019年4月2日火曜日
Next.js 8.0.4
投稿者:
本番環境に対応した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は、以前のバージョンよりもクライアントサイドJavaScriptを**5.58KB削減**し、HTTPペイロードを小型化しました。
withRouterは、hoist-non-react-staticsに依存しなくなり、バンドルサイズを**3KB**削減しました。withRouterは引き続きgetInitialPropsを巻き上げますが、他の静的プロパティは巻き上げません。
next/babelプリセットは、より軽量で高速なJavaScriptを生成するように最適化されました。
X-Powered-Byヘッダーが削除され、HTTPペイロードサイズが削減されました。コミュニティに調査を行った結果、このヘッダーは本番環境で無効にされていることが多いため、削除することにしました。これにより、プロジェクトでオプションが有効になっていた場合、poweredByHeaderをnext.config.jsから削除することもできます。
Next.jsの依存関係ツリーと全体のコードベースで多くの最適化を行い、その結果、すべてのサーバーレス関数を**44KB（gzipで5.44KB）小型化**することに成功しました。
サーバーレス関数のサイズは、サーバーレスの起動パフォーマンスに直接影響します。関数が小さいほど、起動が速くなります。
| 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の採用が継続的に拡大していることを大変嬉しく思います。
- **660人**以上の貢献者がいます。
- GitHubでは、プロジェクトは**36,150回**以上スターを獲得しています。
- 最初のリリース以来、**2,950件**を超えるプルリクエストが提出されています。
このNext.jsリリースに貢献してくださった皆様に感謝いたします。コアへの貢献であろうと、常に成長している例のディレクトリの拡張と改善であろうと、すべての貢献に感謝しています。
Next.jsへの貢献を始めたい場合は、good first issueまたはhelp wantedラベルが付いているイシューが始めるのに適した場所です。
コミュニティ
Next.jsコミュニティは、**6,000人**以上のメンバーに成長しました。
GitHubディスカッションは、Next.jsについてチャットしたり、問題解決のアドバイスを得たり、Next.jsの知識を使って他のコミュニティメンバーを助けたりできる場所です。