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

Question

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

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

Answer 1

Если вы создаете динамическую страницу, например: product/[slug].tsx тогда, даже если вы не хотите создавать какую-либо страницу во время сборки, вам нужно создать метод для установки свойства и позволить 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 тип)

Answer 2

Динамическая маршрутизация 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

Answer 3

Для рендеринга динамического маршрута используйте getServerSideProps() вместо getStaticProps()

Например:

      export async function getServerSideProps({
locale,
}: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Record<string, unknown>>> {

return {
    props: {
        ...(await serverSideTranslations(locale || 'de', ['common', 'employees'], nextI18nextConfig)),
    },
  }
}

Вы также можете проверить здесь

Answer 4

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

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

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

Answer 5

С динамической маршрутизацией

      export const getStaticPaths = async () => {  
  return {
    paths: [], //indicates that no page needs be created at build time
    fallback: 'blocking' //indicates the type of fallback
 }
}

export const getStaticProps = async ({ params }) => {
  const { slug } = params
  
  const res = await fetch(process.env.baseUrl+'/api/getPost/'+slug)
  const json = await res.json()  
  return { props:{post: json.post}}
  
}

Answer 6

Я получил ту же ошибку, когда пытался использовать getStaticProps для своего проекта next.js. этот сработал для меня.

         export default function componentName(props) {
return(
<div></div>
)

 export async function getStaticPaths(ctx) {
    
    
    
        return {
            paths: [], //indicates that no page needs be created at build time
            fallback: 'blocking' //indicates the type of fallback
        }
    }

export async function getStaticProps(ctx) {
//-----------api call ------------
}

Answer 7

Вы визуализируете динамический маршрут, поэтому используйте getServerSideProps() вместо getStaticProps().