Static export and dynamic route

[lucas-garrido]

Hello,
i have a dynamic route to edit a customer:

i'm using static export (im not using any staticpath or staticprops methods),
the page customers/10012345/edit/ :

• works fine in dev mode
• works in production when its a redirect from another page (e.g link from /customers)
• doesnt works in production when i try to access it directly from url or when im already on the page and i refresh it
  AND i can access this url => /customers/[id]/edit/ (obviously trigger error cause its not a real id)

any idea ? i was thinking to make a rewrite rule but im not sure
thanks for helping

[DanielWahl]

Hi,
I have the same problem.

Works fine on Vercel (or another deploy platform), but when exporting the app as static export, the dynamic routes are not working.

Accessing a dynamic route by a Link from the root-page works, but by using the dynamic url directly, results in an error.
I'm fetching the data on clientside (no getServerSideProps, getStaticProps, ...), only by using useRouter.

The plan was to deploy the Nextjs-app on IFPS/Fleek.

Thanks in advance.

[dandaka]

Documentation says "The majority of core Next.js features needed to build a static site are supported, including. Dynamic Routes when using getStaticPaths"

https://nextjs.org/docs/advanced-features/static-html-export

I was not able to make it work. I get 404 error, when refresh a page with a dynamic route.

I think we need more clarity, if these 2 features do work or not together.

[m-sterspace]

Late to the party but I'm pretty sure this is an issue with how your hosting provider is configured.

works in production when its a redirect from another page (e.g link from /customers)

doesnt works in production when i try to access it directly from url or when im already on the page and i refresh it
AND i can access this url => /customers/[id]/edit/ (obviously trigger error cause its not a real id)

This is because when you run next export it generates a single [id].html file. If you're within your site (say at /customers) and specifically use Next.js' Link component to navigate to customers/myExampleId then Next already knows to fetch the [id].html page based on your project config, however, when you refresh the page, enter the address into the address bar, follow a link from an external site, or even follow an internal link that doesn't use the Next.js Link component, then your browser sends a GET request to customers/myExampleId, and the hosting provider gets that request and looks for a file called customers/myExampleId.html or customers/myExampleId/index.html neither of which exist so it 404s.

So you need to configure a wildcard parameter with your hosting provider to match your Next.js dynamic routing. Some routing rule like customers/* -> customers/[id].html.

[adarsh-drishya]

used your idea to make it work for now in aws amplify provided explicit rewrites for such routes which wont work, do you think of any other thing here

[cseas]

Thanks! Used your suggestion to make the deployment work with Netlify. Just needed to add the below lines to a netlify.toml file.

[[redirects]]
  from = "/customers/*"
  to = "/customers/[id].html"

This is practically the same as visiting "/customers/[id].html" in your browser so the slug won't actually work but the route won't show a 404 page anymore.

[niklasravnsborg]

I struggled with this when building my static export locally and then deploying to Vercel. Thanks to the Build Output API I can now do: vercel build and vercel deploy --prebuilt and everything works fine. My whole app gets statically exported and .vercel/output/config.json sets all the routes correctly.

[robertohein]

Hello, i made a workaround using nginx rewrite rules:

rewrite ^(.*)\/(\d+)$ $1/[id] last;

but there are some limitations:

1. Dynamic routes archives can only be named [id].tsx - this was not a problema for me because all my routes used this syntax
2. slugs are note supported - but slugs can be fixed using static paths
3. only works if your dynamic routes variables are numbers or can be identified with a regex

basically when nextjs build static, the dynamic route is build in a [id].html

this rule replace all numbers that have a / before aka this regex: /(\d+) to /[id]

and i have another nginx rule to remove the .html

so my final config is:

[majilan37]

i have the same issue, my app is deployed on Cpanel, how can i do the same .htaccess file ?

[johnclary]

Cross posting from another discussion: In my Next v15 app that uses the pages router, I used this workaround to bring the router in sync with the window location. I was never able to use redirects or rewrites to solve this issue. It's a hack to work around the problem that the next/router does not initialize correctly when using dynamic routes and a static export.

// _app.js
import { useEffect } from "react";
import { useRouter } from "next/router";

export default function App({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const path = window.location.pathname;
    // If we're not on the homepage but router thinks we are
    if (path !== "/" && router.pathname === "/") {
      // Push to the actual path
      router.push(path + window.location.search + window.location.hash);
    }
  }, [router]);

  return <Component {...pageProps} />;
}