NextJS is a very interesting, minimalistic framework for server-rendered React applications. If you’re new to React or NodeJS in general, the current documentation for NextJS can be confusing.

This is a short, total beginners guide so you can setup a NextJS application and deploy it on Zeit quickly.

Install

The first step, if you’ve never used NodeJS before, is to install it. If you’re on a Mac, I recommend using Homebrew.

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Next install NodeJS:

$ brew install node

NextJS was created by the team behind Zeit, which provides cloud deployment and hosting. We need to install now, which is Zeit’s command line client, to quickly deploy our app after making it.

$ npm install -g now

NextJS

Now that we’ve successfully installed Homebrew, NodeJS, and now we can create and deploy a Next.js app with only a few lines of code.

First, let’s install next:

$ npm install next --save

Then, create a new directory called “nextjs,” change into that directory, and create a package.json file within it.

$ mkdir nextjs && cd nextjs && touch package.json

The package.json file is how we will locally manage our npm (Node’s package manager) files.

With your code editor (I recommend Atom) open and update the package.json file like so:

{
  "name": "nextjs",
  "dependencies": {
    "next": "latest"
},
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Briefly what we’ve done is provide a name, list next as a dependency, and add scripts so that next will run, build, and deploy our app once complete.

Create a directory called “pages” and an index.js file within it:

$ mkdir pages && touch pages/index.js

With your text editor, edit this index.js file as so:

import React from 'react'
export default () => (
  <div>Welcome to next.js!</div>
)

We’ve imported React and then setup a simple homepage.

On the command line, run npm run dev and go to http://localhost:3000.

From here, I recommend following the rest of the NextJS documentation to see all the additional features provided.

Deploy with Zeit

If you want to deploy right away, Ctrl+C out of your running server and type now to deploy with Zeit.

$ now
> Enter your email:

Zeit will send you an email with a link to click if the text from the command line matches your email. If yes, click the email link. The command line script will now automatically deploy and provide you with a link to your web app on now.sh servers. For example, here’s mine: https://nextjs-joibheaove.now.sh.

Enjoy!