Skip to main content

Next.js Tutorial

Stars

Watch

Discuss

Sponsor

Use this GitHub Action

Deploying a new Next.js Application to AWS Lambda​

In this guide, we'll go through the steps to deploy a new Next.js application to AWS Lambda using the scaffoldly CLI. You'll have a fully functional, serverless Next.js app running on AWS in no time!

To deploy an existing Next.js application, see Presets.

Prerequisites​

  • AWS account with administrative privileges.
  • Node.js and npx installed.
  • Docker installed (for building images).
  • Scaffoldly CLI, which can be run with npx scaffoldly.
info

Detailed information can be found in Scaffoldly's Next.js Preset documentation.

Step 1: Setting Up AWS Permissions​

Before deploying your application, you need to grant Scaffoldly the necessary AWS permissions to manage services like Lambda, ECR, and IAM. To generate the required permissions, run the following command:

npx scaffoldly show permissions

This will output the necessary IAM policy that you need to attach to your AWS user or role. Follow these steps to configure AWS:

  1. Open the AWS IAM Console.
  2. Create or select an IAM User.
  3. Copy the permissions output from the Scaffoldly command and paste it into a new policy attached to your user.
  4. Run aws configure to set up your AWS credentials.

Once you've set up the permissions, you're ready to deploy your Next.js app.

tip

Scaffoldly supports methods other than IAM Users, such as IAM Roles and Profiles. See AWS for more information.

Step 2: Deploying Your Next.js Application​

With permissions set up, it's time to deploy your Next.js application using Scaffoldly. If you don't already have a Next.js app, you can create one by running:

npx create-next-app my-next-app
cd my-next-app

To deploy your app to AWS Lambda using Scaffoldly, run the following command:

npx scaffoldly deploy --preset nextjs

This command will automatically package and deploy your Next.js app, taking care of all AWS configurations such as Lambda functions, IAM roles, and a publicly accessible Function URL. The --preset nextjs option configures the deployment specifically for a Next.js application.

Example Output

Here's an example output of the deployment process:

✅ Updated Identity: arn:aws:iam::123456789012:user/scaffoldly
✅ Updated ECR Repository: my-next-app
✅ Updated Local Image Digest: sha256:8cd79bd887e8fe17dc80717ef560504bc7f83b01569bdfe1bc17f7eb0ae73b98
✅ Updated Secret: arn:aws:secretsmanager:us-east-1:123456789012:secret:my-next-app@main-I0l2Eb
✅ Updated IAM Role: my-next-app-b7547354
✅ Updated IAM Role Policy: my-next-app
✅ Updated Lambda Function: my-next-app
✅ Updated Function URL: https://2dapk4ireswcwkyxcas6uvbk2a0zgphr.lambda-url.us-east-1.on.aws
✅ Updated Function Policies: InvokeFunctionUrl
✅ Updated Schedule Group: my-next-app-b7547354
✅ Updated Local Image: 123456789012.dkr.ecr.us-east-1.amazonaws.com/my-next-app:0.1.0-b7547354
✅ Updated Local Image Digest: sha256:439a7d2f955d803b51677d548461486b01f250c954bcbcddc9a308598194534a
✅ Updated Lambda Function: my-next-app
✅ Updated Function Code: my-next-app@sha256:439a7d2f955d803b51677d548461486b01f250c954bcbcddc9a308598194534a
✅ Updated Function Alias: main (version: 1)
✅ Updated Function URL: https://2dapk4ireswcwkyxcas6uvbk2a0zgphr.lambda-url.us-east-1.on.aws

🚀 Deployment Complete!
   🆔 App Identity: arn:aws:iam::123456789012:role/my-next-app-I0l2Eb
   📄 Env Files: .env.main, .env
   📦 Image Size: 641.55 MB
   🌎 URL: https://2dapk4ireswcwkyxcas6uvbk2a0zgphr.lambda-url.us-east-1.on.aws

Step 3: Verifying the Deployment​

Once the deployment is complete, Scaffoldly will provide a Function URL where your Next.js app is hosted. To verify that your application is live, simply open the provided URL in your browser:

🌎 URL: https://2dapk4ireswcwkyxcas6uvbk2a0zgphr.lambda-url.us-east-1.on.aws

This URL will take you to your newly deployed Next.js application running on AWS Lambda.

Additional Information​

  • Environment Files: Scaffoldly generates .env.main and .env files containing environment variables for your deployment.
  • Image Size: Scaffoldly provides the size of the Docker image used for your deployment.

Now that the deployment is complete, you may want to save your Scaffoldly configuration for future deployments. You can do this by running:

npx scaffoldly show config --preset nextjs --save

This command will save the --preset nextjs configuration to package.json, eliminating the need to include the --preset flag on scaffoldly commands in the future.

tip

See the Configuration Reference for more details on the scaffoldly configuration options in package.json.

Conclusion​

Congratulations! You've successfully deployed a Next.js application to AWS Lambda using Scaffoldly. With just a few commands, you've managed to set up a fully serverless architecture, leveraging AWS services efficiently.

What's Next?​

Questions, Feedback, and Help​