错误：动态 SSG 页面需要 getStaticPaths，并且 nextjs 中的“/category/[...Id]”缺少答案

【问题标题】：Error: getStaticPaths is required for dynamic SSG pages and is missing for '/category/[...Id]' in nextjs错误：动态 SSG 页面需要 getStaticPaths，并且 nextjs 中的“/category/[...Id]”缺少
【发布时间】：2021-10-04 10:23:05
【问题描述】：

我遇到了构建时错误，错误：动态 SSG 页面需要 getStaticPaths 并且“/category/[...Id]”缺少 getStaticPaths，如何在我的代码中使用 getStaticPaths 引用https://nextjs.org/docs/messages/invalid-getstaticpaths-value this 但是如何在我的函数中调用路径，你能解决我的问题吗

代码 [...Id].js

import { useRouter } from 'next/router'
import Head from 'next/head'
import { Grid, Image,Segment, Card } from "semantic-ui-react" 
import 'semantic-ui-css/semantic.min.css'
import Layout from '../../components/layout'


const Post = (props) => {
  const router = useRouter()
  const { Id } = router.query
  console.log(props.category_list)  
  return(
    <>
    <Layout>
    <Head>
    <meta charSet="utf-8" />
    <title></title>
            {/* <meta name="description" content={seo_description} /> */}
            <meta name="keywords" content=""/>
            <meta name="google-site-verification" content="rtIRrUNRpgZ_lFtlfS8LJ0-8j_d569BXS9NOGa_nM6Y" />
           
          </Head>  
      <Grid className="store-list">
        <Grid.Column width={16}>
          <p>
            <span>{props.category_title.heading_label}</span>
          </p>
        </Grid.Column>
      </Grid>
      <Grid columns={4} className="all-offers storeList">
        {props.category_list.map((x) => {
          return (
            <Grid.Column>
              <Segment>
                <Card>
                  <a href  ={x.store_url}>
                    {" "}
                    <Image
                      src={x.image}
                      alt=""
                      className="collection-img"
                    ></Image>
                  </a>
                  <Card.Content>
                    <a href  ={x.store_url}>
                      {" "}
                      <Card.Header>{x.name}</Card.Header>
                    </a>
                    <Card.Description>{x.store_summary}</Card.Description>
                  </Card.Content>
                  <Card.Content extra>
                    <p className="rewards">
                      <span>
                        <img src="/images/rewards.png" alt=""></img>
                      </span>
                      Cash rewards upto <span>AED {x.cashback}</span>
                    </p>
                    <p className="location">
                      <span>
                        <img src="/images/location.png" alt=""></img>
                      </span>
                      <span className="store-location" key="index">{x.store_branches}</span>
                      {/* {x.store_branches.map((locations, index) => (
                        <span className="store-location">
                          {index === 0 ? (
                            <span>{locations.store_location}</span>
                          ) : index >= 1 ? (
                            <span>
                              ,&nbsp;&nbsp;{locations.store_location}
                            </span>
                          ) : null}
                        </span>
                      ))} */}
                    </p>
                  </Card.Content>
                </Card>
              </Segment>
            </Grid.Column>
          );
        })}
      </Grid> 
      </Layout>
    </>

  )
}

export async function getStaticProps(context) {
  const id = context.params.Id[1];
  const postBody = {
    category_id: id,
    offer_type: "",
  };
  const offerList = await fetch('https://le.app.ae/api/v5/web/list',{
    method:'POST',
    body: JSON.stringify(postBody),
    headers: { "Content-Type": "application/json" },
  })
  const category = await offerList.json();
    // const bookJson = JSON.stringify(book)
    // const bookJson=offerData.stores;
  const category_list=category.stores;
  const category_title=category;
  return {
    props: {
      category_list,
      category_title
    }
  };
}
export default Post;

【问题讨论】：

我的分类链接是localhost:3000/category/26
你能帮我一个忙吗？

标签： reactjs next.js

【解决方案1】：

会尽力帮助你！

使用getStaticProps，您需要（必须）使用getStaticPath（link）

在getStaticProps 中的代码之后添加getStaticPaths 函数。 !IMPORTANT!你只在getStaticProps函数之后写你的getStaticPaths，否则会触发一些错误

export async function getStaticPaths() {
// change your API url to get ALL categories
const res = await fetch(process.env.APIpath + '/api/public/getCategories')
const posts = await res.json()

// Get the paths we want to pre-render based on posts, play with params variable you are returning
const paths = posts.map((post) => ({
  params: { id: post._id },
}))

// We'll pre-render only these paths at build time.
// { fallback: blocking } will server-render pages
// on-demand if the path doesn't exist.
return { paths, fallback: 'blocking' }
}

对于fallback，您可以检查此post，以检查可能值之间的差异。

因此，文件需要具有下一层功能：

Const Post
async function getStaticProps()
async function getStaticPaths()

【讨论】：

感谢如何在此参数中传递两个参数：{ id: post._id , name: post.name}，正确
不明白你的问题，我的代码有效吗？你用 ',' 参数分隔你的值：{ id: post._id, name: post.name },
我想在路径中传递两个参数，这是我的网址localhost:3000/store/shaandaar-restaurant/149，有两个值“shaandaar-restaurant”和149
对这类问题真的帮不上忙，你需要测试代码和console.log()变量来检查它返回的数据类型。