Terraform nextjs plugin

A plugin to generate terraform configuration from nextjs pages

The reason

Nextjs supports serverless pages, where it creates files that can be used by some lambdas to render the pages. Unfortunately, here you are left alone. So here a solution for your troubles.

• Installation
• Usage
  • Via CLI
  • Via API
• Configuration
  • Mapping explained
• Providers
  • AWS

Installation

npm i --save-dev @ematipico/terraform-nextjs-plugin

Or

yarn add --dev @ematipico/terraform-nextjs-plugin

This package requires at least Next v8.

Usage

terranext --provider=AWS

This library supports cosmiconfig: you just need to have a file called terranextrc that matches the criteria. This repository has one.

Via CLI

You can use the simple CLI available. At moment you can't pass the routes parameter, you will need to use the config object or use the API.

Using the CLI will automatically emit the configuration files.

Arguments passed via CLI will override the ones that are defined inside the config file.

terranext --provider=AWS --gateway-key=CustomKey --next-dir-app=../../nextjs-project/

Or you can use the aliases:

terranext --provider=AWS -g=CustomKey -p=../../nextjs-project/

Help section

Usage
  $ terranext

Options
  --gateway-key, -g     The API Gateway key of the project. Default is "Terranext"
  --next-app-dir, -d    The path that Terraform CLI has to follow to reach the nextjs project.
  --provider            The Cloud provider to use when exporting the configuration
  --env				    A way for passing environment variables to the lambdas


Examples
  $ terranext
  $ terranext --gateway-key=CustomKey --next-app-dir=../../nextjs-project/
  $ terranext --provider=AWS --next-app-dir=../../nextjs-project/
  $ terranext -g=CustomKey -d=../../nextjs-project/
  $ terranext --env="DEBUG,express:*" --env="API_KEY,1234"

Via API

const generateResources = require("@ematipico/terraform-nextjs-plugin");

const configuration = {
	gatewayKey: "AmazingWebsite",
	lambdaPath: "../../project/build",
	provider: "AWS",
	env: [
		{
			key: "KEY",
			value: "2940"
		}
	]
};

const resources = generateResources(configuration); // inside resources you have the terraform json configuration
generateResources(configuration, true); // it creates two files

If the second argument is a boolean and it's true, the library will create two files:

• gateway.terraform.tf.json
• lambdas.terraform.tf.json

Having a suffix with .tf. will tell automatically to terraform that should be validated and planned. It will be up to you to consume them in a proper way.

Configuration

| Name | Type | Default | Description | | ------------ | ------------------------------ | ------------------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | gatewayKey | string | Terranext | A name that will be prefixed to your resources. Usually it's the project name. Default value: Terranext. | | provider | string | Must be provided | The Cloud Provider. Based on the value, a different configuration will be exported. Supported providers: AWS | | nextAppDir | string | Must be provided | This is the path where your Next.js project is. Usually you will run terraform CLI from a different project/folder. So you need to tell terraform where this folder is. The library will take care of the rest. Default value: "./" | | routes | Array<Mapping>, Mapping | Optional | This is the structure of the routes that describe your pages. | | env | Array<Env> | Optional | Environments passed via CLI have to be split using ,: --env="KEY,VALUE". When using the API, you always have to pass an array of objects { key: "MyKeyName", "value": "MyKeyValue" }. Environment variables are applied to all the lambdas | | nodeVersion | 10 or 12 | 10 | Runtime to use

Mapping explained

These mappings are only needed if you have custom routes. If you don't, routes is not needed as this library is able to create mappings from the files that Nextjs generates.

Let's say we want to describe the following URLs:

• /about-us/contacts
• /about-us/the-company
• /blog/first-blog-post
• /blog/second-blog-post
• /credits?hideComments: here, hideComments is not mandatory. If it is mandatory, it will be marked true in the configuration

const routes = [
	{
		prefix: "/about-us",
		mappings: [
			{
				route: "/contacts", // the URL
				page: "/companyContacts" // the nextjs file, inside pages folder, that is responsible to render this page
			},
			{
				route: "/the-company",
				page: "/aboutTheCompany"
			}
		]
	},
	{
		prefix: "",
		mappings: [
			{
				route: "/blog/:url",
				page: "/blogPost"
			},
			{
				route: "/credits",
				page: "/credits",
				params: {
					hideComments: false
				}
			}
		]
	}
];

Providers

At the moment the project supports only AWS but it's up to support more providers in the future.

AWS

Once you generate the resource files, you will need to consume them. Also, you will need to create the following resource:

resource "aws_api_gateway_rest_api" "CustomKey" {
  name        = "WebApi"
  description = "Web API"
}

locals {
  groupname = "WebApi"
  lambda_iam_role = "arn:aws:iam::202020202020:role/lambda_execution_role"
  aws_region = "${data.aws_region.current.name}"
}

Please check the integration testing to see how to consume the configuration.