serverless-nextjs-plugin

Serverless Nextjs Plugin

A serverless framework plugin to deploy nextjs apps.

The plugin targets Next 8 serverless mode

Motivation

Next 8 released official support for serverless! It doesn't work out of the box with AWS Lambdas, instead, next provides a low level API which this plugin uses to deploy the serverless pages.

Nextjs serverless page handler signature:

exports.render = function(req, res) => {...}

AWS Lambda handler:

exports.handler = function(event, context, callback) {...}

A compat layer between the nextjs page bundles and AWS Lambda is added at build time:

const page = require(".next/serverless/pages/somePage.js");

module.exports.render = (event, context, callback) => {
  const { req, res } = compatLayer(event, callback);
  page.render(req, res);
};

Also benefit from

• Automatic next builds
• Dynamic creation of serverless functions for each page.
• S3 Bucket provisioning for static assets. Relies on assetPrefix.

Getting started

Installing

npm install --save-dev serverless-nextjs-plugin

The plugin only needs to know where your next.config.js file is located. Note it expects the directory and not the actual file path.

nextApp
│   next.config.js
│   serverless.yml
└───pages
│   │   home.js
│   │   about.js
│   │   admin.js

Edit the serverless.yml and add:

plugins:
  - serverless-nextjs-plugin

custom:
  serverless-nextjs:
    nextConfigDir: "./"

package:
  exclude:
    - ./**/*

You can exclude everything. The plugin makes sure the page handlers are included in the artifacts.

Next configuration

module.exports = {
  assetPrefix: "https://s3.amazonaws.com/your-bucket-name"
};

Config Key	Description
assetPrefix (Optional)	When using a valid bucket URL the plugin will create a new S3 Bucket using the parsed name. On deployment, static assets will be uploaded to the bucket provisioned.

Deploying

serverless deploy

You should now have one API Gateway GET/ endpoint per next page 🎉

Examples

See the examples/ directory.