In my nextjs app I have profile pages. I want the routing to be like this:
/@username
That's why I have used this file format:
@[username].js
But this is not working. Is there any other way to accomplish this?
Add a comment
|
1 Answer
You'll have to add it under a page something like this:
pages/user/[username].js
Any route like /user/@john, /user/@mark, etc. will be matched by pages/user/[username].js. The matched path parameter will be sent as a query parameter to the page.
You'll have access to the query object as
{ "username": "@john" }
[username].js
export default function User(props) {
return (
<div>
<h1>Username: {props.url.query.username} </h1>
<pre>{JSON.stringify(props, null, 2)}</pre>
</div>
);
}
eg: Codesandbox
Hope this helps !
