Blank page showing up for Next.js deployment

Site name: https://chimerical-fudge-9e7f81.netlify.app/

Hiya, sorry you are having trouble with your build.

This Support Guide contains a ton of useful debugging tips that can likely help you solve your problem :slight_smile: Additionally, this Support Guide houses all of our resources for debugging build and deploy issues.

We also recommend trying to search the forums with the build error you encountered - it’s likely your question was already asked by someone else!

If you are still having problems, please provide as much information as you can on what you have already tried, your project repo, what your build settings are, your package.json, etc. Thanks!

Hi Hillary!

I followed the instruction but am still running into errors. Locally when I run ‘next build’ followed by ‘npm start’ or ‘npm run start’ it works fine. However, when I run ‘next start’ it breaks. How can I find out which command is being run on Netlify?

Also, here is the package.json

{
  "name": "founders",
  "author": "Tony Stark",
  "licence": "MIT",
  "version": "2.0.0",
  "private": false,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "next lint",
    "lint-fix": "next lint --fix"
  },
  "dependencies": {
    "@emotion/cache": "^11.5.0",
    "@emotion/react": "^11.5.0",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.5",
    "@mui/lab": "^5.0.0-alpha.53",
    "@mui/material": "^5.0.6",
    "@mui/styles": "^5.0.2",
    "array-unique": "^0.3.2",
    "chart.js": "^3.5.1",
    "date-fns": "^2.25.0",
    "formik": "^2.1.5",
    "history": "^5.0.0",
    "next": "^12.0.3-canary.7",
    "nprogress": "^0.2.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-chartjs-2": "^3.0.4",
    "react-dom": "^17.0.2",
    "react-perfect-scrollbar": "^1.5.8",
    "uuid": "^8.3.0",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-next": "12.0.3-canary.7"
  }
}

Based on the screenshot you’ve provided the command being run on Netlify is npm run build, which aligns to the scripts.build definition in your package.json, thus it should be next build.

You can check your build log to confirm this.

Thanks for the quick response @nathanmartin. I was wondering command was run after the build - after locally building as recommended, I run npm run start. What runs on netlify?

Nothing runs, the files that are in your Publish directory (in this case .next) are deployed to the CDN.

Netlify doesn’t provide a long-running node.js related service, so there’s no need to run something like next start to start a server.

Ahh thanks! @nathanmartin

Do you know what else might be causing nothing to show up?

Checking the console I see the following errors:

If you view source you can see:

I’m not a next.js user myself so my knowledge is limited, and it may not be the only problem, but it’s certainly a problem that whatever %PUBLIC_URL% is, isn’t being replaced.

Fixed that. But still getting a blank page

Excellent! Then you’ll just need to debug your application like usual.

Check what you see locally, determine if it’s different from on Netlify.

For example, locally run npm run build, then see what is in your .next folder (which is what you’re telling Netlify to upload).

You could for example do a npx serve .next to run a different server and see what it displays when loading the files in that folder.

What does that entail? After running npm run build and npx serve .next, I see the contents of the .next folder on the page. What am I comparing this to?

@hamster That’s just showing that if a regular web server were to serve the files from your .next folder that there is seemingly no index.html file… which is why it’s displaying a directory listing.

Something that I just discovered, which may point you in the right direction is that if you navigate to any sub-url, for example:

https://chimerical-fudge-9e7f81.netlify.app/literally-anything

Then click on the Go back to the dashboard button, your app loads.

Do you have some redirects in place?

Oh wow that’s so interesting!

The /literally-anything path works because that’s using SSR:

But your home page is being exported as static HTML (as logged in your build logs). So that’s the code that you’re somehow generating and is not being handled by Netlify.

When I checked, your home page is having no JavaScript. It’s not having any <script> tags, thus the page is not being “hydrated”. The SSR pages on the other hand are sending JavaScript along with them, and once the page loads, the JavaScript is able to take care of routing it back to your home page.

Hi @hrishikesh. I added two script tags, one to HEAD and one to BODY, with console.log statements. The page is still rendering blank

Hey @hamster,

This just shows that Netlify is building your page correctly. What do you get in your index.html when you run npm run build locally?

When I run npm run build locally, several files change within .next. I cannot find an index.html file within that. Anything I should look for? @hrishikesh

Yup! This is the /index.html file that you are deploying on Netlify - do you see this content anywhere after you build?

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" />
  <title>Founders</title>
  <script type="text/javascript">console.log('Hello Head')</script>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script type="text/javascript">console.log('Hello Body')</script>
</body>
</html>

(I can see the javascript console saying “Hello Head” and “Hello Body” when I visit your site, so this seems to line up - what we are loading matches what we deployed anyway.)

Hi @fool! After I build, no additional index.html file is created. Also, I tried searching the entire directory for and there is only one instance of it (in the existing file)

Hey @hamster,

Would it be possible for you to share your repo with: nickytonline (Nick Taylor) · GitHub so they can have a look at what could be happening?