时间戳

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

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

问题描述

我遇到了构建时错误，错误：动态 SSG 页面需要 getStaticPaths 并且缺少 '/category/[...Id]'，我如何在引用的代码中使用 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;

标签： reactjsnext.js

解决方案

会尽力帮助你！

与getStaticProps您需要（有义务）使用getStaticPath（链接）

在getStaticProps添加getStaticPaths函数中的代码之后。！重要的！你getStaticPaths只写你的 aftergetStaticProps函数，否则它会触发一些错误

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，您可以查看这篇文章，以检查可能值之间的差异。

因此，文件需要具有下一个功能层次结构：

  1. Const Post
  2. async function getStaticProps()
  3. async function getStaticPaths()

推荐阅读