Next.jsアプリをどこまで速く公開できるか？

Cursor や Claude Code などの AI を使ってアプリを作る場合、実装そのものはかなりの部分が自然言語で進むようになってきました。

一方で、デプロイやその後のユーザー管理、IP制限などの部分を考えるとAI だけではまだまだ難しい印象です。

この辺りも含めてAIに軽やかに走り抜けてもらうには、先に「足回り」を整えておくと効率的です。

この記事はその足回りとして、Next.js アプリを AWS Amplify Gen2 上に最速で公開するまでの手順を、RTA（リアルタイムアタック）風にまとめています。

検証環境

OS: macOS
エディタ: Cursor
バージョン管理: Git（SSH で GitHub に接続）
npm

RTA開始

Step 1. Next.js アプリ作成（1分程度）

任意のディレクトリで下記のコマンドを実行します。

npx create-next-app@latest

$ npx create-next-app@latest
Need to install the following packages:
create-next-app@16.1.6
Ok to proceed? (y) y

✔ What is your project named? … amplify-rta
✔ Would you like to use the recommended Next.js defaults? › Yes, use recommended defaults

対話形式でいろいろ聞かれますが、基本はデフォルト寄りで OK だと思います。

完了すると以下のようなプロジェクトが作成されます。

Step 2. Amplify Gen2 を初期化（1分程度）

Next.js プロジェクトのルートで実行します。

cd amplify-rta

npm create amplify@latest

$ npm create amplify@latest
Need to install the following packages:
create-amplify@1.3.0
Ok to proceed? (y) y
✔ Where should we create your project? .

完了すると、プロジェクト内に Amplifyのフォルダが作成されます。

Step 3. GitHubでリポジトリ作成（2分程度）

amplifyのデプロイ方法としては、Gitプロバイダーを使用する自動デプロイと、S3やZipファイルからの手動デプロイがあります。

今回はGitHubを使用したいと思います。

GitHub で新規リポジトリを作成
ローカルの Next.js プロジェクトを Git 管理にして push

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:<org>/<repo>.git
git push -u origin main

Step 4. Amplify コンソールでデプロイ（9分程度）

Amplify Console 側から作業を行います。

AWS Amplify コンソールを開く
「新しいアプリをホスト」などから GitHub を選択
GitHubを連携し対象のリポジトリ / ブランチ（main）を選択
アプリケーションの設定 → デフォルトでOK
ビルド設定を確認 → 保存してデプロイ
デプロイ完了初回は少し時間がかかります。今回は8分26秒で無事に完了しました。

結果

かかった時間はディレクトリの作成からデプロイ完了までで13分46秒でした。

デプロイが完了するとAmplifyが自動で発行するURL上でNext.jsのアプリ画面が見られるようになります！

Amplifyのフォルダ内にデフォルトで入っているauthとdataのresource.tsによって、DynamoDBのテーブルとAmazon Cognitoのユーザープールが作成されているのも確認できました。

まとめ

今回は、ゼロの状態からNext.jsアプリをAmplify Gen2上にデプロイする手順と所要時間をご紹介しました。

事前に足回りを整えておくことで、AI を活用した開発での手戻りを大幅に減らせます。

技術選定は用途によって変わりますが、IP認証なども含めた簡単なWebアプリを作る場合、Amplify Gen2は非常に便利です。

これからも積極的に活用していきます！