Struggling to build a static page

[adrianoresende]

Documentation Issue about the static page

I'm trying to use export: "output" to generate static pages with Payload, but I couldn't find clear documentation on how to structure.

NOTE: I'm using this website template

I'm especially unsure about how to separate the build between the frontend and the payload.

To generate static, I think to run npm run build:static only static page without admin.

if (process.env.BUILD_MODE === 'static') {
  nextConfig.distDir = 'dist'
  nextConfig.output = 'export'
  nextConfig.redirects = undefined

  // Ignore during build
  nextConfig.experimental = {
    ...nextConfig.experimental,
    serverExternalPackages: ['payload', 'mongodb', '@payloadcms/db-mongodb'],
  }
}

const finalConfig = process.env.BUILD_MODE === 'static' ? nextConfig : withPayload(nextConfig)

export default finalConfig

I don't know the best way to approach it.

I've also seen a few community threads where others have faced similar difficulties, so this might be a good opportunity to clarify this in the official documents.

Why?

The main reason for going static is cost efficiency — we want to run everything in a fully static environment (e.g. fully cached via CloudFlare or running on AWS Amplify, S3, etc.) without needing a running "server".

[bratvanov]

Related feature request: #9855

[adrianoresende]

Related feature request: #9855

@bratvanov Have you managed to do any of this way?

[bratvanov]

Related feature request: #9855

@bratvanov Have you managed to do any of this way?

@adrianoresende Yes, I've built a fully working Payload multi-tenant website locally, which successfully exports as fully static HTML.

It's powered by two separate Next.js apps:

• one for the back-end/admin panel containing Payload CMS without explicitly specifying an output value in the next.config.ts (hence, it falls back to the default output: standalone)
• another simple Next.js app without Payload, that contains the front-end (connecting via the REST API to the Payload instance) and has output: export configured in the next.config.ts.

As I mentioned in my feature request, this two-app workaround is not great, as it requires using the REST API instead of the faster Local API. It’s also less efficient than a single-app setup, which was highlighted as a key advantage of Next.js integration in Payload 3.0 (front-end and back-end under one application).

Hence, I would love it if there's a solution to make static HTML exports work with Payload in a single-app setup.