NextJs routes with param in between routes

March 11, 2024

Is there a way in nextjs to create routes like /services/${service.id}/subscriptions?

I have many subroutes where the serviceId is needed. My initial fould would be to create a folder structure like so but this doesn’t work. Any ideas?

Edit: using page router

>Solution :

Create the following file structure inside your pages folder. Note how I omitted the ... from your dynamic route.

pages/
├─ services/
│  ├─ [serviceId]/
│  │  ├─ subscriptions/
│  │  │  ├─ index.tsx
│  │  ├─ index.tsx

Here is an example of how you can access the serviceId inside your page at subscriptions/index.tsx:

import { useRouter } from 'next/router';

const Subscriptions = () => {
  const router = useRouter();
  const { serviceId } = router.query;

  return (
    <div>
      <h1>Subscriptions for Service ID: {serviceId}</h1>
    </div>
  );
};

export default Subscriptions;