单击查看所有按钮时，如何实现类似电子商务的功能以查看网格中存在于行滑块中的所有项目？

如何解决单击查看所有按钮时，如何实现类似电子商务的功能以查看网格中存在于行滑块中的所有项目？

我正在自定义在 nextjs、laravel、react-query、restAPI 中制作的现有应用程序的登录页面。 我对登录页面进行了一些更改，并添加了四个卡片组件，并将它们命名为“本周热门类别”、“新鲜食品”、“推荐”等。每个组件卡都有 30 到 40 个从 restAPI 获取的产品图像，并将它们包装在一个反应​​滑块中，在一张幻灯片中显示 3 个产品。 每个组件都有查看所有按钮，我想要一个功能，当它被点击时，只需在具有指定路径的同一窗口中以网格方式显示所有产品。

这是我从中获取获取的数据并映射到显示产品图像的查询-

const { data } = useProductsQuery({
type: query.type,text: query?.text,category: query?.category,});

如何使用 getStaticProps 和 getStaticPaths 生成动态 它的路径？