Intente usar reescrituras y algunas expresiones regulares. Next.js usa path-to-regexp bajo el capó.

 async rewrites() { return [ { source: '/:userId(@[a-zA-Z0-9]+)/:id*', destination: "/user/:userId/:id*", } ] }

En el lado del cliente, use next/link :

 <Link href={`@${userId}`}> <a>user</a> </Link>

En su backend, cuando maneje usuarios, coloque la @ en los nombres de usuario de los usuarios. Luego, simplemente trate los nombres de usuario como si fueran slugs de texto sin formato. Esto funciona porque @ está permitido en las URL, al igual que a , b o c .

Ejemplo de trabajo en StackBlitz .

pages/index.js :

 import Link from 'next/link' const username = '@foobar' // hardcoded example username, this will be recieved from your backend export default function Index() { return ( <Link href={username}> <a>{username}</a> </Link> ) }

pages/[username].js :

 import { useRouter } from 'next/router' export default function Username() { const router = useRouter() const { username } = router.query return <h1>User: {username}</h1> }