Home
Support Forums

Nextjs build on netlify

I’m unable to find any examples of what needs to be done to deploy nextjs with fallback: true enabled.

using export it throws an error that it can’t be exported this way if fallback: true is enabled.

And if I use npm run build it doesn’t seem to generate the out folder.

How can I run a build and generate the out folder with fallback: true enabled in my app

netlify.toml [build] command = “npm run build && npm run export” publish = “out”

package.json “scripts”: { “dev”: “next dev”, “build”: “next build”, “start”: “next start”, “export”: “next export” },

@relaxen159 thanks so much for letting us know! i can see how we could be more specific in our documentation while we work to improve the nextjs experience on netlify and make it seamless :).

If I use npm run build it doesn’t seem to generate the out folder.

it’s specifically the next export command that creates the out directory, not the build part. see: https://nextjs.org/docs/advanced-features/static-html-export#deployment

regarding fallback: true - have you looked into https://github.com/netlify/next-on-netlify? this is required for doing incremental static regeneration or for any nextjs server-side rendering on netlify. that said, using next-on-netlify (aka using something like fallback: true that depends on next-on-netlify) would mean you cannot use next export in your app. let me know if you have any other questions!

thanks, I have actually managed to get this working using next-on-netlify , however I have another error during deployment:
I should add this works fine in development
in pages I have about.js, it’s a very simple page so I’m not sure what is causing this error?

8:37:00 PM: > Build error occurred
8:37:00 PM: [Error: ENOENT: no such file or directory, rename ‘/opt/build/repo/.next/export/about.html’ -> ‘/opt/build/repo/.next/serverless/pages/about.html’] {
8:37:00 PM: errno: -2,
8:37:00 PM: code: ‘ENOENT’,
8:37:00 PM: syscall: ‘rename’,
8:37:00 PM: path: ‘/opt/build/repo/.next/export/about.html’,
8:37:00 PM: dest: ‘/opt/build/repo/.next/serverless/pages/about.html’
8:37:00 PM: }

about.js

const About = ({ category }) => (

<div>about</div>

)

export default About

Hey there, thanks for reaching out.

Sounds like it could be a case problem.

Can you give this a read through and let us know if that fixes the issue?

I don’t believe so as the page is called about.js and there is nothing in the component that could called a case issue?

looks like its an issue with nextjs handles the pages , my page [slug].js is conflicting with about.js

ah, yeah, if you have a [slug] at a particular route level, you won’t be able to access /about at that same route level. you can try a catch-all or optional catch-all instead. https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes