Learning NextJs - Day 1

eperedo

Eduardo P. Rivero

Posted on June 19, 2019

Learning NextJs - Day 1

In order to get started with next you need to install the latest version of three libraries:

  1. Next
  2. React
  3. 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.

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
eperedo
Eduardo P. Rivero

Posted on June 19, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About