Nextjs dynamic routes return 404 in production but not in localhost

Question

i'm trying to learn how dynamic routes work with NextJS and the thing is that in localhost (npm run dev) works fine, but as soon as I push it to production in Netlify I get 404 error. Static pages are working, it just happends with dynamic routes. Here is an example of the code I have (is just a simple, static json to test how it works):

function ArticleListByCategory({articles}){
    
return(
    <>
    <h1>{JSON.stringify(articles)}</h1>
    </>
)
}
export default ArticleListByCategory

export async function getServerSideProps(context){
    const {params} = context
    const {category} = params
    return {
        props:{
            articles:{
                "news":[
                    {
                        "name":"article1",
                        "category":category
                    }
                ]
            }
        }
    }
}

Thanks in advance

Shahroon Farooqi · Accepted Answer · 2022-09-04 08:37:56Z

1

install@netlify/plugin-nextjs

add netlify.toml in your root directory

[build]
publish = ".next"

[[plugins]]
package = "@netlify/plugin-nextjs"

package.json

"next": "^12.1.0",
"react": "^18.2.0",

Here's a working example Nextjs SSR with netlify. https://stackblitz.com/edit/nextjs-9rssk1

Live preview https://capable-medovik-a6ec0b.netlify.app/

edited Sep 4, 2022 at 8:37

answered Aug 30, 2022 at 20:41

Shahroon Farooqi

1011 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nextjs dynamic routes return 404 in production but not in localhost

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related