Passing Multiple Parameters to Next.js Custom URL using Express server

Question

I followed this example from Next.js on how to create Server Side Support for Clean URLs but the example only support passing one parameter

Everything worked pretty fine, i also found this on github on how to add multiple parameters to Next.js route.

server.get('/question/:id/:subject', (req, res) => {
  const actualPage = '/question'
  const mergedQuery = Object.assign({}, req.query, req.params)
app.render(req, res, actualPage, mergedQuery)})

The Link from component looks like this

 {question}

This also worked fine. My challenge is that, when i try to mask the url as shown below, i got 404 page, when i refresh page.

server.get('/q/:id/:subject', (req, res) => {
  const actualPage = '/question'
  const mergedQuery = Object.assign({}, req.query, req.params)
app.render(req, res, actualPage, mergedQuery)})

Link in component

 {question}

user_3904066 · Answer

After toiling on google and playing around with the code for hours, this fix allows me to pass multiple parameters to Next.js url and on page refresh app still load correctly.

{question}

Passing Multiple Parameters to Next.js Custom URL using Express server

1 Answers