How to use dynamic routes without getstaticpaths

Viewed 742

I am using next.js and I want to have dynamic route like [id].tsx. And I want to have default html and I am going to generate rest with dynamic route param in client side. But next.js is throwing error asking to include getStaticPaths -

Error: getStaticPaths is required for dynamic SSG pages and is missing for

2 Answers

Three ways:

  1. getServerSideProps
  2. getStaticProps + query parameters
  3. Don't use next.js. For SEO optimization, prerender pages

There is a new way you can do this, using middlewares.

pages/
  some-root/
    _middleware.ts
    index.ts

Where the middleware file looks like:

export const middleware = (request: NextRequest) => {
  const [, myParam] = request.nextUrl.pathname.split('/some-root/')

  return NextResponse.rewrite(new URL(`/some-root?myParam=${myParam}`, request.url))
}

Related