6

アップデート：

  1. [category_slug]-index.js が原因でこのエラーが発生するのはどれgetServerSidePropsですか?
  2. 私は製品フォルダの下でやろうとしましたindex.js、それは動作します、それは [category_slug] でgetServerSideprops大丈夫です、私は正しいですか?

これは私のフォルダ構造です

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

[product_slug]に入力するとエラーになります。表示中:

エラー: /categories/[category_slug]/product/[product_slug] の getStaticPaths で、必要なパラメーター (category_slug) が文字列として提供されませんでした

これにより、Next.js でネストされたルーティング フォルダーを実行できますか? これに関する情報が見つかりません。以下にコードを示します。

// [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] にハードコードされた値を提供しようとしました。この方法で正しいでしょうか？私もよくわかりません。ドキュメントでこれについて見つけることができませんでした。

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_slug]動的ルートに最初の動的パスを入力する正しい方法を誰かが提供できますか?

4

1 に答える 1

4

@ckoalaが述べたように、の可能なcategory_slugsを取得するだけで済みます。[product_slug]getStaticPaths

ルーティング構造に基づいて、各製品は特定のカテゴリに属していると思います。その場合、 の各カテゴリのすべての製品を取得する必要がありますgetStaticPaths。

// categories/[category_slug]/product/[product_slug].js

export async function getStaticPaths() {
    // Add your logic to fetch all products by category

    return {
        paths: [
            // For each category/product combination you would have an entry like the following:
            {
                params: {
                    category_slug: 'orange'
                    product_slug: 'orange_juice',
                }
            }
        ],
        fallback: false
  };
}

次に、追加のパラメーターgetStaticPropsも期待しcategory_slugます。

export async function getStaticProps({ params: { category_slug, product_slug } }) {
    // Add logic to fetch a single product based on `category_slug` and/or `product_slug`

    return {
        props: {
            product
        }
    };
}

で例として使用されているエントリを考えるとgetStaticPaths、次のパスにアクセスできます: /categories/orange/product/orange_juice.

于 2021-02-03T21:45:15.873 に答える