Unable to rewrite url in Next.js - reactjs

Question

I am unable to rewrite the request url below is how my next.config looks
module.exports = withPlugins([
...
{
async rewrites() {
console.log("Rewrites called");
console.log(process.env.NEXT_PUBLIC_DOCS_URL)
return [
{
source: '/docs',
destination: process.env.NEXT_PUBLIC_DOCS_URL,
}
]
}
console logs are correctly printed with new urls but the component is not getting updated with correct links :
<Link href="/docs">
<Button className={NavbarClasses.button}>
<Box color={navWhite ? 'black' : 'white'}>Docs</Box>
</Button>
</Link>
The contents of .env file is as below:
NEXT_PUBLIC_DOCS_URL = http://localhost:4000/docs/intro
But the Link is rendered as localhost:3000 instead of localhost:4000.
Thanks.

Answer 1

According to the Next.js documentation:
Rewrites act as a URL proxy and mask the destination path, making it
appear the user hasn't changed their location on the site. In
contrast, redirects will reroute to a new page and show the URL
changes.
In the nutshell, when user opens your /docs page on localhost:3000 Next.js will send a request on his behalf to localhost:4000 and pass back response. From user's perspective, it looks like localhost:3000 is producing it.
If it's crucial for you to retain original URL, you should use redirects.
Redirects allow you to redirect an incoming request path to a
different destination path.