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

 <Link as={`/question?id=${questionId}&subject=${subject}`} href={`/question?id=${questionId}&subject=${subject}`} ><a>{question}</a></Link>

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

 <Link as={`/q?id=${questionId}&subject=${subject}`} href={`/question?id=${questionId}&subject=${subject}`} ><a>{question}</a></Link>

Seunope · Accepted Answer · 2018-11-17 09:59:03Z

4

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.

<Link as={`/q/${questionId}/${subject}`} href={`/question?id=${questionId}&subject=${subject}`} ><a>{question}</a></Link>

answered Nov 17, 2018 at 9:59

Seunope

4,8032 gold badges26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related