You're using Next.js, so the correct way to achieve this is via Next.js's routing system. This is done with a folder structure. Yours would look something like this:

/pages/   (this is provided by Next.js)
-- /about/  
---- [id].js
index.js   (homepage, provided by Next.js)

This would allow you to achieve /about/256983649012, where the id parameter is 256983649012. All the logic for your page goes into [id].js.

The documentation on Next.js is really good. Take a look here for further reading on routing:


You need to define that id inside server.js / app.js (I'm using Express in here):


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()

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

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

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

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

Then in your about page:


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>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.

Complete example: here

Related Query

More Query from same tag