NextJS/Zeit for Total Beginners
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.
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
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
$ 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:
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:
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.