Next.js static export, routes, dynamic routes and .htaccess

Question

TDLR;

Any idea what would be the best way to achieve successful reload of dynamic routing in a static export of a next.js app (next build && next export) without getStaticPaths ?

When I was working with create-react-app and react-router, I had to add the following .htaccess file in the /public folder which would be copied/pasted int he output /build folder

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

It allows for any page reload from any route to be redirected to the correct route within the app, instead of having a 404.

With Next.js, as a static site connected to an external api, it seems a bit more complicated to have that kind of behaviour with dynamic routes. It's not dynamic routes that I can generate with getStaticPaths because I can't anticipate those paths.

My page is a quizz where you can see your results and share them if you wish. So that I have

• a page /result which are my private results, when I'm logged in
• a page /result/[anyName] which would be the public results

It's been very hard to make the page reload working properly, without a 403 or 404. I've tried a lot of stuff, like

• adding a RewriteRule in . RewriteRule ^result/(.*)$ /result [R=301,NC,L] -> didn't work
• adding an exportPathMap in my next.config.js -> didn't work.

const moduleExports = {
  reactStrictMode: true,
  exportPathMap: () => ({
    "/": { page: "/" },
    "/result/arnaud": { page: "/result" },
  }),
  images: {
    loader: "imgix",
    path: "",
  },
  trailingSlash: true,
};

What I ended up doing is a trick : in the index.js at the root of my pages, the one showing for the path /:

const router = useRouter();

  useEffect(() => {
    if (router.asPath?.includes("result") && router.asPath?.split("/").length > 1) {
      router.push(router.asPath);
    }
  }, [router.asPath]);

It's actually doing the trick, but I don't like that so much. It was much easier with a reliable .htaccess that I could blindly copy paste from projects to projects.

Anything better ?