Next.js dynamic page params for static export Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Next.js dynamic page params for static export without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have page which depends on route params (ex.: slug) like so This route path is defined properly in my next.config.js file:

module.exports = withPlugins(plugins, {
  exportPathMap: (defaultPathMap) => {
    return {
      '/': { page: '/home/home' },
      '/blog/:slug': { page: '/careers/careers' }

This works fine when running the project in dev mode but once i export the project as static the route is not accessible and i get the regular 404 error from next.

Is there a way to fix this without using query parameters?

This solution is also not acceptable since the posts come from backend CMS


This is not possible because Next.js static export generates, well, static html pages. If you think about it, for this to work Next.js would somehow have to export every possible combination of letters valid in a url segment, which is not a good idea at all.

The closest you could get is using query parameters and the as attribute, for example when linking to a page:

<Link href='/blog/page?slug=SLUG_HERE' as='/blog/slug'>
  // Link content here

This only breaks when the user tries to link to or reload the page because there is no server-side support for the masking. You could theoretically use Nginx or Apache to proxy (is proxy the right word?) requests from /blog/SLUG_HERE to /blog/page?slug=SLUG_HERE. This is left up to you to figure out.

We are here to answer your question about Next.js dynamic page params for static export - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji