Next.js nextjs嵌套动态文件夹路由

更新：

由于[category_slug]-index.js的getServerSideProps，导致此错误的原因是什么

我试着在product文件夹下做index.js，它可以工作。。。意思是说它可以和[category_slug]一起使用哪些服务器端道具，对吗

这是我的文件夹结构

pages
   |-categories
   |     |
   |     |-[category_slug]
   |        |-index.js     
   |        |-product
   |          |-[product_slug].js
   |

当我输入[product_slug]时，它会导致错误。显示错误：在/categories/[category\u slug]/product/[product\u slug]的GetStaticPath中，所需参数（category\u slug）未作为字符串提供。

这是否可以在nextjs中创建嵌套路由文件夹？我找不到这方面的任何信息。 我在下面显示我的代码

// [product_slug].js

export async function getStaticProps({ params: { product_slug } }) {
  const product_res = await fetch(
    `${API_URL}/products/?product_slug=${product_slug}`
  ); // question mark is query slug, to find the slug in the json
  const found = await product_res.json();

  return {
    props: {
      product: found[0],
    }
  };
}

export async function getStaticPaths() {
  // Retrieve all the possbile paths
  const products_res = await fetch(`${API_URL}/products/`);
  const products = await products_res.json();

  return {
    paths: products.map((product) => ({
          params: { product_slug: product.product_slug },
        }),
    fallback: false, 
  };
}

我试图为[category_slug]提供一个硬代码。这样正确吗？我也不确定。我找不到有关此文档的信息。任何人都可以提供在product_slug dynamic route中输入第一条动态路径的正确方法

export async function getStaticProps({ params: { product_slug } }) {
  const product_res = await fetch(
    `${API_URL}/products/?product_slug=orange_juice`
  ); 

  const found = await product_res.json();

  return {
    props: {
      product: found[0],
    },
  };
}

export async function getStaticPaths() {
  // Retrieve all the possbile paths
  const products_res = await fetch(`${API_URL}/products/`);
  const products = await products_res.json();

  return {
    paths: [
      {
        params: {
          product_slug:
            "categories/orange/product/orange_juice",
        },
      },
    ],
    fallback: false,
  };
}

---

如注释中所述，您只需在

[product\u slug]

的

GetStaticPath

中检索可能的

类别\u slug

即可实现

我假设，根据您的路由结构，每个产品都属于给定的类别。在这种情况下，您需要在

getstaticpath

中获取每个类别的所有产品

//categories/[category\u slug]/product/[product\u slug].js
导出异步函数getStaticPaths（）{
//添加逻辑以按类别获取所有产品
返回{
路径：[
//对于每个类别/产品组合，您将有如下条目：
{
参数：{
类别_鼻涕虫：“橙色”
产品名称：“橙汁”，
}
}
],
后退：错误
};
}

然后，您的

getStaticProps

也会期望额外的

category\u slug

参数

导出异步函数getStaticProps（{params:{category\u slug，product\u slug}）{
//添加逻辑以根据“类别”和/或“产品”获取单个产品`
返回{
道具：{
产品
}
};
}

---

给定在

getStaticPaths

中用作示例的条目，您将能够访问以下路径：

/categories/orange/product/orange\u juice

在我看来，您还需要在[product\u slug].js的getStaticPaths（）中获取可能的[category\u slug]。就像错误所说的：“（category_slug）没有提供”@ckoala是的，我尝试了硬代码。它仍然返回相同的错误。我想我的方式是错误的？？我已经更新了帖子。我看到你的[category_slug]目录中没有

index.js

。您应该尝试在那里获取所有可能的路径/段塞。我也发现这个帖子很有帮助：谢谢你提供这个。但这和我的情况有点不同。我猜nextjs在构建静态文件时找不到我的[category_slug]路径名，因此导致错误。在您共享的帖子中，没有像my Science.Cool那样嵌套动态文件夹。谢谢你的帮助。它起作用了！=）