Question

很明显，如果调用它的文件名为 [slug]，则Next.js会强制您在slug内提供一个名为getStaticPaths()的 string 参数。 .js 。

但是，对于我来说，从getStaticPaths()传递整个对象而不是仅仅传递它很方便。

我正在尝试在我的 [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 } }
}

我收到的错误来自fetch()的{{1}}调用，并说：

TypeError：无法读取未定义的属性'slug'

似乎Next.js拒绝getStaticProps()内部的任何不是“ slug”字符串的东西。有没有一种方法可以将名为我想要的名称的非字符串对象从params传递到getStaticPaths()？

Answer 1

作为其文件

params包含使用动态路由的页面的路由参数。例如，如果页面名称为[id].js，则参数将看起来像{ id: ... }。

因此答案是否定的，您只能从参数中访问slug。顺便说一句，您为什么不拨通http://127.0.0.1:8000/dictionary/expressions并与您的slug进行比较？由于这些代码是在构建时执行的，因此不会影响您的网站加载速度。

您可以从Next.js中的getStaticPaths（）中传递非字符串对象吗？

1 个答案: