Установить и получить параметры URL в Next.js

Question

Я хочу знать, как прикрепить идентификатор, например, в конце URL-адреса в Next.js и как получить его на целевой странице, как это ...

<Link href={`/about/${id}`}><a>About</a></Link>

Чтобы быть таким ...

/about/256983649012

А затем найдите его на странице about.

Как я могу это сделать?

И имейте в виду, что я уже знаю об этом подходе ...

<Link href={{ pathname: 'about', query: { id: id }}}><a>About</a></Link>

Но я не очень хочу, чтобы ссылка была такой about?id=256983649012

Answer 1

Вам нужно определить этот идентификатор внутри server.js / app.js (здесь я использую Express):

server.js / app.js

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

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
  .then(() => {
    const server = express()

    server.get('/about/:id', (req, res) => {
      return app.render(req, res, '/about', { id: req.params.id })
    })

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

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

Тогда на вашей странице about:

About.js

import React, { Component } from 'react'

export default class extends Component {
  static getInitialProps ({ query: { id } }) {
    return { aboutId: id }
  }

  render () {
    return <div>
      <h1>About #{this.props.aboutId}</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  }
}

Полный пример: здесь