如何在 getStaticProps 中获取 slug 值以调用 api，参数为 slug

Posted 2023-03-30

【中文标题】如何在 getStaticProps 中获取 slug 值以调用 api，参数为 slug

【英文标题】：How to get slug value in getStaticProps to call api with parameter as slug

【发布时间】：2021-09-09 03:07:25

【问题描述】：

页面内容：

import  useRouter  from "next/router";
    
export default function Gunluk( data ) 
    let router = useRouter()
    
    const  slug  = router.query;
    return slug;

并显示在页面上 60d6180ea9284106a4fd8441（网址中的 https://.../gunluk/60d6180ea9284106a4fd8441 id）

所以我可以获取 ID，但我不知道如何将其传递给 API。

export async function getStaticProps(context) 
    const res = await fetch(`http://localhost:3000/api/books-i-have`)
    const data = await res.json()
    
    if (!data) 
        return 
            notFound: true,
        
    
    
    return 
        props:  data , // will be passed to the page component as props
    

我通常使用它，但它在 slug 中不起作用。我尝试了其他两种方法，但都失败了 (https://nextjs.org/docs/basic-features/data-fetching)。

简而言之，如何从 Slug 页面连接到 API？

文件目录：

    pages/
        gunluk/
            [...slug].js
            index.js

【问题讨论】：

上下文参数是一个对象，其中包含参数键，它将具有您的 slug 值，您可以使用该值进行 API 调用。我已经用代码发布了答案

【参考方案1】：

你可以在getStaticProps中获取slug的值，用它来调用基于slug的api

export async function getStaticPaths() 
    const idList = await fetchAllIds();
    const paths = [];
    idList.forEach((id) =>  paths.push(`/gunluk/$id`) )
    return  paths, fallback: true ;


export async function getStaticProps( params ) 
    const  slug  = params;

    try 
        const data = await fetchGunluk(slug);
        return data ?  props:  data   :  notFound: true ;
     catch (error) 
        console.error(error);
        return  notFound: true ;
    

【讨论】：

当我添加它时它返回 服务器错误错误：getStaticPaths 是动态 SSG 页面所必需的，而“/gunluk/[...slug]”缺少。阅读更多：nextjs.org/docs/messages/invalid-getstaticpaths-value

你能给getStaticPaths()举个例子吗

我添加了 getStaticPath 示例供您参考

【参考方案2】：

我相信您正在寻找的是getStaticPaths