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!