Getting Started in Next.js, part 1 - file setup and basics

I had been hearing a lot of buzz about Next.js from the dev community lately, so I walked through the basics myself. So far, I have found it to be super powerful, and an excellent, if not necessary addition to React web applications.

The Basics

Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications.

It loads really fast because you have the option to generate static pages which don't rely on javascript to exist! Next code splits which allows even faster page loads for the user. Additionally there's a lot of other helpful functionality, but you should already be sold if you've read this far.

Let's build something

It's very easy to start

npx create-next-app my-next-app

Just like that, you have a Next app.

Inside the app you'll see a different file structure than a 'create-react-app'.

The files are generally laid out like this to begin.

Pages:
Index.js - the home page
_app.js - layout page
Public:
Assets
Images, etc..
Styles:
CSS files
Other styling files

We will add some additional folders, later as well.

To start up the app locally run

Yarn Dev

Navigate your browser to http://localhost:3000 and you will find Next's welcome page with a bunch of wonderful and helpful information. I encourage you to check out their documentation, it's very thorough, but for now let's start fresh.

Inside the pages/index.js file, edit your file to look like this

export default function Home() {
 return (
   <div>
    <h1>Home</h1>
   </div>
 )
}

You’ll see Next’s fast refresh kick in and quickly re-render the page. Next, we will build some pages and see how easy Next makes that.

Pages

Next uses integrated file system routing, which means routing is much easier to comprehend than React Router. Sorry React Router, I appreciate all that you've done for me...

Add a new file pages/about.js

Then add this code inside

export default function About(){
   return (
       <div>
        <h1>About</h1>
       </div>
   )
}

Navigating to http://localhost:3000/about, you’re now on the about page. You made a new route, just like that.

In Next.js, a page is a React Component exported from a file in the pages directory. Pages are associated with a route based on their file name, so the component can have any name, but you must export it as a default export.

By the same logic, nested files in the pages folder, equal nested routes.

Make another file in pages called “about/contact.js” and add the following code

export default function Contact(){
   return (
       <div>Contact</div>
   )
}

Now visit http://localhost:3000/about/contact, it's a nested route, just as easy.

Links

The next thing to do is to start building a navigation bar, so we can use these routes we've created. Next comes with a Link Component to wrap the <a> tags. <Link> allows you to do client-side navigation to a different page in the application. First we will import the Link Component into the pages/index.js file, then add a link to the About page.

Importing the Link Component at the top of the file

import Link from 'next/link'

Then creating the Link inside our Home component.

<Link href="/about"><a>About</a></Link>

Notice the Link component receives the href attribute and the tag remains inside with no necessary attributes.

At this point your file should look like this

import Link from 'next/link'

export default function Home() {
 return (
   <div>
     <Link href="/about"><a>About</a></Link>
     <h1>Home</h1>
   </div>
 )
}

And now you have a link to your about page. We can do the same thing with our about page and have a link back to our home page, like this

import Link from 'next/link'

export default function About(){
   return (
       <div>
           <Link href="/">
           <a>Home</a>
           </Link>
           <h1>About</h1>
       </div>
   )
}

This is awesome because no routing libraries are required. React Router is cool, but this is much cooler.
And when you need a link to an external site, a regular <a>tag will still do the trick.

Navigation Component

Now we want to create a reusable navigation component, with our Home, About, and a new link inside to display on each page without rewriting it.

First let’s create one new page called posts
Remember, just create a posts.js file in the pages folder and add this code to that file

export default function posts(){
   return(
       <div>
           <h1>Posts</h1>
       </div>
   )
}

We want a reusable component to add to each page we already have, so let’s build a ‘components’ folder in our root directory, and then we will have it for any other components we might need.

Inside the components folder, we can create a new file for our navbar, navbar.js.

Paste this code into the new navbar file

import Link from 'next/link'

export default function Navbar(){
   return(
       <header>
           <Link href="/"><a>Home</a></Link>
           <Link href="/posts"><a>Posts</a></Link>
           <Link href="/about"><a>About</a></Link>
       </header>
   )
}

Then we import that file into each file where we need it

import Navbar from '../components/navbar.js'

Then add the Navbar component to each page where we need it.

import Navbar from '../components/navbar.js'

export default function Posts(){
   return(
       <>
       <Navbar />
       <div>
           <h1>Posts</h1>
       </div>
       </>
   )
}

Once the Navbar component is imported into each file and returning a Navbar component, your pages should look like this in the browser.

I’m glad we have some navigation now, but the links are right next to each other. In part 2, we will add some styling options.

Additional Resources

https://nextjs.org/docs