Error: getStaticPaths is required for dynamic SSG pages and is missing for "xxx". NextJS
Solution 1
If you are creating a dynamic page eg: product/[slug].tsx
then even if you don't want to create any page on build time you need to create a getStaticPaths
method to set the fallback
property and let NextJS know what to do when the page you are trying to get doesn't exist.
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
does mainly two things:
-
Indicate which paths should be created on build time (returning a
paths
array) -
Indicate what to do when a certain page eg: "product/myProduct123" doesn't exist in the NextJS Cache (returning a
fallback
type)
Solution 2
Dynamic Routing Next Js
pages/users/[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 User
Solution 3
For rendering dynamic route use getServerSideProps()
instead of getStaticProps()
For Example:
export async function getServerSideProps({
locale,
}: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Record<string, unknown>>> {
return {
props: {
...(await serverSideTranslations(locale || 'de', ['common', 'employees'], nextI18nextConfig)),
},
}
}
Solution 4
if you are using getStaticPaths
, you are telling next.js that you want to pregenerate that page. However since you used it inside a dynamic page, next.js does not know in advance how many pages it has to create.
with getStaticPaths
, we fetch the database. If we are rendering blogs, we fetch the database to decide how many blogs we have, what would be idOfBlogPost
and then based on this information, getStaticPath
will pre-generate pages.
also, getStaticProps
does not run only during the build time. If you add revalidate:numberOfSeconds
, next.js will recreate new page with fresh data after "numberOfSeconds" time.
Juanma Menendez
Senior Front End Developer with over 9 years of experience in software development. Advanced experience in JavaScript, Typescript, ReactJS, Apollo GraphQL, CSS, HTML, SEO, Web Optimization, Jest, React-Testing-Library, Puppeteer, Responsive Web Design, Cross-browser compatibility, Accessibility, NodeJS, OOP and Functional Programming. Familiar with VueJS, Angular and common practices like Scrum, Git, Continuous Integration and Testing.
Updated on December 21, 2021Comments
-
Juanma Menendez over 2 years
I am getting this error
"Error: getStaticPaths is required for dynamic SSG pages and is missing for 'xxx'"
when I try to create my page in NextJS.I don't want to generate any static page on build time. So why do I need to create a
'getStaticPaths'
function?