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

Answer 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/