How to host Next SSG app on Amplify?

0

next v14.1.4

amplify v12.10.2

Seems like Amplify would be well suited for hosting a static nextjs app, but I've been struggling all day with getting it to deploy properly.

Most of the guides and docs out there, including Amplify's guide, want to use next build && next export to build and export an SSG-only app, but that now results in this error message:

The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export

Great, so I do that and have a next.config.js like this:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: "export",
  distDir: "dist", // optional to specify, it will default to 'out'
  images: {
    unoptimized: true, // required for SSG with output: export
  },
};

export default nextConfig;

And my amplify.yml build settings, where the baseDirectory matches up with the distDir above, and my package.json has the build script "build": "next build",

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

And the frontend has this fun build error at the bottom. I can build and run locally no problem with next build. The file required-server-files.json is inside the .next folder.

2024-04-05T21:49:10.928Z [ERROR]: !!! CustomerError: Can't find required-server-files.json in build output directory

I can get a successful build by changing to distDir: ".next" and baseDirectory: .next however the deployed site doesn't load properly with an error 500. My amplify hosting compute logs in this app show this error:

Error: "next start" does not work with "output: export" configuration. Use "npx serve@latest out" instead.

How do I get out of this mess?

asked a month ago92 views
No Answers

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions