serverless-nextjs-plugin

Serverless Nextjs Plugin

A serverless framework plugin to deploy nextjs apps.

The plugin targets Next 8 serverless mode

Contents

• Motivation
• Getting Started
• Next config
• Deploying
• Deploying a single page
• Examples

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);
};

Getting started

Installing

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

The plugin only needs to know where your next.config.js file is located. Using your next configuration it will automatically build the application and compile the pages using the target: serverless.

Note it expects nextConfigDir to be a 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

When running serverless deploy all your next pages will be automatically compiled, packaged and deployed.

The Lambda functions created for each page have by default the following configuration:

handler: /path/to/page/handler.render
events:
  - http:
      path: pageName # home, about, etc.
      method: get

If you need to change the default configuration, such as memorySize, timeout etc. use the top level provider which will override the functions configuration. For example, to change the memorySize to 512MB:

provider:
  name: aws
  runtime: nodejs8.10
  memorySize: 512
  ...

See this for more information.

Deploying a single page

If you need to deploy just one of your pages, simply run:

serverless deploy function --function pageFunctionName

where pageFunctionName will be the page file name + "Page". For example, to deploy pages/home.js, you can run:

serverless deploy function --function homePage

Examples

See the examples/ directory.