Custom Route Name With NextJS
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
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 target="_blank" rel="nofollow noreferrer" href="/register" as="/SomeOtherPage">
<a>Some Other Page</a>
</Link>
</div>
);
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM