how to deploy successfully React app with nextjs to AWS Amplify?

Question

I am new with aws. I try to deploying my simple React app to aws amplify front-end server.

My app has built successfully, but my page shows me 'Access Denied'

<Error>
 <Code>AccessDenied</Code>
 <Message>Access Denied</Message>
 <RequestId>C82A3C87F1F61733</RequestId>
 <HostId>Dra3fQ4LWJQVgGKKcF/EssjEAEHjYt1FuVQRI9pa+CA5L+Bgwl0hArw/EZEIhjg0d4qZ8DxMsLg=</HostId>
</Error>

I don't know why. Can you give me a hint to resolve this problem?

here is some info.

package.json

{
  "name": "react-env-setting",
  "version": "1.0.0",
  "description": "practice for react env setting with scss, nextjs",
  "main": "index.js",
  "scripts": {
    "build": "next build",
    "start": "next start",
    "dev": "next",
    "test": "jest --verbose --watchAll"
  },
  "author": "reallifeliver",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-typescript": "^7.10.1",
    "@types/node": "^14.0.9",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^3.5.3",
    "dotenv": "^8.2.0",
    "eslint": "^7.1.0",
    "next": "^9.4.4",
    "path": "^0.12.7",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass": "^1.26.7",
    "sass-loader": "^8.0.2",
    "source-map-loader": "^1.0.0",
    "style-loader": "^1.2.1",
    "typescript": "^3.9.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.0",
    "@babel/preset-env": "^7.10.0",
    "@babel/preset-react": "^7.10.0",
    "@types/enzyme": "^3.10.5",
    "@types/jest": "^25.2.3",
    "@typescript-eslint/eslint-plugin": "^3.0.2",
    "@typescript-eslint/parser": "^3.0.2",
    "babel-loader": "^8.1.0",
    "enzyme": "^3.11.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "jest": "^26.0.1",
    "prettier": "2.0.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

next.config.js

const path = require('path');

module.exports = {
  distDir:'dist',
  webpack: (config, {buildId, dev, isServer, defaultLoaders, webpack}) => {
    console.log(config)
    return config
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')]
  },
  experimental: {
    async redirects() {
      return [
        { source: '/', destination: '/home', permanent: true}
      ]
    }
  }
}

amplify.yml

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
        - mkdir dist
        - npm install
    build:
      commands:
        - npm run build
    postBuild:
        commands:
            - ls
            - pwd
            - cd dist
            - ls
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

some part of frontend build log

2020-06-10T10:32:25.300Z [INFO]: # Completed phase: postBuild
2020-06-10T10:32:25.300Z [INFO]: ## Build completed successfully
2020-06-10T10:32:25.302Z [INFO]: # Starting caching...
2020-06-10T10:32:25.378Z [INFO]: Creating cache artifact...
2020-06-10T10:32:31.671Z [INFO]: # Cache artifact is: 249MB
2020-06-10T10:32:31.794Z [INFO]: # Uploading cache artifact...
2020-06-10T10:32:34.390Z [INFO]: # Caching completed
2020-06-10T10:32:34.525Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src472370803/src/react-env-setting/dist
2020-06-10T10:32:34.525Z [INFO]: # Starting build artifact upload process...
2020-06-10T10:32:34.685Z [INFO]: # Build artifact is: 0MB
2020-06-10T10:32:34.685Z [INFO]: # Uploading build artifact '__artifacts.zip'...
2020-06-10T10:32:34.698Z [INFO]: # Build artifact is: 0MB
2020-06-10T10:32:34.698Z [INFO]: # Uploading build artifact '__artifactsHash.zip'...
2020-06-10T10:32:34.851Z [INFO]: # Build artifact upload completed
2020-06-10T10:32:34.851Z [INFO]: # Starting environment caching...
2020-06-10T10:32:34.851Z [INFO]: # Environment caching completed

Answer 1

2020-06-10T10:32:34.525Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src472370803/src/react-env-setting/dist

It's not able to find index.html in the build directory. After the build step, you need to export your app to static html by running next export

Modify your build script to

"build": "next build && next export"

By default next exports a static version of your app in the out directory. Accordingly modify baseDirectory in amplify.yml

You can read more about next export here

Please note that you cannot deploy next apps with SSR enabled to Amplify. All the HTML files are pre-build.