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

【问题标题】：Can you pass non-string objects from getStaticPaths() in Next.js?你可以从 Next.js 中的 getStaticPaths() 传递非字符串对象吗？
【发布时间】：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()？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

作为它的文件

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

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

【讨论】：