score:1

Accepted answer

the page folder must be:

pages/
 cars/
  [category]/
   [id]/
    index.jsx
   index.jsx

then go /cars/sedan/2 you can access to category and id variables like this:

cars/[category]/[id]/index.jsx

import react from 'react';
import { userouter } from 'next/router';

export default function index() {
  const router = userouter();
  // router.query.category -> sedan
  // router.query.id -> 2
  return <div>{json.stringify(router.query)}</div>;
}

// or 
export const getserversideprops = async (context) => {
  const { params } = context;
  console.log(params); // { category: 'sedan', id: '2' }
  return {
    props: {
      cars: {},
    },
  };
};

// or if you wish use getstaticprops for ssg (with getstaticpaths)
export const getstaticpaths = async (context) => {
  const paths = cars
    .map((car) =>
      car.models.map((model) => ({
        params: {
          id: model.id.tostring(),
          category: car.name,
        },
      }))
    )
    .flat(); // this is important

  return { paths, fallback: false };
};

export const getstaticprops = async (context) => {
  const { params } = context;
  console.log(params);
  return {
    props: {
      cars: {},
    },
  };
};

example: stackblitz


Related Query

More Query from same tag