loading...

Learning NextJs - Day 1

eperedo profile image Eduardo P. Rivero Updated on ・2 min read

Learning NextJs (12 Part Series)

1) Learning NextJs - Day 1 2) Learning NextJs - Day 2 3 ... 10 3) Learning NextJs - Day 3 4) Learning NextJs - Day 4 5) Learning NextJs - Day 5 6) Learning NextJs - Day 6 7) Learning NextJs - Day 7 8) Learning NextJs - Day 8 9) Learning NextJs - Day 9 10) Learning NextJs 9! - Day 10 11) Learning NextJs - Day 11 12) Easy https server with nextjs and ngrok

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.

Learning NextJs (12 Part Series)

1) Learning NextJs - Day 1 2) Learning NextJs - Day 2 3 ... 10 3) Learning NextJs - Day 3 4) Learning NextJs - Day 4 5) Learning NextJs - Day 5 6) Learning NextJs - Day 6 7) Learning NextJs - Day 7 8) Learning NextJs - Day 8 9) Learning NextJs - Day 9 10) Learning NextJs 9! - Day 10 11) Learning NextJs - Day 11 12) Easy https server with nextjs and ngrok

Posted on by:

eperedo profile

Eduardo P. Rivero

@eperedo

Javascript developer, 900 days duolingo streak

Discussion

markdown guide