Page not found when deploying Nextjs

[luke]

Hi, @BernardA, I see your build doing nuxt build but I don’t see the nuxt export step happening as covered in the Nuxt docs here.

I think you’ll either need to use nuxt build && nuxt export or nuxt generate as the build command (depending on your Nuxt.js version). Also the publish directory should be “public” and not /public (meaning there should not be a forward slash used).

If this doesn’t work, please let us know.

[BernardA]

Hi @luke. Somehow we started with Nextjs and ended up in Nuxtjs. Very close, I know, but still not the same.
It’s Nextjs and the only command required normally is npm run build.
Locally I would also need npm run start to actually start the server, but that step is not normally needed at your end.

By the way, I attempted to deploy another Nextjs ( not Nuxtjs ) app yesterday - a much simpler one - with the same results.
Here is its URL => https://angry-hawking-9900a8.netlify.app/

I can pass you additional info on this other one. Please let me know.
Cheers

[perry]

hi @BernardA, glad we got one of your sites working at least.

For the other broken one, can you also show us a build log, package.json, build settings screenshot? thanks.

[BernardA]

Hi @perry, it seems I was not clear enough:

The new app I attempted to deploy - https://angry-hawking-9900a8.netlify.app/ - DID NOT work either. It has exactly the same issue.

So I have 2 Nextjs app that DID NOT deploy correctly.

I will provide you with the info for this new one asap.

[BernardA]

Hi @luke

Sorry it took a while. I was trying something else.

The app name now is : elegant-villani-abc3ef.netlify.app

Build logs and package.json : https://docs.google.com/document/d/1hOTFt4QunZiHo1klVLR9-LmgKI2hAeUAimTTs43PY3I/edit?usp=sharing

Build settings:

[luke]

Hi, @BernardA, the most recent build for that site was successful but doesn’t generate any HTML files. I see index.js but not index.html.

Your repo is private so I cannot test the build myself. It would be helpful to see the package.json file though. Would you be willing to post that here?

[BernardA]

Hi

I have changed the repository to public so you can now access it at:

https://github.com/BernardA/milesofwork-client

Note that I did deploy this repository successfully both at:

heroku: https://milesofwork-client.herokuapp.com/

vercel: https://milesofwork-client.vercel.app/

Best Regards

Bernard

[luke]

Hi, @BernardA.

I don’t see a way to get this site build to generate a the static site. The npm run build just results in javascript and CSS being generated.

What are the commands to get this repo to generate the the HTML, CSS, and javascript for a static version of the site?

[BernardA]

Hi,

I am new to Nextjs and this is my first deployment so I am not so sure of what is applicable.

Locally I am supposed to run next build and next start to run the production setup.

Deploying in Vercel or Heroku did not require specifying any commands as both detect the app type and handle it appropriately.

Heroku does have a special set of commands that need to be added to package.json for Nextjs apps, as you may have noticed.

Please see this docs = https://nextjs.org/docs/deployment

Regards

Bernard

[fool]

Both of those services run dynamic code in ways that we don’t. I think you should probably start reading here about best practices in using next on netlify:

2 Ways to Create Server-Rendered Routes Using Next.js and Netlify

Next.js 101: What Features You Should Know About

None of us on the support team are next.js experts (nor vercel, nor heroku experts - but I do know that their services support more types of dynamic pages than ours does with the default configurations), so hopefully one of those can give you some guidance!

[BernardA]

You should be straight forward about it.

The simple fact is that Netlify is UNABLE to deploy Nextjs applications WITHOUT LOSING FUNCTIONALITY.

That may work for simple static sites, but not for any more complex apps.

Just say as it is and keep people from losing time and resources.

[luke]

Hi, @BernardA, we are in support of the Jamstack site design philosophy which involves a move away from server-side rendering. We do not hide this nor do we hide that Netlify doesn’t support server-side rendering by default.

People workaround this using Functions but that isn’t necessarily identical to server-side rendering.

I personally wrote this support guide as this is a misconception I spend a fair amount of time explaining:

[Support Guide] Can I run a web server, HTTP listener, and/or database at Netlify?

How do I run a server/database at Netlify? We often get questions about how to run a specific backend server or database at Netlify. Examples of these types of questions include: How to I get my node HTTP listener to respond to requests? How do I start Mongo/MySQL/<insert-some-database-here> running on the server? How can I SSH into my website? We are here today to answer these questions - and the answer is: you can’t! What do you mean, I cannot run a server or database at Netlify?! …

