Next.js アプリの作成とデプロイに関するガイド

Next.js アプリケーションの開発は初期フェーズにすぎません。その後の重要なステップがデプロイです。このプロセスにより、インターネット上のユーザーがアプリケーションを利用できるようになります。アプリケーションのパフォーマンス、スケーラビリティ、信頼性を確保するには、効果的なデプロイ戦略が不可欠です。このガイドでは、Next.js アプリを正常にデプロイする手順について説明します。

Cloud Run で Next.js アプリを実行する

Next.js フレームワークとは

Next.js は、React をベースに構築された React フレームワークです。プロダクション レディなウェブサイトを簡単に構築し、自動的に最適化できる機能が追加されています。

簡単に言うと、Next.js は React を使用して最新のアプリを構築するのに役立つフレームワークです。サーバー サポートがあり、最適化された画像とコンポーネントにより、ファイル転送を小規模に保ちながら、迅速に結果が得られます。

React（デフォルト）と Next.js の違い

どちらも JavaScript を実行し、見た目も似ていますが、その機能や役割には大きな違いがあります。

特徴

React（デフォルト）

Next.js

SEO に最適

難しい場合がある

SEO に適している

初期読み込みのパフォーマンス

遅い

速い

データの取得

手動での実装が必要

getServerSideProps と getStaticProps を組み込み

ルーティング

ルーティング ライブラリ（React Router など）を使用する

ファイル システムベースのルーティング

複雑さ

より単純に

すぐに利用できる構成

特徴

React（デフォルト）

Next.js

SEO に最適

難しい場合がある

SEO に適している

初期読み込みのパフォーマンス

遅い

速い

データの取得

手動での実装が必要

getServerSideProps と getStaticProps を組み込み

ルーティング

ルーティング ライブラリ（React Router など）を使用する

ファイル システムベースのルーティング

複雑さ

より単純に

すぐに利用できる構成

Next.js アプリの作成方法

多くの React アプリでは、手順は一般的に同じですが、Next.js フレームワークを使用することをおすすめします。高いパフォーマンスと高度なレベルの要件に対応するため、このフレームワークは、アプリをより効率的にスケーリングし、React サイトの SEO を最適化するのに役立つ多くのコンポーネントを管理します。

すべての詳細とコード要件が揃うように、ターミナルを使用してテンプレートを生成する必要があります。

ターミナルを使用する:

npx create-next-app@latest

また、以下の構成も必要です。

必要なもの、必要な情報（サーバーまたはクライアント情報）、およびそれらの場所に関する指示が必要になります。構築されるビルドで期待できることは次のとおりです。

「これはパフォーマンスとスピードのためです。」

繰り返しになりますが、これはサーバーサイドとクライアントサイドのコンポーネントが必要になる部分が準備できているか確認するのに役立ちます。

コードを更新してレイアウトを整えましょう。

これに関する情報が必要になる場合があるため、こちらのドキュメントをご覧ください。

変更を行ったので、これで設定は完了です。レンダリングできるようになります。

Next.js アプリケーションを作成する際の主な考慮事項

検索エンジン最適化を最大限に活用するには、ウェブサイトの速度が重要です。JavaScript は、それ自体がレンダリングを遅くし、検索パフォーマンスに悪影響を及ぼす可能性があります。しかし、Next.js を使用することで、この問題を軽減できます。そのため、サイトでは読み込みの速さと効率的なデータ管理を優先しましょう。堅牢なセキュリティと最高品質のプロダクトを実現するには、プライバシーとアクセスを遵守し、テストデータを慎重に使用する必要があります。

クライアントサイド ルーティング

ほとんどの React アプリでは、react-router-dom などのライブラリを使用してナビゲーションを処理します。これはブラウザで行われるため、ホスティング サーバーがこれをサポートするように構成されている必要があります。通常は、すべてのページ リクエストをルートの index.html ファイルにリダイレクトし、React Router が処理を引き継いで正しいコンポーネントを表示できるようにします。

環境変数

アプリケーションでは、API キーやデータベース エンドポイントなど、開発環境と本番環境で異なる構成が必要になる可能性があります。ソースコードで機密情報が公開されないように、環境変数（.env ファイルなど）を使用してこれらを管理することが重要です。

バックエンド API 通信

React フロントエンドは UI を担当しますが、通常はバックエンド API から動的データを取得します。デプロイする際は、React アプリケーションが本番環境 API の正しい URL を認識していること、API が別のドメインでホストされている場合はクロスオリジン リソース シェアリング（CORS）を処理するように構成されていることを確認する必要があります。


Cloud Run に Next.js アプリをデプロイする方法

