Build and Deploy Serverless React Apps with Next.js 8 and Zeit Now
Tags: serverless, react, nextjs, zeit
Published: 2019-02-21 11:39:17

---
title: Build and Deploy Serverless React Apps with Next.js 8 and Zeit Now
published: true
description: Configure Next.js 8 serverless mode to generate lambdas for each page. Use Hasura GraphQL API as data layer. Deploy to Zeit Now. Instant setup. Tutorial/boilerplate
tags: serverless,reactjs,nextjs,zeit
canonical_url: https://blog.hasura.io/build-and-deploy-serverless-apps-with-nextjs-8-zeit-now/ 
cover_image: https://blog.hasura.io/content/images/2019/02/nextjs-serverless-now-hasura-graphql.png
---

**TL;DR**: Configure Next.js 8 serverless mode to generate lambdas for each page. Use Hasura GraphQL API as data layer. Deploy to Zeit Now. Instant setup. Tutorial/boilerplate 👉 [nextjs-8-serverless](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/nextjs-8-serverless)

![Next.js Serverless Now Hasura GraphQL](https://blog.hasura.io/content/images/2019/02/nextjs-serverless-now-hasura-graphql.png)

[Next.js 8](https://nextjs.org/blog/next-8#serverless-nextjs) landed last week with support for serverless deployment. With this release, Next.js splits an application into serverless lambdas helping improve both reliability and scalability. The "pay for what you use" model is one of the key benefits to going serverless. There are obvious other benefits like distributed points of failure and scale as you go. Out of the box support for serverless is exciting!

To quickly test this out, i had created a Next.js 8 app integrating Hasura GraphQL Engine. The app had a couple of pages; index and about. The index page renders a list of authors fetched from Hasura GraphQL. The about page renders some static text. Here are the instructions for you to get started.

## Deploy Hasura

Follow the instructions in the [readme](https://github.com/hasura/graphql-engine/blob/master/community/sample-apps/nextjs-8-serverless/README.md) to deploy Hasura and create the table author required for the app. Note the Heroku URL for GraphQL Endpoint. You will be configuring this in the app.

## Clone and Run app

The [demo app](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/nextjs-8-serverless) walks you through to build a simple app, listing all authors. You can clone and run the app for the demo.

```bash
$ git clone git@github.com:hasura/graphql-engine.git
$ cd graphql-engine/community/sample-apps/nextjs-8-serverless
$ npm install
```

After installation, you will have to configure the GraphQL endpoint that you got above.

Open **lib/init-apollo.js** and configure Hasura GraphQL Endpoint in **uri**
Now run the app by using the following command:

```bash
$ npm run dev
```
and visit [http://localhost:3000](http://localhost:3000) to view the app.

**Enabling Serverless Mode**
To enable serverless mode, we add the serverless build target in next.config.js.

```javascript
module.exports = {
  target: "serverless",
};
```

That's it! Now build the serverless app by running the following command:

```
$ npm run build
```

The build that is generated by Next.js has a **very low footprint**, with the base zip size of the serverless function being **50KB**. The function that is output doesn't require any other dependencies, since everything required is already bundled in. Of course, depending on the page's internal dependencies, the final size would be more than 50KB.

In the **.next** folder, you will see a **serverless** folder generated after the build. Inside that there is a **pages** folder, which will have outputs of lambda per page.

```
pages/index.js => .next/serverless/pages/index.js
pages/about.js => .next/serverless/pages/about.js
```

These pages can now be independently deployed onto other cloud providers.

## Deploy to Now Platform

The Now Platform gives a seamless way to deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): Run the following commands to deploy

```
$ npm install -g now
$ now
```

**Note**: Older versions of now-cli doesn't support serverless mode.
 
Once the deployment is successful, you will be able to navigate to pages **/** and **/about**, with each one internally being a lambda function which Now manages.
The Now Platform takes care of the routing which is available across a few regions. The lambdas are all deployed onto AWS. You can read more about available routing and regions [here](https://zeit.co/docs/v2/platform/regions-and-providers/).

The outputs of the build process can be static files or serverless lambdas. Static files will be served directly from Zeit's [edge caches](https://zeit.co/docs/v2/domains-and-aliases/cdn/), while lambdas contain code that gets executed dynamically and on-demand.

As you can see in the image below, about and index pages are lambdas. The static assets are being cached by Zeit.

![Now Deployment](https://blog.hasura.io/content/images/2019/02/nextjs-now-serverless.png)

## Migrating from older versions
Next.js 8 maintains backward compatibility and hence for most applications, all you need to do is run:

```
$ npm i next@latest react@latest react-dom@latest
```

And set up the config in next.config.js to have the serverless build target and you should be good to go.
 
## Final Thoughts
This is an interesting shift towards deploying web apps as serverless lambdas. Since each page of the app is a lambda, you pay only for the number of invocations and you can choose to scale high traffic pages selectively. Static assets can be cached as well, providing an affordable and scalable option from day 1.
Check out the sample app on [github](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/nextjs-8-serverless).