Eduardo P. Rivero
Posted on June 19, 2019
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.
Posted on June 19, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.