Is there a way to create a page in Next.js where I can pull the ID from the URL in a dynamic route and use that for a static build, but not have to preset all the values of what ID can be in getStaticProps()? For instance, I have the following URL: localhost/questions/edit/[id] where ID can theoretically be any integer. I know for static builds you have to preset all the possible values of [id] so that next.js can generate a static HTML page for each possible value, however in my case ID values can be any number and new ID records can also be added in the future after the build. I just would like one page for that route that can pull the dynamic ID from the URL so I can use it in my code, similar to $_GET['id'] in PHP.

I've tried using the regular SSR dynamic routes like Next.js intends so that the page is generated dynamically on the server, however these routes don't work on my hosted server and I just want to try a static build before switching hosting.

I've found similar questions on stackoverflow like this one that use a dynamic route without getStaticProps() which seems like it might work, but I'm not sure how I should set up my file structure so that the route I listed above would point to a page file where I could then get the URL query parameter from.

UPDATE: I'm using Next v14.0.4 and the App router

Is there a way to create a page in Next.js where I can pull the ID from the URL in a dynamic route and use that for a static build, but not have to preset all the values of what ID can be in getStaticProps()? For instance, I have the following URL: localhost/questions/edit/[id] where ID can theoretically be any integer. I know for static builds you have to preset all the possible values of [id] so that next.js can generate a static HTML page for each possible value, however in my case ID values can be any number and new ID records can also be added in the future after the build. I just would like one page for that route that can pull the dynamic ID from the URL so I can use it in my code, similar to $_GET['id'] in PHP.

I've tried using the regular SSR dynamic routes like Next.js intends so that the page is generated dynamically on the server, however these routes don't work on my hosted server and I just want to try a static build before switching hosting.

I've found similar questions on stackoverflow like this one that use a dynamic route without getStaticProps() which seems like it might work, but I'm not sure how I should set up my file structure so that the route I listed above would point to a page file where I could then get the URL query parameter from.

UPDATE: I'm using Next v14.0.4 and the App router

• javascript
• reactjs
• next.js
• nextjs-dynamic-routing

• What version of Next are you using? Pages router or App router? Please add that info to your question. – Matt Morgan Commented Jan 17, 2024 at 16:45

1 Answer 1

Yes, if I understand your question correctly. You can create a file structure like:

/app
 -/questions
   -/edit
     -/[id]
       -page.tsx

The ID param will be available in page.tsx if you use a signature like this for the ponent function:

export default function Page({ params }: { params: { id: string } }) {
  return <div>My Post: {params.id}</div>
}

NextJS docs on this: https://nextjs/docs/app/building-your-application/routing/dynamic-routes