I tried to clarify we were looking for a static version of the site’s files 18 days ago:

@luke

I don’t see a way to get this site build to generate a the [sic] static site. The npm run build just results in javascript and CSS being generated.

What are the commands to get this repo to generate the the HTML, CSS, and javascript for a static version of the site?

To summarize, there is no server-side rendering at Netlify (without a workaround using Functions) and we are transparent about this.

[jonsully]

Hey @BernardA

I’m one of the (volunteer) Community Pilots here in the Community and do have experience with Next, Heroku, Vercel, and the tooling you’re referencing.

The simple fact is that Netlify is UNABLE to deploy Nextjs applications WITHOUT LOSING FUNCTIONALITY.

That may work for simple static sites, but not for any more complex apps.

I’ll fully echo @luke’s post above about the premise and principle of JAMstack but Next.js is a complex project and offers multiple ways of ‘running’. To take bold strokes and say that any way of using Next.js is wrong, “simple”, or unsupported is to fundamentally misunderstand the flexibility of Next.js. React’s DOMServer<->Hydrate model that Next’s static-generation is built on is some of the most revolutionary stuff out there right now.

If you finish reading Luke’s guide that he linked to above, I recommend reading this thread. It’s a thorough explanation of the architectural differences in running a managed Next.js process acting as a request interop vs. using Next.js as a static site generator - both of which are valid and useful functions of Next.js that the Next.js core team is actively building. Neither is bad, and depending on how you choose to architect your application, neither “loses functionality” in any way. It’s just moving what-builds-when and what-renders-when.

Next.js ISR support

Does Netlify support Incremental static regeneration of Next.js? Do we need to have special plugins or build commands for that to work?

I hope that helps.
Elon Musk doesn’t fix internal combustion engines, but both internal combustion cars and Teslas are great

–
Jon

[BernardA]

Thanks.
Unfortunately there seems to be a huge bias in the sense that whenever one argues about Nextjs or Gatsby he/she reaches for the inevitable blog example.

Regardless of the limitations or arguing about such a limited scope ie, the blog, if one reads next-on-netlify or Nextjs docs on export there are clear caveats that are mentioned there.

So, unless a clear alternative way is pointed out, the fact remains that Netlify is not able to handle Nextjs full functionality.

[luke]

@BernardA, I’m feeling a bit like we are both saying, “Water is wet.” There isn’t any disagreement that I can see.

You wrote this:

So, unless a clear alternative way is pointed out, the fact remains that Netlify is not able to handle Nextjs full functionality.

I already agreed with that when I said this:

We do not hide this nor do we hide that Netlify doesn’t support server-side rendering by default.

People workaround this using Functions but that isn’t necessarily identical to server-side rendering.

I already agreed that we don’t handle all forms of Next.js apps and we never implied otherwise.

Is there some question or discussion you want to have about this?

[kerem]

I ended up here after a google search for “netlify nextjs deploy page not found” (something like that) and in my case, it was actually pretty straightforward to set it up.

For those searching for a solution, I added netlify.toml to my project root with content;

[build]
    command = "npm run build && npm run export"
    publish = "out"

Then add the export script to package.json;

"scripts": {
    "export": "next export"
},

Build settings for the netlify project;
Build command: npm run build && npm run export
Publish directory: out

Using @cassidoo’s blog post here https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify
Thanks for pointing that out @luke

[salimsema]

@kerem It did fix failed deployment for my nextjs web application on netlify but the page not found issue persisted when i try to visit site domain from my netlify dasboard. I have read a couple of blogs and suggestions in the community but havenot been successful.

Here is a :github repo

Thanks

[kerem]

You dont seem to have export in your netlify.toml, maybe try changing it as recommended in the post I linked above.

[salimsema]

@kerem Unfortunately It is not working out as expected even after editing netlify.toml, You can refer to my repo in my previous response.

This is the :netlify deploy log

Thanks

[luke]

Hi, @salimsema. This topic should explain the issue you are seeing in detail:

New <Image /> tag not working on Next.js

I have been using the new Image tag that has come out with the latest version of nextjs (v10.0.0) - https://nextjs.org/docs/basic-features/image-optimization. The images however do not load. The images are fetched from a headless CMS (Wordpress headless CMS). The only images that load are static ones where I have not used the new Image tag but the standard img tag. Here is a link to the website - https://infallible-pare-905b23.netlify.app. Here is the same site on Vercel where my images load fin…

​Please let us know if you have any questions after reading that topic.