Next.js を Amplify で AWS 環境にデプロイしてみる

これを参考に進める

記載の通り create-next-app でプロジェクト作成

$ npx create-next-app my-next-app-on-amplify --javascript --no-eslint
$ cd my-next-app-on-amplify

mikakane

next は 13.3 が落ちてきた

mikakane

記載の通り pages/index.js pages/ssr.js を修正

mikakane

コードが書けたら Github リポジトリにコードを UP

mikakane

Amplify の画面に遷移して「」「Web アプリケーションをホスト」

新しいアプリケーションを作成するフローの画面で
GitHubを選択し、コードを　UP したリポジトリを選択

next.js が自動検出され、適切な設定ふぁいる(yml) で以下が自動的に適用される模様

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

mikakane

次へをクリックしてデプロイ完了。しばらく待つ

mikakane

デプロイは完了してとりあえず動く、APIも動くし SSR もできる。