Next.js 13能否基于查询参数静态生成菜单页面？是否需改用动态路由？

因为你提到分类和子分类数量不多，完全可以通过提前枚举所有可能的参数组合来实现静态生成，不用非得改成动态路由段，具体思路如下：

• 先把所有可能的分类/子分类组合列出来
  比如把所有需要生成的参数组合写成一个数组：

  const allMenuFilters = [
    { category: 'savory' },
    { category: 'sweet', subcategory: 'cake' },
    { category: 'sweet', subcategory: 'cookie' },
    // 把所有你需要的组合都加进去
  ];
  

• 在静态生成逻辑里遍历这些组合，生成对应页面
  以主流的静态生成框架为例：

  1. 在静态路径配置函数中，返回包含所有查询参数组合的配置，保持路由段为/menu不变，只传递查询参数：

     export async function getStaticPaths() {
       return {
         paths: allMenuFilters.map(filter => ({
           params: {}, // 路由固定为/menu
           query: filter // 携带对应的分类参数
         })),
         fallback: false // 所有组合都提前枚举了，不需要 fallback 模式
       };
     }
     

  2. 在静态数据获取函数中，接收查询参数，获取对应分类的菜单数据：

     export async function getStaticProps({ query }) {
       const { category, subcategory } = query;
       // 根据参数拉取对应分类的菜单数据
       const menuItems = await getMenuItemsByCategory(category, subcategory);
       return {
         props: { menuItems }
       };
     }
     

• 在页面组件中渲染对应内容
  直接用传入的menuItems数据，渲染该分类下的菜单即可。

核心逻辑就是提前告知静态生成工具所有需要覆盖的查询参数组合，工具会为每个组合生成独立的静态资源，用户访问/menu?category=savory这类URL时，会直接命中预先生成的静态页面。

不同静态站点生成工具的具体语法可能有差异，但这个思路是通用的，不用强制改成动态路由段。

内容的提问来源于stack exchange，提问作者ohShoes