Ошибка: getStaticPaths требуется для динамических страниц SSG и отсутствует для xxx. NextJS

Я получаю эту ошибку "Error: getStaticPaths is required for dynamic SSG pages and is missing for 'xxx'", когда пытаюсь создать свою страницу в NextJS.

Я не хочу создавать статические страницы во время сборки. Так зачем мне создавать 'getStaticPaths' функцию?


reactjs next.js server-side-rendering ssg static-site
person Juanma Menendez    schedule 18.01.2021    source источник

Ответы (3)


arrow_upward
12
arrow_downward

Если вы создаете динамическую страницу, например: product/[slug].tsx, тогда, даже если вы не хотите создавать какую-либо страницу во время сборки, вам необходимо создать метод getStaticPaths, чтобы установить свойство fallback и позволить NextJS знать, что делать, когда страница, которую вы пытаетесь получить не существует.

export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {

    return {
        paths: [], //indicates that no page needs be created at build time
        fallback: 'blocking' //indicates the type of fallback
    }
}

getStaticPaths в основном выполняет две функции:

  • Укажите, какие пути должны быть созданы во время сборки (возвращая массив paths)

  • Укажите, что делать, если определенная страница, например: product / myProduct123 не существует в кэше NextJS (возвращает тип fallback)

person Juanma Menendez    schedule 18.01.2021

arrow_upward
5
arrow_downward

Динамическая маршрутизация Next Js

страницы / пользователи / [идентификатор] .js

import React from 'react'

const User = ({ user }) => {
  return (
    <div className="row">
      <div className="col-md-6 offset-md-3">
        <div className="card">
          <div className="card-body text-center">
            <h3>{user.name}</h3>
            <p>Email: {user.email} </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const users = await res.json()

  const paths = users.map((user) => ({
    params: { id: user.id.toString() },
  }))

  return { paths, fallback: false }
}


export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`)
  const user = await res.json()

  return { props: { user } }
}

export default User
person Felipe Corredor    schedule 09.02.2021

arrow_upward
0
arrow_downward

если вы используете getStaticPaths, вы сообщаете next.js, что хотите предварительно сгенерировать эту страницу. Однако, поскольку вы использовали его внутри динамической страницы, next.js заранее не знает, сколько страниц он должен создать.

с getStaticPaths мы получаем базу данных. Если мы визуализируем блоги, мы получаем базу данных, чтобы решить, сколько у нас блогов, какими должны быть idOfBlogPost, а затем на основе этой информации getStaticPath предварительно сгенерирует страницы.

кроме того, getStaticProps не запускается только во время сборки. Если вы добавите revalidate:numberOfSeconds, next.js воссоздаст новую страницу со свежими данными по прошествии numberOfSeconds.

person Yilmaz    schedule 07.03.2021