Build and Deploy Serverless Apps with Next.js 8 and Zeit Now

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

Next.js 8 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 postgres via Hasura GraphQL. The about page renders some static text. Here are the instructions for you to get started.

Deploy Hasura on Hasura Cloud

• Deploy GraphQL Engine on Hasura Cloud and setup PostgreSQL via Heroku:

Follow the instructions in the readme to create the table author required for the app. Note the Hasura URL for GraphQL Endpoint. You will be configuring this in the app.

Clone and Run app

The demo app walks you through to build a simple app, listing all authors. You can clone and run the app for the demo.

$ git clone [email protected]: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:

$ npm run dev

and visit http://localhost:3000 to view the app.

Enabling Serverless Mode

To enable serverless mode, we add the serverless build target in next.config.js.

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 (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.

The outputs of the build process can be static files or serverless lambdas. Static files will be served directly from Zeit's edge caches, 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.

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.

Take the demo for a spin and let us know what you think about serverless for web apps.

If you have any questions or run into any trouble, feel free to reach out to us on twitter, github or on our discord server.