NextJS how to change URL when using rewrites

In my nextjs-app, I want to redirect a page to another page, by using the rewrites-method in the next.config file.

here is my config file:

const nextConfig = { reactStrictMode: true, async rewrites() { return [ { source: "/categories", destination: "/categories/albums", } ] }
}

So what I want to achieve is that when the page /categories is loaded, I want to redirect to categories/albums. So far it works, but for some some reason though, the URL does not change e.g. the URL still says /categories even though it displays the categories/albums-page - why is that? Am I missing some further options/settings?

UPDATEI found out, that I can use the redirects-method instead. I have to refresh the page to make it work though, which is weird - does anyone have an idea?

1 Answer

That's what a rewrite does. I think you are looking for a redirect:

module.exports = { async redirects() { return [ { source: '/categories', destination: '/categories/albums', }, ] },
}