Navigation issue with Browser Back Button Click

[ninjawhocodes]

Issue :

1. From http://localhost:3000 navigate to http://localhost:3000/p/hello using Link.
2. Refresh the page.
3. Click back button : It goes to http://localhost:3000 but still renders the content of http://localhost:3000/p/hello it is not loading the content of http://localhost:3000.

I am using "next": "^8.1.0".

[nblthree]

@ninjawhocodes I can't reproduce the problem, can you post a reproduction repo and the version of your browser

[timneutkens]

Thanks @MarchWorks

[ninjawhocodes]

https://github.com/ninjawhocodes/react-with-next

I have upload the code on above repo.

Steps to reproduce the issue :

1. npm install.
2. npm run dev.
3. Once page is up click on "here".
   4 . You will be on "http://localhost:3000/p/hello"
4. Do a refresh from browser.
   6 Click browser back button.
5. It will go back to "http://localhost:3000" but it will still show the content of "http://localhost:3000/p/hello".

Aftet Clicking Back

[ninjawhocodes]

@ninjawhocodes I can't reproduce the problem, can you post a reproduction repo and the version of your browser

#7091 (comment)
I have uploaded the code on above and sharing the details in below in fresh comment. Please suggest if this issue can be fixed by doing some workaround.

[nblthree]

@timneutkens there is an issue caused by importing css files. I will open a new issue with what I found

[ninjawhocodes]

@timneutkens there is an issue caused by importing css files. I will open a new issue with what I found

okay so for time being could you please suggest a workaround ?

[nblthree]

@ninjawhocodes use styled-jsx https://github.com/zeit/next.js#built-in-css-support
or import an empty css file or even the same file that you have imported in your index page in all your pages

[nblthree]

@ninjawhocodes personally I will recommend you to use styled-jsx but if you want to use css file then make sure that you are importing one in every page it can be the same or a different one it doesn't matter

[ninjawhocodes]

@ninjawhocodes personally I will recommend you to use styled-jsx but if you want to use css file then make sure that you are importing one in every page it can be the same or a different one it doesn't matter

Yeah, I have to add style.css for each page then only it will work.

[nblthree]

@ninjawhocodes you should also know that if you import b.css in b.js and a.css in a.js and you go from a.js page to b.js page you will have a.css loaded in b.js too

[iMerica]

New distinct issue that occurs even without a page refresh: #9989

[zachwhitedev]

Every time I hit the back button on mobile the site I'm working on loads the page for a second but then the whole page goes blank, and I get the message "An unexpected error occurred."

Only happens in mobile (on both Chrome and Safari) but not on desktop.

My code:

To reproduce it you just visit the site on mobile and then hit the back button on your browser.