Next.js is a React framework developed by Vercel that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel.

Next.js is a lightweight open source JavaScript framework built on top of the React library that enables quick server side rendering and is server agnostic (i.e. use with its own built in HTTP server or use with any Node.js server). It is put out by the folks at Zeit. Routing is simply done by the page and makes getting a website up and running easy and quick. In fact, we're going to do in 5 minutes or less.

Why Next.Js?

1) Relatively easy to learn

That’s it. If you’ve written any React at all, you’d find yourself at home with Next.js. It offers you advanced tools and a robust API support, but it doesn’t force you to use them.

2) Built-in CSS support

Writing CSS in component-driven frameworks comes with a sacrosanct need for the “cascade”. It’s why you have CSS-in-JS tools, but Next.js comes out of the box with its own offering — styled-jsx, and also supports a bevy of styling methodologies.

3) Automatic TypeScript support

If you like to code in TypeScript, with Next.js, you literally have automatic support for TypeScript configuration and compilation.

4) Multiple data fetching technique

It supports SSG and/or SSR. You can choose to use one or the other, or both.

5) File-system routing

To navigate between one page to another is supported through the file-system of your app. You do not need any special library to handle routing.

Installation

We'll use NPM to install Next.js along with its dependencies.

First we'll make a directory to hold our Next.js project and go into it:

mkdir my-portfolio-site
cd my-portfolio-site

Then we'll initialize it with a package.json file and use the y flag to just go ahead and do it and skip the questions: npm init -y.

Now we are ready to install Next.js:

npm install react react-dom next

Next.js is not super opinionated on how you structure your project, with one exception. All your actual web pages need to go inside a pages folder, so let's go ahead and create it: mkdir pages.

Lastly, let's go ahead and update the package.json with the run script language to initialize our Next.js app. Open up the package.json file and add the following under scripts:

"dev": "next",
"build": "next build",
"start": "next start"

Great, we've now installed Next.js. So lets dive into it.

Creating The First Component

Remember that Next.js is just JavaScript and rests on top of React, so all we need to do is build some components. Routing is done by the name of the component, so for example, mysite.com/blog, would be from a blog.js named file in the pages directory.

Open up the project in your favorite code editor and create a file called index.js in the pages directory.

Let's create a component that returns some HTML!

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>Welcome to my portfolio! This is designed with Next.js!</p>
    </div>
)

export default Index

Now if you run npm run dev from the command line and navigate to http://localhost:3000 from your web browser you will find this content being served.

Working with Link API

Don't we all love the page rendering in React? We can accomplish the same client side navigation with Next.js using the Next.js Link API. Let's say our portfolio site had a Contact page, so we would have an updated Index component that looked like this:

import Link from 'next/link';

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

First, we imported the Link API module from Next.JS and then we used it inline in the midst of our content by making a placeholder for it with the {' '} syntax. The component is a Higher Order Component and supports only a couple arguments such as href (and href argument itself supports arguments like query strings and the like) and as for URL masking. The underlying component, in this case a tag supports other props like style and onClick.

Making Smaller Reusable Components
Now we are off to a great start, but can you imagine having to rewrite our header for every page we create? That's why we break up our site into small reusable components!

Next.js has no opinion on how you should do this. But, remember, if you put them in the pages directory they will be accessible to to the outside world directly. Do you want someone directly accessing your header, navbar and footer? If not, then place them outside it. Go ahead and create a components top level directory: mkdir components and touch header.js to create a header.js file.

Open up the header.js file in your code editor and create a header component!

const Header = () => (
    <div>
        <h1>My Portfolio Site</h1>
    </div>
)

export default Header

Then go ahead and go back to your index.js file and incorporate your new header:

import Link from 'next/link';
import Header from '../components/header';

const Index = () => (
    <div>
        <Header />
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

Now all that new component did was save us one

We have now successfully installed Next.js, initialized a new project, created components, linked to them using the Next.js Link API and reused components across our project. This is a great foundation to build from.

There is a lot more to Next.js like CSS in the JavaScript, custom server (for example, using Express), passing state between pages and so much more. Please check out the documentation to take an even deeper dive and enjoy taking the next step with Next.js!

Thanks for reading.