NextJS Site is blank

Support
, ,
1

Hey! I’m migrating a CRA app to Next.js. I think I’ve done everything correctly and my site builds, but when I preview it - there’s nothing. Just a blank page. After looking around on the support forums I’ve seen this is commonly due to JS and CSS not being loaded - which is true. Static pages in my site render HTML, but nothing else. I’ve got an error in the console that reads :

GET https://62df62057e4ef624c04eb3a9--vbvf-next.netlify.app/%PUBLIC_URL%/manifest.json net::ERR_HTTP2_PROTOCOL_ERROR

URL to live site: https://62df5dbe38e0810008cd5a40--vbvf-next.netlify.app/
Logs URL: Netlify App

Screen shot of build settings:

Screen Shot 2022-07-25 at 10.49.35 PM
Screen Shot 2022-07-25 at 10.49.35 PM919×431 24.1 KB

And here’s a link to the Github: GitHub - Code-VBVF/vbvf_next at next-migration

Thanks in advance for the help!

2

Okay! I’ve found a few things and I’m much farther along in solving my problem now than I used to be.

  • Since I migrated this site from Create React App (CRA), i had an index.html file in my public folder. That needed to be removed - it was intercepting the home page I think.
  • I also had a _redirect file in the public folder that needed to be deleted
  • I turned off asset optimization and the JS and CSS came through perfectly.

I’m not totally in the clear however. I have an SSR page(/livestream) that’s giving me a 500. Not sure why that’s happening. I’ll be looking into that now.

I hope someone can find this answer helpful :hugs:

3

Hi @mwp,

Thanks for reaching out!

I’m not seeing a 500 when visiting https://vbvf-next.netlify.app/livestream are you still having that issue?

If you’re still having issues, could you provide the steps to reproduce?

4

Hey Melvin!

Thanks for the follow up. I’m pretty certain that the problem with the SSR pages was that I was using a useState hook to create a state variable. I gave that state the default value of the props being sent to the page from Next.js 's getServerSideProps(). I think that operation was a little too slow (useState hooks are async). I was rendering content based on the value of the state. So I opted to just use the props themselves rather than create an unnecessary state variable. This cleared it up just fine.

Thanks again for the follow-up!

5

Hey there, @mwp :wave:

Thanks so much for coming back and sharing your solution! This will definitely be helpful for future Forums members who encounter something similar.

Happy coding :tada:

6

after deploying my site shows a blank screen. The web console shows the javascript cant load. Then I removed the index.html file and redeployed it. After that solved my problem.
( next js default boilerplate does not have an index.html file in the public folder. but I get the free next js dashboard template. that template has an index.html file )

7

Hi thanks for sharing this solution with the community.