Next js : On back button click page content is not loading

Question

Issue: In react + nextjs app

1. If i navigate from http://localhost:3000 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".

Link for navigation

        <div>
            Click{' '}
            <Link as={`/p/hello`} href={`/postDetails?title=hello`}>
                <a>here</a>
            </Link>
            to read more
        </div>

server.js:

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app
  .prepare()
  .then(() => {
    const server = express()
server.get('/p/:id', (req, res) => {
  const actualPage = '/postDetails'
  const queryParams = { title: req.params.id }
  app.render(req, res, actualPage, queryParams)
})

server.get('*', (req, res) => {
    //app.render(req, res, '/', queryParams)
  return handle(req, res)
})

server.listen(3000, err => {
  if (err) throw err
  console.log('> Ready on http://localhost:3000')
})
  })

  .catch(ex => {
    console.error(ex.stack)
    process.exit(1)
  })

It should load the index.js(localost:3000) content but it shows the http://localhost:3000/p/hello content.

Answer 1

This issue is definitely not about the server code. It is related to next router, i would recommend you to focus on the router.

Make sure to include the module

import Link from 'next/link';

And how about trying without the curly braces

<div>
     Click{' '}
     <Link as='/p/hello' href='/postDetails?title=hello'>
       <a>here</a>
     </Link>
     to read more
</div>

If you can't solve it, take a look at this npm module next-routes which gives different options for linking.

<Link route='postDetails' params={{title: 'hello'}}>
  <a>Hello world</a>
</Link>

https://www.npmjs.com/package/next-routes

Answer 2

We had this sort of bug in our app more than once. We found it to be caused by other code (not Links) that was touching the browser history. In one case it was via replace from useRouter() , but it was incorrectly formatted. In another, it was code that was changing the browser history directly via window.history .

I hope this helps anyone running into this sort of bug know where to look.

Answer 3

I think you might need to add a static folder where your public assets (eg html, images, js) are:

server.use(express.static('public'))

https://expressjs.com/en/starter/static-files.html