Cloud Run は、コンテナベースのワークフローを使用して React アプリをデプロイする場合に適しており、これにより、最大限の一貫性と移植性が提供されます。クイックスタート ガイドを使用して、Cloud Run 上で Next.js React アプリのビルドとデプロイを開始しましょう。

ステップ 1: アプリケーションの確認

正しく移行するには。データと転送の設定に関するすべての関連する詳細を実装していることを確認してください。

ステップ 2: 次のビルド、Docker の作成

これらの手順を使用して、各ステージにプロジェクトに必要なすべての詳細情報が含まれるようにします。

# 必要な場合にのみ依存関係をインストールする

FROM node:16-alpine AS deps

# https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8 を確認する

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# ターボを使用する場合は、このセクションをコメント化解除してください。

# COPY turbo.json ./

# COPY .gitignore ./


# 環境変数を追加

ENV NEXT_TELEMETRY_DISABLED 1


# 再構築フックで、含めるものと含めないものを確認できます

RUN npm run build


###############

#### ステージ 2: 本番環境イメージ ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# ビルド時の NEXT_PUBLIC_... 環境変数。

ENV NODE_ENV production


# カスタム構成ファイルを使用している場合は、next.config.js をコピーするだけで済みます

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# 詳しくは、https://cloud.google.com/run/docs をご覧ください

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

# 必要な場合にのみ依存関係をインストールする

FROM node:16-alpine AS deps

# https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8 を確認する

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# ターボを使用する場合は、このセクションをコメント化解除してください。

# COPY turbo.json ./

# COPY .gitignore ./


# 環境変数を追加

ENV NEXT_TELEMETRY_DISABLED 1


# 再構築フックで、含めるものと含めないものを確認できます

RUN npm run build


###############

#### ステージ 2: 本番環境イメージ ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# ビルド時の NEXT_PUBLIC_... 環境変数。

ENV NODE_ENV production


# カスタム構成ファイルを使用している場合は、next.config.js をコピーするだけで済みます

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# 詳しくは、https://cloud.google.com/run/docs をご覧ください

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

ここでデプロイする必要があります。Cloud Build などのプラットフォームを使用して、構成ファイルを接続します。

ステップ 3: クラウドを味方につけ、クラウドを利用して最終的にリリースする

最後に、Cloud Run が適切かどうかを念頭に置いて、最終的にこれを使用して処理する方法を検討します。主なツールとコードを参照して、スムーズに実行できるようにしてください。

Firebase に Next.js アプリをデプロイする方法

Firebase はデプロイ先としても最適です。この簡単な手順を覚えておきましょう。Firebase で Next.js を統合する準備は整いましたか？詳細なドキュメントに沿って操作を進めてください。

ステップ 1: 公開サーバーの設定を準備する

この画像またはドキュメントに必要な構成（SSL が必要）に従って、すべてが安全に機能するようにします。

ステップ 2: セットアップとインストール（CMD）

CLI、Firebase のインストールと動作について説明します。

npm install -g firebase-tools

ステップ 3: プロジェクトを接続して構成する

「Firebase Init - Hosting」に沿って操作します。

URL が書き換えられ、コマンドラインで正確であることを確認します。

「no」とともに使用します。これにより、すべてがデプロイされたときに問題が発生しないようにします。

Google Cloud でビジネスの課題を解決する

新規のお客様には、Google Cloud で使用できる無料クレジット $300 分を差し上げます。

テストのベスト プラクティス

ローカルテストが必要になります。これにはローカルホスト コードが必要です。

CLI を認証したら、このリポジトリに push します。

  • gcloud auth configure-docker

アップロード:

  • docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
  • gcloud container images を使用して push する

Cloud Run の一般的な開発のヒントの完全なリストについては、こちらのドキュメントをご覧ください。

次のステップ

$300 分の無料クレジットと 20 以上の Always Free プロダクトを活用して、Google Cloud で構築を開始しましょう。

Google Cloud
ドキュメントサポート
コンソール
ログイン
  • デジタル変革を加速させましょう
  • お客様がデジタル トランスフォーメーションに乗り出したばかりでも、あるいはすでに進めている場合でも、Google Cloud は困難な課題の解決を支援します。
  • Google Cloud プロダクト
  • 100 種類を超えるプロダクトをご用意しています。新規のお客様には、ワークロードの実行、テスト、デプロイができる無料クレジット $300 分を差し上げます。また、すべてのお客様に 25 以上のプロダクトを無料でご利用いただけます（毎月の使用量上限があります）。
  • Google の透明性の高い料金設定の手法で費用を削減
  • Google Cloud の従量課金制では、毎月の使用量と、リソース料金の前払い割引に基づいて自動的に割引が適用されます。見積もりをご希望の場合は、今すぐお問い合わせください。
Google Cloud