Next.js の Amplify サポート

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

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

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

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

Next.js 機能のサポート

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

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

サポートされている機能

• サーバー側でレンダリングされたページ (SSR）

• 静的ページ

• API ルート

• ダイナミックルート

• 全ルートをキャッチ

• SSG (静的生成）

• 増分静的再生 (ISR）

• 国際化 (i18n) サブパスルーティング

• 国際化 (i18n) ドメインルーティング

• 国際化 (i18n) 自動ロケール検出

• ミドルウェア

• 環境変数

• イメージの最適化

• Next.js 13 のアプリケーションディレクトリ

サポートされていない 機能

• エッジAPIルート (エッジミドルウェアはサポートされていません）

• オンデマンドインクリメンタル静的再生 (ISR）

• Next.js ストリーミング

• 静的アセットと最適化されたイメージでミドルウェアを実行する

Next.js の画像

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

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