Recibo este error "Error: getStaticPaths is required for dynamic SSG pages and is missing for 'xxx'" cuando intento crear mi página en NextJS.
No quiero generar ninguna página estática en tiempo de compilación. Entonces, ¿por qué necesito crear una función 'getStaticPaths' ?
Si está creando una página dinámica, por ejemplo: product/[slug].tsx , incluso si no desea crear ninguna página en el momento de la compilación, debe crear un método getStaticPaths para establecer la propiedad fallback y dejar que NextJS sepa qué hacer. cuando la página que está tratando de obtener no existe.
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 hace principalmente dos cosas:
Indique qué rutas deben crearse en el momento de la compilación (devolviendo una matriz de paths )
Indique qué hacer cuando una página determinada, por ejemplo: "producto/miProducto123" no existe en el caché de fallback (devolviendo un tipo de respaldo)
Enrutamiento dinámico Siguiente Js
páginas/usuarios/[id].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 Usersi está utilizando getStaticPaths , le está diciendo a next.js que desea generar previamente esa página. Sin embargo, dado que lo usó dentro de una página dinámica, next.js no sabe de antemano cuántas páginas tiene que crear.
con getStaticPaths , buscamos la base de datos. Si estamos representando blogs, buscamos la base de datos para decidir cuántos blogs tenemos, cuál sería idOfBlogPost y luego, en función de esta información, getStaticPath páginas.
además, getStaticProps no se ejecuta solo durante el tiempo de compilación. Si agrega revalidate:numberOfSeconds , next.js recreará una nueva página con datos nuevos después del tiempo de "numberOfSeconds".
Para representar una ruta dinámica, use getServerSideProps() en lugar de getStaticProps()
Por ejemplo:
export async function getServerSideProps({ locale, }: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Record<string, unknown>>> { return { props: { ...(await serverSideTranslations(locale || 'de', ['common', 'employees'], nextI18nextConfig)), }, } }