Next.js 向けの Amplify サポート

Amplify は、Next.js を使用して作成されたサーバー側レンダリング (SSR) ウェブアプリケーションのデプロイとホスティングをサポートしています。Next.js は、 SPAsで開発するための React フレームワークです JavaScript。Next.js バージョンで構築されたアプリは、Next.js 15 までデプロイできます。これには、イメージ最適化やミドルウェアなどの機能があります。

デベロッパーは Next.js を使用して、静的サイト生成 (SSG) と を 1 つのプロジェクトSSRに結合できます。SSG ページはビルド時にプリレンダリングされ、SSRページはリクエスト時にプリレンダリングされます。

事前レンダリングを行うと、パフォーマンスと検索エンジンの最適化が向上します。Next.js はサーバー上のすべてのページをプリレンダリングするため、各ページのHTMLコンテンツはクライアントのブラウザに到達すると準備が整います。また、このコンテンツの読み込みも速くなります。ロード時間を短縮することで、ウェブサイトでのエンドユーザーのエクスペリエンスが向上し、サイトのSEOランキングにプラスの影響を与えます。レンダリングは、検索エンジンボットがウェブサイトのHTMLコンテンツを簡単に検索してクロールできるようにSEOすることでも改善されます。

Next.js は、最初のバイトまでの時間 (TTFB) や最初のコンテンツペイント () など、さまざまなパフォーマンスメトリクスを測定するための組み込みの分析サポートを提供しますFCP。Next.js の詳細については、Next.js のウェブサイトの「ご利用開始にあたって」を参照してください。

Next.js 機能のサポート

Amplify Hosting コンピューティングは、Next.js バージョン 12～15 で構築されたアプリケーションのサーバー側のレンダリング (SSR) を完全に管理します。

2022 年 11 月に Amplify Hosting コンピューティングがリリースされる前に Next.js アプリケーションを Amplify にデプロイした場合、アプリケーションは Amplify の以前のSSRプロバイダーである Classic (Next.js 11 のみ) を使用しています。Amplify ホスティングコンピューティングは、Next.js バージョン 11 以前を使用して作成されたアプリをサポートしていません。Next.js 11 アプリケーションを Amplify Hosting コンピューティングマネージドSSRプロバイダーに移行することを強くお勧めします。

次のリストは、Amplify Hosting コンピューティングSSRプロバイダーがサポートする特定の機能について説明しています。

Next.js の画像

画像の最大出力サイズは 4.3 MB を超えることはできません。より大きなイメージファイルをどこかに保存し、Next.js イメージコンポーネントを使用して、サイズを変更して Webp またはAVIF形式に最適化し、より小さなサイズとして提供できます。

Next.js のドキュメントでは、Sharp 画像処理モジュールをインストールして、画像の最適化を本番環境で正しく動作させることを推奨していることに留意してください。ただし、Amplify のデプロイにはこれは必須ではありません。Amplify はお客様に代わって Sharp 画像処理を自動的にデプロイします。