# Migrate a Next.js App from Vercel to AWS

## Overview

Deploying a Next.js[^1] app on Vercel is straightforward because most infrastructure concerns are handled automatically.

When moving the same application to [Amazon Web Services](#user-content-fn-2)[^2], these responsibilities shift to you.

This guide walks through the most common issues developers face when migrating Next.js apps from Vercel to AWS, and how to fix them to keep your application stable and production-ready.

{% hint style="success" %}
Estimated time: 1 hour
{% endhint %}

## Problem

Developers move away from Vercel once their app starts growing.

Costs go up, you need more control, or you hit limitations in how things are set up.

Moving to Amazon Web Services gives you that flexibility but it also means you’re now responsible for everything Vercel was handling for you.

That’s where things start to break.

The same app that worked perfectly before can run into issues like:

* **Wrong environment variables** -> API or DB calls fail
* **Files don’t persist** -> uploads disappear after restart
* **Too many DB connections** -> random 500 errors
* **Cache not shared** -> users see different data
* **No logs/alerts** -> failures are hard to debug

These aren’t code problems.

Their infrastructure assumptions that no longer hold once you leave Vercel.

## How Stakpak Helps?

Moving to Amazon Web Services means dealing with a lot more moving parts.

Stakpak simplifies that.

* **No need to learn every AWS service** -> just describe what you want, Stakpak handles the setup
* **Understands your infrastructure** -> scans your app and figures out how everything is connected
* **Handles the heavy lifting** -> networking, services, configs, and integrations
* **Finds and fixes issues as you go** -> no digging through logs or AWS consoles
* **Keeps everything consistent** -> avoids misconfigurations across environments

Instead of spending time figuring out AWS, you can focus on your app and let Stakpak handle the rest.

## Architecture

<figure><img src="/files/Fw0ZkRBMw5z4KgwBVur3" alt=""><figcaption></figcaption></figure>

## Application

### What the app does

A user submits feedback feature request, bug, question, or idea.

* It appears on the homepage, sorted by votes.
* Other users upvote posts they agree with.
* Posts can include images (screenshots or mockups).
* Search and filters help find posts by keyword, category, or status.
* Clicking a post opens a detail page with comments.
* A dashboard shows total posts, votes, statuses, and top items.

You can check the code source [here](https://github.com/noureldin-azzab/feedbackboard)

Now we can start that we understand the app and the architecture, we can start migrating it

## Step-by-Step Guide

### Prerequisites

1. [Install Stakpak](/docs/get-started/install-stakpak.md)
2. Cloud provider credentials configured

### Deployment

1. All you need to do is open Stakpak and ask it to `migrate this app from Vercel to AWS`
2. It will start by analyzing the app

<figure><img src="/files/ZI5p9UqTYDPal2YnCW4q" alt=""><figcaption></figcaption></figure>

3. Then, as you can see, it will start asking us questions about the different deployment options

<figure><img src="/files/tByfMbp1rCHpkGG0wXq4" alt=""><figcaption></figcaption></figure>

4. Let's choose the [Open Next](#user-content-fn-3)[^3] + Terraform

<figure><img src="/files/e0Konl9cOXK8wsWkdP2R" alt=""><figcaption></figcaption></figure>

4. Here, it's asking if we want to choose Terraform[^4] or the [AWS CDK](#user-content-fn-5)[^5], lets choose Terraform[^4]

<figure><img src="/files/mmG0TI9zN2GhEJahhodP" alt=""><figcaption></figcaption></figure>

5. Then it asks if we have a custom domain
6. Here, it shows the concerns that we were talking about earlier

<figure><img src="/files/k6gwlUpDDXvNOLUWnRim" alt=""><figcaption></figcaption></figure>

Now lets let it do its magic

<figure><img src="/files/oJdpUfB3KGsAYoMzpIJY" alt=""><figcaption></figcaption></figure>

7. It Set up all AWS infrastructure, CDN, serverless functions, storage, caching, 41\
   resources in total with Terraform
8. Migrated file uploads, images now stored in S3 and served through CloudFront CDN instead\
   of Vercel's ephemeral filesystem
9. Then it Handled CloudFront signing, created a fetch wrapper so all browser actions (voting,\
   posting, commenting, uploading) work seamlessly through AWS
10. Pulled secrets automatically, grabbed Supabase credentials from the Vercel dashboard\
    using Stakpak's browser extension

Now lets see if its working

### Testing

<figure><img src="/files/DnmI0wHoakWTX2ZOE2qH" alt=""><figcaption></figcaption></figure>

Then it started testing the deployment:

* Validated every route, tested all pages (homepage, dashboard, new post) and API\
  endpoints (posts, stats, votes, comments, uploads) returning HTTP 200 with live data from\
  Supabase
* And tested the end-to-end user flows: uploaded an image to S3 and verified it served back\
  through CloudFront, voted on a post, and confirmed the vote count updated

Now everything is working🥳

Now, let's ask it to set up Stakpak [Autopilot](/docs/how-it-works/autopilot.md)

{% hint style="info" %}
Stakpak Autopilot monitors your apps 24/7, detects unexpected changes, fixes what’s safe, and only alerts you when it actually matters.
{% endhint %}

### Monitoring

* Here it's asking us what do we want to monitor exactly, i chose all

<figure><img src="/files/dlLmXELBJ4K1d580CML4" alt=""><figcaption></figcaption></figure>

That's it

<figure><img src="/files/oTH8zzxYWWx3nMB1oQ4t" alt=""><figcaption></figcaption></figure>

### Final Architecture

<figure><img src="/files/pqp44QPNmbOnUXpgBnmP" alt=""><figcaption></figcaption></figure>

## Extra Resources:

### Related Use Cases

* [Load Test to Optimize Cloud Costs](/docs/tutorial/load-test-to-optimize-cloud-costs.md)
* [Set Up a Local AWS Environment with MiniStack](/docs/tutorial/set-up-a-local-aws-environment-with-ministack.md)
* [Detect and Fix Missing Backups for a PostgreSQL DB in Production](/docs/tutorial/detect-and-fix-missing-backups-for-a-postgresql-db-in-production.md)

and more...

### References

* [Install Stakpak](/docs/get-started/install-stakpak.md)
* [Configure Stakpak](/docs/get-started/configure-stakpak.md)
* [Configuration and credential file settings in the AWS CLI](https://docs.aws.amazon.com/cli/v1/userguide/cli-configure-files.html)
* [Autopilot](/docs/how-it-works/autopilot.md)
* [Handling Secrets](/docs/how-it-works/handling-secrets.md)
* [Warden Guardrails](/docs/how-it-works/warden-guardrails.md)

[^1]: Next.js is an open source web development framework built on top of React. It enables developers to create performant, server rendered, and statically generated web applications with minimal configuration. Maintained by Vercel, it has become one of the most popular frameworks for modern front-end and full-stack development.

[^2]: Amazon Web Services (AWS) is a cloud computing platform and subsidiary of Amazon. It provides on-demand computing services such as storage, processing power, databases, and machine learning to businesses, governments, and individuals worldwide. AWS is a foundational player in the global shift toward scalable, pay-as-you-go cloud infrastructure.

[^3]: OpenNext started in 2023 as an open-source initiative to make Next.js truly portable — deployable on any platform, not just Vercel. What began as a serverless adapter for AWS Lambda by the [SST](https://sst.dev/) community has grown into a multi-platform effort backed by [Cloudflare](https://developers.cloudflare.com/), [Netlify](https://www.netlify.com/), and a broader community of contributors.

[^4]: Terraform is an infrastructure as code tool that lets you build, change, and version infrastructure safely and efficiently. This includes low-level components like compute instances, storage, and networking; and high-level components like DNS entries and SaaS features.

[^5]: **AWS CDK (Cloud Development Kit)** is a framework from Amazon Web Services that lets you define cloud infrastructure **using real programming languages** instead of writing raw configuration files.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stakpak.gitbook.io/docs/tutorial/migrate-a-next.js-app-from-vercel-to-aws.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.