CODEWITHSUNDEEP
next.js
nerrood
nerrood

Reputation: 59

getStaticPaths not creating paths on production

I'm trying to connect WordPress and next.js and everything works ok on dev but I have one issue with the production version.

I have a page that shows all posts and after adding a new post in WP I can see this newly added post but when I'm trying to open the link I'm getting 404. I'm sure that this problem is caused by getStaticPaths.

That's how my slug page looks like

import {getAllPost, getPostBySlug} from "../../lib/api";

const PostPage = ({post}) => {
    return (
        <div className="container">
            <h1>{post.title}</h1>
            <div dangerouslySetInnerHTML={{__html: post.content}}/>
        </div>
    )
}

export const getStaticProps = async (ctx) => {

    const {slug} = ctx.params
    const post = await getPostBySlug(slug)

    return {
        props: {
            post
        },
        revalidate: 10
    }
}

export const getStaticPaths = async () => {
    const posts = await getAllPost()

    const paths = posts.map(post => ({
        params: {slug: post.slug}
    }))

    return {
        paths,
        fallback: false
    }
}

export default PostPage

The getAllPost() function in getStaticPaths() returns array of objects which contains post title and slug.

Upvotes: 1

Views: 1590

Answers (1)

Jirka Svoboda
Jirka Svoboda

Reputation: 418

You are using fallback: false in your static paths which means that only paths (in your case posts) available during build time can be statically generated. So no other post page will be ever shown.

To be able to show newly added post after you deploy your project use fallback: true.

Upvotes: 3

Related Questions