在Next.js 13中有没有基于查询参数静态生成页面的方法?

klh5stk1  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(87)

我想静态生成各种菜单页面的基础上的'类别'和'子类别'查询参数的URL,如:'/menu?category=savory'.由于我只有几个预期的类别和子类别,我认为静态生成可以很好地与菜单页一起工作,但我还没有找到任何解决方案。唯一的方法是将类别和子类别值作为动态管段而不是查询参数吗?

smtd7mpg

smtd7mpg1#

您可以在任何组件中使用next/routerconditional rendering
对于?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>
  );
}

**注意:**在预渲染时会为空,所以需要使用适当的默认值来捕捉。

相关问题