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.

[vincic]

I guess the REST API is inevitable, since typically you host the CMS in one place (locally or in the cloud) and deploy the statically built site somewhere else. To use the local Payload API, the PayloadCMS project (CMS + site) would likely need to handle the deployment of your site itself.

That said, I still believe if you're hosting PayloadCMS locally, you should be able to configure the Next.js part outside of the PayloadCMS logic to only export and deploy the static site. But in the website template, everything seems very intertwined - like the old days when the CMS directly served the site it managed.