Server Actions in Static Exports

[glpecile]

Summary

I have a next.js app with the next.config file on output: 'export' mode and I was previously using the app directory with server actions. What happens to existing server actions in this mode? Are env variables now exposed in the browser?

I'm interested in reading more about this but I haven't found much in the existing documentation other than unsupported features.

Additional information

No response

Example

No response

[mutasim77]

Server Actions require a server (obviously). Setting output: "export" in your config file will generate only a set of static files (HTML/CSS/JS). You cannot combine these two features. If you try building your project, it will give you this error:
> Server Actions are not supported with static export.

[otaviomad]

what if my server action is not a mutation but rather a static list? this forces me to use an api route with a force-static.

[daveycodez]

Ahhhh so this is why I definitely will not use the App Router LOL

[debugmedia]

Ahhhh so this is why I definitely will not use the App Router LOL

Why? Just don't use server actions

[daveycodez]

https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing#add-generatestaticparams

Having to await params in Next 15 and add setRequestLocale(locale); and "use client" to everything seems like too much to add and also all the tabs in VS Code are "page.tsx"

[debugmedia]

Yes I totally agree, but its better to start using app router now before they bump to next 16,17,18 and make it impossible for page router to migrate to app router

[daveycodez]

Hopefully they don't, and as of March we have "many years to come" cross fingers

If I wasn't using Capacitor static exports then it would make sense to leverage Server Actions and such, but I'm building everything with a single code base for web + mobile apps and pages router is just cleaner code for that atm.

#56655 (comment)

[jigz]

temporary workaround, rename to api/route.server.ts

package.json
"build": "cross-env NEXT_OUTPUT=export next build",

next.config.ts

const nextConfig: NextConfig = {
  output: 'export',
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx', 'server.ts'],
}

if (process.env.NEXT_OUTPUT === 'export') {
  nextConfig.pageExtensions = ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx']
}