Home

Awesome

Terraform nextjs plugin

<p align="center"> <img height=200 src="https://www.ongraph.com/wp-content/uploads/2018/02/nextjs_icon.png" width=200 /> <img height=200 src="https://avatars0.githubusercontent.com/u/11051457?v=3&s=280" width=200 /> </p>

A plugin to generate terraform configuration from nextjs pages

Build Status Codacy Badge npm Conventional Commits codecov

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

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:

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

NameTypeDefaultDescription
gatewayKeystringTerranextA name that will be prefixed to your resources. Usually it's the project name. Default value: Terranext.
providerstringMust be providedThe Cloud Provider. Based on the value, a different configuration will be exported. Supported providers: AWS
nextAppDirstringMust be providedThis 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: "./"
routesArray<Mapping>, MappingOptionalThis is the structure of the routes that describe your pages.
envArray<Env>OptionalEnvironments 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
nodeVersion10 or 1210Runtime 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:

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.