Create custom server for next.js dynamic routes

README.md

if we want to fetch pageId and versionId from this url: http://localhost:3001/xpm/editor/:pageId/:versionId then we need to do following things to make this happen.

install below pkg's from npm

• express
• body-parser
• esm
• next-routes

add scripts into package.json file

"scripts": {
  "dev": "NODE_ENV=development node -r esm server/index.js",
  "start": "NODE_ENV=production node -r esm server.js",
}

create index.js file inside server folder

const express = require('express')
const bodyParser = require('body-parser')
const next = require('next')
const { routes } = require('./routes')

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

app.prepare().then(() => {
  const server = express()
  server.use(bodyParser.urlencoded({ extended: false }))

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

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

create routes.js file in server folder

const nextRoutes = require('next-routes')
const definitions = require('./definitions')

export const routes = nextRoutes()
export const Link = routes.Link
export const Router = routes.Router

definitions.forEach((item, index) => {
  if (!item.page) {
    throw new TypeError(`Route Definitions ${index}: .page required`)
  }
  if (!item.urls) {
    throw new TypeError(`Route Definitions ${index}: .urls required`)
  }

  item.urls.forEach((url, index) => {
    const path = typeof url !== 'string' ? url.path : url
    const name =
      typeof url !== 'string'
        ? url.name
        : item.page + (index === 0 ? '' : `_${index}`)

    routes.add(name, path, item.page)
  })
})

and create definitions.js file inside server folder

const nextRoutes = require('next-routes')
const definitions = require('./definitions')

export const routes = nextRoutes()
export const Link = routes.Link
export const Router = routes.Router

definitions.forEach((item, index) => {
  if (!item.page) {
    throw new TypeError(`Route Definitions ${index}: .page required`)
  }
  if (!item.urls) {
    throw new TypeError(`Route Definitions ${index}: .urls required`)
  }

  item.urls.forEach((url, index) => {
    const path = typeof url !== 'string' ? url.path : url
    const name =
      typeof url !== 'string'
        ? url.name
        : item.page + (index === 0 ? '' : `_${index}`)

    routes.add(name, path, item.page)
  })
})

That's it 😊

Now modify definitions of you're roues and will able to pass data inside query params.