CODEWITHSUNDEEP
reactjsnext.js
Ellie G
Ellie G

Reputation: 259

NextJS - Link to shortened url

I want the profile url to be '/p/username' but I still want the folder in pages to be 'Profile'. When I try this:

<Link href="/profile/[username]" as={`/p/${user.username}`} >

I get the following error:

Error: The provided `as` value is incompatible with the `href` value

How do I fix this?

Upvotes: 2

Views: 521

Answers (1)

Roman Mkrtchian
Roman Mkrtchian

Reputation: 3006

To be able to access the file in /pages/Profile folder from /p/slug URL, can use rewrites in your next.config.js to access:

module.exports = {
  async rewrites() {
    return [
      {
        source: "/p/:slug*",
        destination: "/Profile/:slug*",
      },
    ];
  },
};

And for your link, since Next.js 9.5.3, you can do directly:

<Link href={`/p/${encodeURIComponent(user.username)}`} >

cf. Link documentation

Upvotes: 4

Related Questions