Getting Started with Next.js and Now
Creating a Next.js project and deploying it with ZEIT Now
This guide will help you get started using Next.js with Now by covering a variety of topics from Installing Now to deploying your Next.js application with a single command.
Next.js is a framework, created by ZEIT, for creating production-ready and lightning fast React applications with a lot of handy features built-in.
Installing Now
To get started with Now, you must first install it. For your convenience, we have provided multiple options for installation, including the Now Desktop app, or Now CLI with Yarn, npm, or Curl.
You can find installation instructions for all the available options on the download page.
GitHub and GitLab Integrations
To enhance your development experience with Now further, with automatic deployments, aliasing, and more, we also provide integrations with both GitHub and GitLab.
For more information, the links above outline the key features and the benefits our Git integrations bring to your workflow.
Step 1: Creating the Project
To get started, create a project directory and cd
into it:
Creating an entering into the my-nextjs-project
project directory.
With the project directory created, initialize the project like so:
Initializing your project with a package.json
file.
Next, add the project dependencies:
Adding next
, react
and react-dom
as dependencies to your project.
With your project setup, create a /pages
folder:
Creating a /pages
folder in your project.
Inside your /pages
folder, create an index.js
file with the following content:
import Head from 'next/head' export default function HomePage() { return ( <main> <Head> <title>Next.js on Now</title> </Head> <h1>Next.js on Now</h1> <h2> Developed & Deployed with{' '} <a href="https://zeit.co/docs" target="_blank" rel="noreferrer noopener" > ZEIT Now </a> ! </h2> <style jsx>{` main { font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 20px 20px 60px; max-width: 680px; margin: 0 auto; font-size: 16px; line-height: 1.65; text-align: center; } h1 { margin-top: 70px; font-size: 45px; } a { cursor: pointer; color: #0076ff; text-decoration: none; transition: all 0.2s ease; border-bottom: 1px solid white; } a:hover { border-bottom: 1px solid #0076ff; } `}</style> </main> ) }
An index.js
file for your Next.js project.
Lastly, create a next.config.js
file at the root of your project, this file tells Next.js to target a serverless build environment:
module.exports = { target: 'serverless' }
A next.config.js
file for your Next.js project.
Adding now.json
and .nowignore
To provide configuration for your project, you should use a now.json
file.
Create a now.json
file at the root of your project with the following code:
{ "version": 2, "alias": "my-aliased-nextjs-project", "name": "my-nextjs-project" }
A now.json
file to configure your project.
The now.json
file achieves a few things:
version
- specifies which Now platform version to use for the deploymentalias
- used to alias deployments when using a Git integrationname
- provides a prefix for your deployments
The .nowignore
file works similarly to a .gitignore
file and is used to tell the Now CLI, Now for GitHub, and Now for GitLab integrations to not upload certain files or directories.
Create a .nowignore
file in the root of your project directory with the following code:
yarn.lock
A .nowignore
file for your Next.js project.
Now that you've provided some configuration for your Next.js project, let's see in the next step how to build your files for the output.
Adding a Builder
Builders provide the step that turns your source code into production-ready outputs.
These outputs can be either static files and/or Lambdas. Both output types get served by our CDN at the Edge, making your deployments blazing fast to access around the globe.
For this project, you will require the use of a single Builder, @now/next
. To get started with the Next.js Builder, add the following code to your now.json
file:
{ ... "builds": [ { "src": "next.config.js", "use": "@now/next" } ] }
Adding a Builder to your projects' now.json
file.
Step 2: Local Development
For a seamless local development experience, you should use now dev
, a reproduction of the Now deployment environment but on your local machine.
As hinted at above, you can start developing locally with just a single command:
Starting a local development server with the now dev
command.
After shortly installing and setting up the required Builders, now dev
will start from localhost on port 3000, if available, else the next available port.
now dev
watches your files for any changes, automatically updating when any are made, leaving you free to focus on developing your application.
Step 3: Cloud Deployment
When you're happy with your project and ready to share it with the world, it is time to deploy with Now.
Just like now dev
, cloud deployment is handled with just a single command:
Deploying your project with the now
command.
After your project has been built and deployed, you will receive a deployment URL with the following format:
project-name.account-name.now.sh
An example deployment URL for your project.
Your project is live at this URL immediately, allowing it to be shared with no delay.
Further Examples
You can see more examples of Next.js on Now at the Now Examples GitHub repository.
Below is a list of all Next.js examples available:
These examples show how Next.js can be used with Now in a variety of different situations.
You can get your project started in seconds by building on top of these examples with the help of now init
:
Using the now init
command to create a project from an example.
After entering the now init
command, you will be presented with a list of projects to choose from the Now Examples GitHub repository.
All of these examples are immediately ready for either local development or cloud deployment to help you get your project up and running as quick as possible.
Resources
For more information on working with Next.js, please refer to the Next.js documentation.
To configure Now further, please see these additional topics and guides: