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?

posta un mese fa98 visualizzazioni
Nessuna risposta

Accesso non effettuato. Accedi per postare una risposta.

Una buona risposta soddisfa chiaramente la domanda, fornisce un feedback costruttivo e incoraggia la crescita professionale del richiedente.

Linee guida per rispondere alle domande