Nextjs Link "as" Property Doesnt Open The Page On Reload

I'm new to NextJS, Since nextjs has its own router, I wanted to go to a page but the url should be different

Solution 1:

You can use rewrites in your next.config.js to make a specific URL point to a specific page:

module.exports = {
  asyncrewrites() {
    return [
      {
        source: "/About/About",
        destination: "/about-page",
      },
    ];
  },
};

If you want to export your app with next export, then you can rather use exportPathMap :

module.exports = {
  trailingSlash: true,
  exportPathMap: asyncfunction () {
    return {
      "/": { page: "/" },
      "/about-page": { page: "/about-page" },
      "/About/About": { page: "/about-page" },
    };
  },
};

Do not forget to set trailingSlash: true or your custom paths without .html will not work.

You can remove the line "/about-page": { page: "/about-page" }, to make your about page only accessible from /About/About.