Using react-router-dom is more of an antipattern in nextjs as next comes with its own routing. [Read more about static export.](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)

My concern with next js routing is that I cannot use dynamic routes with static export

no you can use dynamic routes.

by using []

no you can't use dynamic pages with static export

we can use /page/product/[id]. that is the way to make it possible.

its literally the first mentioned feature that is not supported

You mean that when build time?

why do u want to do that tho?

I need to use dynamic route with static export

what about this?

/product/[id]/page.js

// This is a server-side component by default
async function getProduct(id) {
const res = await fetch(https://path/products/${id});
if (!res.ok) {
....
}
const product = await res.json();
return product;
}

export default async function ProductPage({ params }) {
const { id } = params;

const product = await getProduct(id);

return (
<div>
<p>{product.name}</p>
<p>Price: ${product.price}</p>
</div>
);
}

As my understanding, this works only if you run your app using the node js server
In my case, I need to host my app as static HTML files in services like AWS S3

oh... I see

you use AWS

I will ask my senior. 🙂

If you can list all the slugs of all dynamic routes you have, then you can do it in the app router in static export.

If you can’t list the slugs and would like to use client side rendering, then it’s not possible to do in the app router but possible in the pages router.

If you use the pages router you might be able to use react-router but that’s strongly discouraged because nextjs brings its own router and react-router may likely not play well with the nextjs router.

so something like ssg?

As of my findings,
When using a page router with react-router, need to use the next rewrites to handle page reload with nested routes as follows

async rewrites() {
    return [
      // Rewrite everything else to use `pages/index`
      {
        source: '/:path*',
        destination: '/',
      },
    ];
  }

Then another problem is rewrites are not supported with static export https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#unsupported-features

No you don’t use pages/index. You use pages/[…slug].tsx, but now that I think about it, this likely doesn’t work either.

Just don’t use react-router with nextjs.