With React Riot just a few hours away, we wanted to give everyone taking part and those that want to get started with React a quick run-through of building an app with Next.js and deploying it live with Now.
Now makes deploying your apps simple, with only one command, making the process of sharing in-progress builds with others easy, and pushing those changes live to production just as effortless.
Next.js is a lightweight framework that provides methods of building server-rendered or static React applications with no thought to the build process.
To start off with building a Next.js application, install it, along with React and ReactDOM, using a package manager of your choice:
yarn add next react react-dom

Installing Next.js, React, and ReactDOM with Yarn.

In the package.json file where the Next and React packages were added, a script can be added to start a development server, and an extra one to build the application for our later production scripts.
Now, yarn dev (or with npm run dev) will start a local development server on localhost:3000, giving you the tools to start developing right away without setting up a build process or even refreshing the page with each change.
Next.js relies on a pages directory structure. It will take any JavaScript file and build it as a page for the app, as long as that page is exported.
Adding an index.js file within the pages directory will result in a page that is shown by the app by default:
export default () => (
  <div>Hello from Next.js!</div>
)

A simple index.js file using JSX for Next.js.

When starting the development server and accessing the resulting local URL, you will now see a screen showing the message we exported with JSX in index.js.

Starting a development server locally with Yarn and Next.js.

To get a deeper-dive into learning Next.js, head over to the Next.js Learning app which has an interactive way to teach it in a simple, straight-forward way.
One of the advantages of using Next.js is the undemanding way it supports server-side rendering applications. Next.js comes pre-equipped with a script to start a Node.js server for production, aside from the previously mentioned development server script.
Adding the following start script to the previously listed dev and build scripts will provide a method to begin a production server.
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

A package.json file containing scripts to run Next.js in development and production.

For Now to host a server-rendered Next.js app, we first need to tell it how to run the server. We already have the start script in our package.json, so there needs to be instructions for Now on what it needs to run that script.
For this, a Dockerfile is required:
# Use a Node.js image and assign it as our build
FROM mhart/alpine-node:10 as build

# Set the working directory, copy dependency management files to the working directory,
# and install the dependencies
WORKDIR /usr/src
COPY package.json yarn.lock ./
RUN yarn install

# Copy all files to the working directly, build the application
# and purge the development dependencies
COPY . .
RUN yarn build && yarn --production

# Create a new image using a minimal Node.js image
# with no extra tools packaged in, such as Yarn or npm for the smallest final size
FROM mhart/alpine-node:base-10

# Set the working directory for the new image and
# set the `NODE_ENV` environment variable value to `production`
# along with setting the path for node_modules to be accessible
WORKDIR /usr/src
ENV NODE_ENV="production"
ENV PATH="./node_modules/.bin:$PATH"

# Copy files from the base image over to our new image's working directory
COPY --from=build /usr/src .

# Start the server for Next.js using Node.js
CMD ["next", "start"]

A Dockerfile instructing Now to run Next.js, utilizing multi-stage builds and Alpine Node to minimize the final image size.

Once we have the Dockerfile prepared to give Now instructions, we need to let Now know to look for them by setting the deployment type to docker within a now.json configuration file, while also enabling the latest Now Cloud version:
{
  "type": "docker",
  "features": {
    "cloud": "v2"
  }
}

A now.json file setting the deployment type to docker and enabling Now Cloud v2.

Additionally, adding a .dockerignore file that whitelists files will prevent any unnecessary files from being deployed, lowering the weight of your image:
*
!pages
!components
!yarn.lock
!package.json

A .dockerignore file whitelisting common Next.js application files for deployment.

All that is left to do, to deploy a server-rendered Next.js application, is run Now CLI:
now

Running Now CLI within a terminal to deploy the server-rendered Next.js application.

You will then receive a URL for your project that you can share around, or alias that deployment URL to a more permanent URL, such as a custom domain or a now.sh alias.
To see a full application built using this method and ready to deploy with Now, view our example app.
For smaller sites or apps that are statically exported instead of needing to be server-rendered, Next.js also supports static exports.
As with the production server, Next.js is also bundled with an export script that generates static files from your application:
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export"
  }
}

A package.json file containing scripts to run Next.js in development and export statically.

Deploying a static application with Now is as easy as running now in the directory where an index.html exists. However, there are a few things we can do to make this process easier for every deployment process.
To deploy static Next.js apps as mentioned above, you need to build the app locally and then deploy that directory. With Now, we can provide instructions to build the app and then deploy it all with one command.
First, tell Now that the app is static by adding a now.json file at the root of the project directory containing the deployment type:
{
  "type": "static"
}

A now.json file setting the deployment type to static.

Next, we can add a Dockerfile to build the app. With the deployment type specified as static, Now will know to use the Dockerfile as the build instructions, as long as the built content exists within the public directory.
The following is a great example of a Dockerfile that installs dependencies, builds the Next.js app statically to the public directory, using our package.json scripts:
# Using lightweight Node.js base with Yarn to install our dependencies and build and export the app
FROM mhart/alpine-node:10

# Set the working directory and copy over package manager specific files
WORKDIR /usr/src
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn

# Copy the rest of the app files to the working directory
COPY . .

# Build the app and export the static files to the `public` directory
RUN yarn build && yarn export -o /public

A Dockerfile instructing Now to build a statically exported Next.js app into the public directory.

Additionally, add a .dockerignore as a whitelist to prevent any unnecessary files from deploying with your application:
*
!pages
!components
!yarn.lock
!package.json

A .dockerignore file whitelisting common Next.js application files for deployment.

For the final step, just run Now CLI to build and deploy the application:
now

Running Now CLI within a terminal to deploy the server-rendered Next.js application.

You will now see your application build from your terminal or the deployment URL you are given from the CLI.
To see a full application built using this method and ready to deploy with Now, view our example app.
With Next.js and Now, you have all the tools you need to quickly get started and progress with your React applications, especially for React Riot!
An alternative to Next.js is Create React App, for which we have a guide on our documentation, along with many other helpful guides and documentation to help you progress with your builds and deployments.
We are very excited to see what you come up with at React Riot this year and are happy to be a sponsor of the event again.
If you use any of our products or services for this year's event, feel free to tweet us with what you created. We would love to see it!