你可以从 Next.js 中的 getStaticPaths() 传递非字符串对象吗？

Posted 2023-03-30

【中文标题】你可以从 Next.js 中的 getStaticPaths() 传递非字符串对象吗？

【英文标题】：Can you pass non-string objects from getStaticPaths() in Next.js?

【发布时间】：2021-01-20 02:27:28

【问题描述】：

显然，如果调用它的文件名为 [slug].js强>。

但是，我可以很方便地从 getStaticPaths() 传递整个对象，而不仅仅是传递它的 slug。

我试图在我的 [slug].js 文件中执行以下操作：

export default function Expression( expression, definitions ) 
    return <div>expression.expression</div>


// Specify possible dynamic routes to pre-render.
export async function getStaticPaths() 
    const response = await fetch('http://127.0.0.1:8000/dictionary/expressions')
    const expressions = await response.json()
    const paths = expressions.map(expression => (
        params:  expression: expression, slug: expression.slug ))
    return  paths, fallback: false 


// Fetch definitions.
export async function getStaticProps( params ) 
    const expression = params.expression
    const response = await fetch(
        `http://127.0.0.1:8000/dictionary/$expression.slug`)
    const definitions = await response.json()
    return  props:  expression, definitions  

我得到的错误来自getStaticProps() 的fetch() 调用并说：

TypeError: 无法读取未定义的属性“slug”

似乎 Next.js 拒绝了 params 中的任何不是名为“slug”的字符串的内容。有没有办法将非字符串对象从getStaticPaths() 传递给getStaticProps()？

【参考方案1】：

作为它的文件

params 包含使用动态路由的页面的路由参数。例如，如果页面名称是 [id].js ，那么 params 将类似于 id: ... 。

所以答案是否定的，您只能从您的参数访问slug。顺便说一句，你为什么不打电话给http://127.0.0.1:8000/dictionary/expressions 并与你的slug 进行比较？因为这些是在构建时执行的，它不会影响您的网站加载速度。