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 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 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 walks you through to build a simple app, listing all authors. You can clone and run the app for the demo.
$ 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:
$ 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. You can read more about available routing and regions here.
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.
Top comments (0)