动态 SSG 页面需要 getStaticPaths，地址缺少

Question

我正在使用假 API 进行在线商店项目。我想要做的就是显示每个类别中的批次列表。所以我有类别组件，我希望它在我单击它时转到 lotsInCategory 页面 (lotsInCategory/[category]/index.tsx)。但是当我在类别页面（category.tsx）中单击 link 时，我看到了这个错误：

Error: getStaticPaths is required for dynamic SSG pages and is missing for '/lotsInCategory/[category]'.

这是我的文件夹结构：

这是category.tsx:

import React from 'react'

import Link from 'next/link

const Category = ({lots,category}:{lots:Array<any>,category:string}) => {
  //category is an string passed from another component
 return (
    
    <>
{/* The line below shows me the category is passed currently */}
    {console.log(category)}
    <Link href={{pathname:`/lotsInCategory/${category}`}} as={`/lotsInCategory/${category}`}>
    <div className="category">
      <div className="img-container">
    
    </div>
    <div className="title">
    {category}
    </div>
    </div>
    </Link>
    </>
  )
}
export default Category;

这是 lotsInCategory 组件(lotsInCategory/[category]/index.tsx):

import React from 'react'
import axios from 'axios'
import https from "https"
import { GetStaticPaths,GetStaticProps } from 'next';
 const LotsInCategory = ({data}:{data:Array<any>}) => {
  return (<>
{console.log(data)}
    <div>lotsInCategory</div>
</>
  )
}

axios.defaults.httpsAgent=new https.Agent({
  rejectUnauthorized:false,
})

const getStaticPaths:GetStaticPaths=async(context:any)=>{


 
  let paths:Array<any>=[]
  try{
   const response=await axios.get(`https://fakestoreapi.com/products`)
   paths=await response.data.map((el:any)=>({params:{category:el.category.toString()}}))
  
  
  }
  catch(er){
    
  }

  return{
    paths,
    fallback:true
  }

}
export const getStaticProps:GetStaticProps=async(context:any)=>{
  let data:Array<any> =[]
  try{
    const response= await axios.get(`https://fakestoreapi.com/products/category/${context.params.category}`)
    data=response.data
    alert("x")
  }
  catch(er:any){

  }
  return{
    props:{data},
    revalidate:2
  }
}
export default LotsInCategory

而且我不想尽可能使用getServersideProps！

Answer 1

您需要 export 您的 getStaticPaths 功能。另外 getStaticPaths 函数不接受任何参数：

For TypeScript, you can use the GetStaticPaths type from next:

import { GetStaticPaths } from 'next'

export const getStaticPaths: GetStaticPaths = async () => {
  // ...
}

动态 SSG 页面需要 getStaticPaths，地址缺少

getStaticPaths is required for dynamic SSG pages and is missing for the address

reactjs

axios

next.js