Page not found when deploying Nextjs

Building is successful but page not found is thrown when attempting to access URL:

Site name is : https://adoring-mayer-cee15b.netlify.app

Note that I also attempted to deploy it on Vercel and it did work over there from the same Github repository.

I also reviewed the ( many ) posts on similar issue on this forum.

Attempting to change the build directory ( /public ) did nothing to resolve the issue.

Hi there,

I know you said you’d already done some reading, but did you see this guide yet? This is the best place to start for “Page Not Found” issues.

If you are still seeing issues after following the troubleshooting steps in this guide, please let us know!

99% of cases this is a config issue - usually that you are not telling us to where to find your first index.html page. If you pop a screenshot with your build settings, we can likely figure this out if you aren’t able to.

Thanks, but I read that too. Sorry I failed to mention it.

I’ve also downloaded the file and inspected it. What I found is that - like on my local build - Nextjs does not seem to populate /public with an index file at all.

Everything seems to be handled by the .next folder. I just confirmed that - that no index file exists on /public - by building another Nextjs app I have on localhost.

So, it would seem that somehow your setup is not suitable for Nextjs. As said, it works on Vercel without a hitch.

hmm, people definitely deploy nextjs apps without problems on Netlify :thinking:

Can you post a screenshot of your build settings and also your package.json please?

Do you have a recent deploy log we can look at as well?

Note that for the build settings I tried both with and without /public as publish directory.

Here it goes:

package.json

{
“name”: “next-app”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”
},
“dependencies”: {
@material-ui/core”: “^4.10.2”,
@material-ui/icons”: “^4.9.1”,
@material-ui/lab”: “^4.0.0-alpha.56”,
“axios”: “^0.19.2”,
“babel-eslint”: “^10.1.0”,
“classnames”: “^2.2.6”,
“clsx”: “^1.1.1”,
“eslint-plugin-flowtype”: “^5.1.3”,
“localforage”: “^1.7.4”,
“mui-datatables”: “^3.1.4”,
“next”: “^9.4.5-canary.43”,
“next-images”: “^1.4.0”,
“next-redux-saga”: “^4.1.2”,
“next-redux-wrapper”: “^6.0.2”,
“pdf-viewer-reactjs”: “^2.0.7”,
“prop-types”: “^15.7.2”,
“react”: “16.13.1”,
“react-cookie”: “^4.0.3”,
“react-device-detect”: “^1.13.1”,
“react-dnd”: “^7.3.0”,
“react-dom”: “16.13.1”,
“react-geocode”: “^0.2.1”,
“react-html-parser”: “^2.0.2”,
“react-image-crop”: “^8.6.4”,
“react-images”: “^1.1.7”,
“react-lazyload”: “^2.6.8”,
“react-paginate”: “^6.3.2”,
“react-quill”: “^1.3.5”,
“react-redux”: “^7.2.0”,
“react-social-login”: “^3.4.7”,
“redux”: “^4.0.5”,
“redux-devtools-extension”: “^2.13.8”,
“redux-form”: “^8.3.6”,
“redux-saga”: “^1.1.3”,
“sass”: “^1.26.8”
},
“devDependencies”: {
“chokidar”: “^3.4.0”,
“eslint”: “^7.2.0”,
“eslint-config-airbnb”: “^18.2.0”,
“eslint-config-prettier”: “^6.11.0”,
“eslint-plugin-import”: “^2.21.2”,
“eslint-plugin-jsx-a11y”: “^6.3.1”,
“eslint-plugin-react”: “^7.20.0”,
“eslint-plugin-react-hooks”: “^4.0.0”
}
}

It did not accept me posting the logs here directly. Hope you are able to access the link below:

https://drive.google.com/file/d/1gx06Gbo-mbrbfqrDBWCVXfWffczb2ZoQ/view?usp=sharing

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.

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

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.

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.

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:

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?

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

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?

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

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:


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!

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.

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:

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

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

Hey @BernardA :wave:t2:

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.

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


Jon

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.