Cdk-nextjs-serverless NPM

:warning: Serverless has released an official CDK construct for NextJS here. As such, I am archiving this repo.

cdk-nextjs-serverless

cdk-nextjs-serverless is a Level 3/Pattern construct for deploying NextJS applications to AWS on CloudFront, Lambda@Edge, and S3 for a completely serverless frontend stack. Currently, the package supports only CloudFront deployment utilizing the same build process as Serverless Framework's NextJS at the Edge component. As I continue to develop the project, I plan to support per-page Lambdas and an option for deploying to API Gateway.

Note: this package does not utilize the serverless framework CLI to deploy resources - it is fully written and deployed in CDK-generated CloudFormation.

Demo

🚀 Live demo of NextJS app deployed through cdk-nextjs-serverless: https://d3027dwnjxq2g2.cloudfront.net/ See the source code and setup instructions in the examples directory.

Installation

Use the npm or yarn package manager to install the package.

npm i cdk-nextjs-serverless

Usage

Pre-Requisites

target: 'serverless' is in your next.config.js.
Your project has been configured with CDK.
next is installed (you can check that node_modules/.bin/next is there to ensure it will be compatible)

Basic Usage

At a minimum, specify the location of your Next app directory, and the construct will build your next app and generate the required resources:

new NextJSServerless(this, 'NextJSApp', {
  nextJSDir: './next-app' // Relative to CDK project root
})

The construct will attempt to locate the nearest parent node_modules directory of the supplied nextJSDir. If your next package is installed in a different node_modules directory or the construct cannot find the directory, you can manually specify it:

new NextJSServerless(this, 'NextJSApp', {
  nextJSDir: 'src/next-app',
  nodeModulesDir: './node_modules' // Relative to CDK project root
})

Resource Configurations

You can define properties of the generated resources by defining them in the construct props:

new NextJSServerless(this, 'NextJSApp', {
  nextJSDir: 'next-app',
  lambdaFunctionProps: {
    timeout: Duration.seconds(15),
    memorySize: 1500
  },
  cloudFrontDistributionProps: {
    additionalBehaviors: {
      'npm': {
        origin: origin
      }
    }
  }
})

The construct will add your custom props in along with its default props and override custom props for any reserved configurations that are required for the deployment to work.

Asynchronous Resource Configurations

Because the construct asynchronously builds your application, the returned object won't yet have its resource properties hydrated. In the case that you'd like to be able to interact with the created resources after initialization, you can use the promise function like so:

new NextJSServerless(this, 'NextJSApp', {
  nextJSDir: 'next-app',
  lambdaFunctionProps: {
    timeout: Duration.seconds(15),
    memorySize: 1500
  }
})
.promise()
.then(nextJSApp => {
  nextJSApp.cloudFrontWebDistribution?
    .addBehavior('github', new origins.HttpOrigin('https://www.github.com'));
  });
})

Features

Build and deploy with single NextJS directory prop
Ability to supply arguments for underlying created resources before and after instantiation
CloudFront invalidation on deployment
Deployment with per-page lambdas
Deployment to API Gateway + Lambda rather than CloudFront + Lambda@Edge