How to create dynamic routes that start with a specific character in Next.js? - next.js

Question

I want to create routes that start with # symbol how should I structure the pages folder?
first I tried to create a folder with # as its name however it will create routes that proceed with # like www.example.com/#/something. I even tried [#topic] and #[topic] names for folders but it does not work as expected.
I want to have routes like:
www.example.com/#computer
www.example.com/#music
www.example.com/#programming
how can I approach the problem?
My Next.js version is 9.2.1

Answer 1

If you don't want to have a custom server, try rewrites and some regex. Next.js uses path-to-regexp under the hood.
async rewrites() {
return [
{
source: '/:userId(#[a-zA-Z0-9]+)/:id*',
destination: "/user/:userId/:id*",
}
]
}
You still will have to sprinkle
<Link href="/user/[userId]" as=`#${userId}`/>
as mentioned by other posters.

Answer 2

You should just change the as prop of the Link component adding the # symbol in the place you need it.
For example, if you keep you routes/structure like the example for dynamic routing provided by Next.js, changing the index.js under pages/post/[id]/ to the following:
import { useRouter } from 'next/router'
import Link from 'next/link'
import Header from '../../../components/header'
const Post = () => {
const router = useRouter()
const { id } = router.query
return (
<>
<Header />
<h1>Post: {id}</h1>
<ul>
<li>
<Link
href="/post/[id]/[comment]"
as={`/post/#${id}/first-comment`}>
<a>First comment</a>
</Link>
</li>
</ul>
</>
)
}
export default Post
will give you a URL like this: http://localhost:3000/post/#first/first-comment
I hope this helps you find your way.

Answer 3

As #Nico mentioned, We can approach the solution with inspiring from custom-server example in Next.js repo.
Page's structure will be like this: page->[topic]
We need to check inside server.js for any incoming request with URL that starts with # symbol, to do so we'll get help regular expressions inside express.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()
// this will match all the URLs that start with #
// e.g. #computer, #hello
server.get('/#*', (req, res) => {
return app.render(req, res, '/[topic]', req.query)
})
server.all('*', (req, res) => {
return handle(req, res)
})
server.listen(port, err => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})
This simply coordinates requests that start with # to [topic] component as before as handling other routes.
Inside component for client-side it is as simple as this:
<Link href="/[topic]" as=`#${topicString}`/>
You can get topicString in different ways like using query inside getInitialProps