Hosting trên Amplify

Detect error from Amplify

The problem is mentioned in Chapter 1 - Introduction to Amplify, We have a problem to solve when deploying code on top of Amplify and Amplify creates a build for SSR app instead of SSG app as we want. Here, I will describe the error detect build SSR app and build SSG app in Amplify and how to fix it.

Below folder after build of Next.js 14. Self-Hosting and we notice this detail Static Exports from the document of Next.js 14

And this is how Amplify detect Next.js your app is SSR app or SSG app. Amplify documentation. => We realize that Next.js 14 and AWS Amplify are conflict together.

We’ll look at how Amplify defines baseDirectory to deploy code.

We will use this amplify.yml file for the workshop scope because this is the correct build config for the SSG app.

Here is an example Amplify detect build SSG app wrong and build fail. Since in package.json configuration as below, this is the correct build config of Next.js 14. Which Amplify detect is build SSR app => Build fail and cannot deploy. Here is the package.json file

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "format": "prettier -c --write \"*/**\"",
    "lint": "eslint . --ext .ts,.tsx,",
    "lint:fix": "eslint . --ext .ts,.tsx, --fix"
  },

In this error, Amplify is pointing to the out folder due to the amplify.yml file so that baseDirectory is out. Amplify can’t find the required-server-file.json file because it’s not an SSR build. Let’s compare the files after the Next build at the beginning, I mention the difference between the 2 builds. To fix the above error, we will follow in next section.