Next.js APP router SSG

[lwang-79]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

App Id

d1fn6pdw73hgp

AWS Region

ap-southeast-1

Amplify Hosting feature

Build settings

Frontend framework

Next.js

Next.js version

13.4.12

Next.js router

App Router

Describe the bug

I tried to convert the Next.js SSR to SSG by following the FAQ. However the app platform and branch framework always change back to Web dynamic and Next.js SSR during the build.

After I added command - envCache --set stackInfo "", the platform and framework seems not change back, but the frontend build doesn't start because next export does not work with App Router.

- error "next export" does not work with App Router. Please use "output: export" in next.config.js https://nextjs.org/docs/advanced-features/static-html-export

If I change to next build and configure the "output: export" in next.config.js, the build works locally but Amplify changes the app to web platform and SSR.

Expected behavior

Can deploy Next.js App Router SSG app.

Reproduction steps

1. Deploy a App Router SSR app.
2. Try to convert it to SSG.

Build Settings

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - envCache --set stackInfo ""
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Log output

# Put your logs below this line
# with next build
2023-12-21T08:16:16.142Z [INFO]: Starting SSR Build...
2023-12-21T08:17:11.606Z [ERROR]: Error: Command failed with exit code 1: node_modules/.bin/next build

# with next export
2023-12-21T08:10:06.483Z [WARNING]: - warn "next export" is no longer needed when "output: export" is configured in next.config.js https://nextjs.org/docs/advanced-features/static-html-export
2023-12-21T08:10:06.484Z [INFO]: Export successful. Files written to /codebuild/output/src856227934/src/betom/out
2023-12-21T08:10:06.492Z [INFO]: # Completed phase: build
2023-12-21T08:10:06.510Z [INFO]: ## Build completed successfully
2023-12-21T08:10:06.511Z [INFO]: # Starting caching...
2023-12-21T08:10:06.521Z [INFO]: # Creating cache artifact...
2023-12-21T08:10:16.747Z [INFO]: # Created cache artifact
2023-12-21T08:10:16.830Z [INFO]: # Uploading cache artifact...
2023-12-21T08:10:20.416Z [INFO]: # Uploaded cache artifact
2023-12-21T08:10:20.492Z [INFO]: # Caching completed
2023-12-21T08:10:20.701Z [ERROR]: !!! CustomerError: Artifact directory doesn't exist: out

Additional information

No response

[tonynechar]

I am having the same issue. @calavera any tips? Thanks in advance.

[tonynechar]

I think I found a solution:

• I used the following AWS CLI commands (you can use the AWS CloudShell service to execute these CLI commands) to force switch my app build settings from Next.js - SSR framework to Next.js - SSG. Here is the link to the guide: https://github.com/aws-amplify/amplify-hosting/blob/main/FAQ.md#convert-an-ssr-app-to-ssg
• An important note is that I did not add the next export command to the build script in the package.json of my app (the next export command does not work for App Router apps), I just force switched in AWS Amplify to build it as an SSG through the CLI.
• Lastly, I added the out folder as the baseDirectory in artifacts in the build settings, I also deleted the rewrite rule in the Rewrites and redirects tab in the Amplify dashboard.

Hope this helps you with your case too

[datnguyennnx]

Amplify detect config "build" in package.json is "next build" => we have SSR app. Then Nextjs build project and export folder ".next" for deployment.

Your SSG app when builded sucess => export folder out for deployment.

Bug: When Amplify detect your app is SSR. After build success they point to ".next" for deployment => Build failed. But your app is SSG, they export at "out" folder. So your change config build: "next build" to build: "next build and next export" => Amplify detect your app is SSG. => Correct. This case is no match with Nextjs 14.

Reason: because Nextjs 14 is change way to build SSG page. They remove "next build && next export" ( => Amplify detect SSG app) to "next build" and add line output: "export" in next.config.js. 

Way i fixed that: 

• Step 1: we config "build" in package.json build: "next build && next export" => Amplify detect SSG app then they build failed => Because Nextjs 14 no match this config. 
• Step 2: We create new commit for config change build: "next build && next export" " to  build: "next build" => Trigger CI/CD build again => Success build and deploy. 

Key: Make sure Amplify detect your app build is SSG.