Access masked URLs in next.js - reactjs

Question

I have a page called "Channels", the final url should look like messages/:channelName, the following Link partially solves the problem:
<Link key={ name }
prefetch href={ `/channel?channel=${name}` }
as={`/messages/${name}`} >
Problem is, if i directly type this masked URL on the browser i get a 404, i can't refresh the page nor use the return button on the browser. I know this can be solved by creating these routes in the server and referring to the correct pages, but i'm trying to do this using only Next.js, is it possible?

Answer 1

Ofcourse you can do that by only use Next.js.
package.json
{
"name": "custom-server",
"version": "1.0.0",
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"dependencies": {
"next": "latest",
"react": "^16.7.0",
"react-dom": "^16.7.0"
}
}
server.js
const { createServer } = require('http')
const { parse } = require('url')
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(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/messages/:name') {
app.render(req, res, '/channel', query)
} else {
handle(req, res, parsedUrl)
}
}).listen(port, err => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})
channel.js
import React from "react";
export default (prop) => {
return <div>channel {prop.url.query.channel}</div>;
}