Можете ли вы передать нестроковые объекты из getStaticPaths () в Next.js?

Question

Очевидно, Next.js заставляет вас предоставить строковый параметр с именем slug внутри getStaticPaths()если файл, из которого он вызывается, называется [slug].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() зов getStaticProps() и говорит:

TypeError: не удается прочитать заголовок свойства undefined

Кажется, что Next.js все отвергает внутри paramsэто не строка с названием "slug". Есть ли способ передать нестроковые объекты с именами, которые я хочу от getStaticPaths() к getStaticProps()?

Answer 1

Как его документы

paramsсодержит параметры маршрута для страниц, использующих динамические маршруты. Например, если имя страницы [id].js, тогда параметры будут выглядеть как { id: ... }.

Итак, ответ - нет, вы можете получить доступ только slugиз ваших параметров. Кстати, почему бы тебе не позвонить http://127.0.0.1:8000/dictionary/expressions и сравнил с вашим slug? Поскольку они выполняются во время сборки, это не повлияет на скорость загрузки вашего сайта.