Overview

• Next.js website resource is a purpose-built resource for deploying Next.js app using AWS Lambda (or AWS Lambda@Edge).
• On the background It creates multiple different AWS resources required to run your Next.js website as efficiently as possible.

Under the hood

• Stacktape uses open-source project OpenNEXT to build your Next.js application so that it is runnable in AWS Lambda function.
• On the background Stacktape creates following resources to host your Next.js app:

For more information refer to OpenNext docs.

Using edge

You can use Lambda@Edge by specifying useEdgeLambda property.

YAML
TypeScript
Copy
resources:
  web:
    type: nextjs-web
    properties:
      useEdgeLambda: true

Using warmer

You can specify amount of warm instances you want warmer to keep. By default, warmer is disabled.

YAML
TypeScript
Copy
resources:
  web:
    type: nextjs-web
    properties:
      warmServerInstances: 5

Using firewall

You can use web-app-firewall resource to protect your Next.js application from common web exploits that could affect application availability, compromise security, or consume excessive resources.

YAML
TypeScript
Copy
resources:
  web:
    type: nextjs-web
    properties:
      useFirewall: waf

  waf:
    type: web-app-firewall
    properties:
      scope: cdn

Environment variables

Injects environment variables into server function.

YAML
TypeScript
Copy
resources:
  web:
    type: nextjs-web
    properties:
      environment:
        - name: STATIC_ENV_VAR
          value: my-env-var
        - name: DYNAMICALLY_SET_ENV_VAR
          value: $MyCustomDirective('input-for-my-directive')
        - name: DB_HOST
          value: $ResourceParam('myDatabase', 'host')
        - name: DB_PASSWORD
          value: $Secret('dbSecret.password')

Custom domain names

YAML
TypeScript
Copy
resources:
  web:
    type: nextjs-web
    properties:
      customDomains:
        - domainName: mydomain.com

Accessing other resources

• For most of the AWS resources, resource-to-resource communication is not allowed by default. This helps to enforce security and resource isolation. Access must be explicitly granted using IAM (Identity and Access Management) permissions.

• Access control of Relational Databases is not managed by IAM. These resources are not "cloud-native" by design and have their own access control mechanism (connection string with username and password). They are accessible by default, and you don't need to grant any extra IAM permissions. You can further restrict the access to your relational databases by configuring their access control mode.

• Stacktape automatically handles IAM permissions for the underlying AWS services that it creates (i.e. granting web services permission to write logs to Cloudwatch, allowing web services to communicate with their event source and many others).

If your compute resource (nextjs server function) needs to communicate with other infrastructure components, you need to add permissions manually. You can do this in 2 ways:

Using connectTo

• List of resource names or AWS services that the nextjs server function will be able to access (basic IAM permissions will be granted automatically). Granted permissions differ based on the resource.
• Works only for resources managed by Stacktape in resources section (not arbitrary Cloudformation resources)
• This is useful if you don't want to deal with IAM permissions yourself. Handling permissions using raw IAM role statements can be cumbersome, time-consuming and error-prone. Moreover, when using connectTo property, Stacktape automatically injects information about resource you are connecting to as environment variables into your function.

YAML
TypeScript
Copy
resources:
  web:
    type: nextjs-web
    properties:
      connectTo:
        - myDatabase

  myDatabase:
    type: relational-database
    properties:
      engine:
        type: aurora-postgresql
        properties:
          instances:
            - instanceSize: db.t4g.medium

Using iamRoleStatements

• List of raw IAM role statement objects. These will be appended to the nextjs server function's role.
• Allows you to set granular control over your nextjs server function's permissions.
• Can be used to give access to any Cloudformation resource

YAML
TypeScript
Copy
resources:
  web:
    type: nextjs-web
    properties:
      iamRoleStatements:
        - Resource:
            - $CfResourceParam('NotificationTopic', 'Arn')
          Effect: 'Allow'
          Action:
            - 'sns:Publish'

cloudformationResources:
  NotificationTopic:
    Type: AWS::SNS::Topic

Known issues

Bundle size

Next will incorrectly trace dev dependencies to be included in the output node_modules, which will significantly increase the lambda bundle. For example, the @swc/core-* binary is ~33MB!

Add this to your next.config.js to help minimize the lambda bundle size

Copy
outputFileTracingExcludes: {
      '*': [
        '@swc/core',
        'esbuild',
        'uglify-js',
        'watchpack',
        'webassemblyjs',
        'sharp'
      ],
    },

Fetch behavior for ISR.

Only for next@13.5.1+

If you use ISR and fetch in your app, you may encounter a bug that makes your revalidate values inconsistent. The issue is that it revalidates using the lowest revalidate of all fetch calls in your page, regardless of their individual values. To fix this bug, you need to modify the fetch function in your root layout component with the following code snippet:

Copy
export default function RootLayout() {
  const asyncStorage = require("next/dist/client/components/static-generation-async-storage.external");
  //@ts-ignore
  const staticStore = (fetch as any).__nextGetStaticStore?.() || asyncStorage.staticGenerationAsyncStorage;
  const store = staticStore.getStore();
  store.isOnDemandRevalidate = store.isOnDemandRevalidate && !(process.env.OPEN_NEXT_ISR === "true");
  return <>...</>;
}

Pricing

All of the resources used in the overall architecture are pay-per-use. If your website does not get traffic, you have no costs.

As the traffic increases, the costs get higher - however costs are much lower compared to Vercel.

// TODO pricing examples

API reference