Is there any way to statically generate pages based on query parameters in Next.js 13?

Question

I am wanting to statically generate various menu pages based on the 'category' and 'subcategory' query parameters of the URL, such as: '/menu?category=savory'. Since I only have a few expected categories and subcategories, I thought static generation would work very well with the menu page but I have not found any solutions to this. Would the only way to do this be to have the category and subcategory values as dynamic route segments instead of query parameters?

Answer 1

You can use the next/router with conditional rendering in any component.

For ?category=savory:

import { useRouter } from 'next/router';

export default function MenuComponent() {
  const router = useRouter();

  return(
    <div>
      {router.query.category == "savory" ? ( <p>savory</p> ) : ( <p>other</p> )}
    </div>
  );
}

Note: it will be empty during pre-rendering, so you need to catch that with appropriate defaults.