In order to get started with next you need to install the latest version of three libraries:
- Next
- React
- React-Dom
npm install next react react-dom
Once the installation is finished you will need a package.json file. You can easily create one
using the npm init command
npm init -f
The -f flag means it will use the defaults, you can ommit it and use the values you want. Now
in the package.json in the scripts section create a dev (it can be any name though) script with the next command.
"scripts": {
"dev": "next dev"
}
The next dev will generate a webserver for local development powered by next.
File System API
Next will search for a pages directory and convert all the files that find on there on routes of your
application.
Let's suppose you want an About page url (/about) to display a welcome message. First you need to create a pages
directory
mkdir pages
Now since you want the url to be /about the file must have the same name About.js. Since here
you are in a react safe space or in other words you just need to create a react component.
// pages/About.js
function About() {
return <h1>Welcome to the About Page!</h1>;
}
export default About;
Then in your terminal just execute the dev script
npm run dev
And that's it, you open in your browser the url http://localhost:3000/about you should see the welcome message.
But what about the root url (/) how we can create content for that page? Easy, in this case next will map the file index.js to the root url, clever, eh?
// pages/Index.js
function Home() {
return <h1>Welcome to my App!</h1>;
}
export default Home;
Now going to http://localhost:3000 will display the Welcome to my App message.
Top comments (0)