使用 NextJS 自定义路由名称

Question

I started work on NextJS a few days ago, and I'm literally blocked now on something that, I think, is very stupid but I cannot find the solution on Internet...

For the moment my website has 4 pages ( Dashboard, Connexion, Register and Notes ) which are in ' pages ' folder at the same level than 'components' folder which has Content, Footer, Header, Layout and Navigation.js . Well, I have also a 'public' folder which contain a 'build' folder which has admin.js, app.css, app.js, two files.json and two others.js.

Now, if I want to go on register page I have to type in the URL /register but I would have to type /inscription to go in.

Hoping you understand everything and if you have any question, ask me: Thank you ! :)

Answer 1

At the top of your folder inside pages folder you should create, dashboard.js, connection.js, register.js, notes.js.

Then if you run npm run dev you should be able to get in the url: http://localhost:3000/register

If you want to show your register page as SomeOtherPage you can use code below.

// pageWithLink.js
import Link from "next/link";
export default () => (
  <div>
    <Link href="/register" as="/SomeOtherPage">
      <a>Some Other Page</a>
    </Link>
  </div>
);