Overview of OpenNext, AWS Amplify, Netlify, and other Next.js hosting options

Next.js has become a popular choice for web projects, thanks to its extensive features, ever-growing community and great developer experience. Speaking of hosting, Vercel is often the first platform that comes to mind. But is it really the best and only option available?

Vercel is undeniably an excellent choice for deploying your applications, providing first-class support for Next.js out of the box, reliable infrastructure and seamless developer experience. However, every scenario is unique, and Vercel might not be the perfect fit for your particular situation.

One of the common scenarios where it might not be the best choice is if you already have an existing AWS infrastructure or have had positive experiences with it and want to remain with the same setup.

Even though there is no traditional vendor lock-in, migrating a Next.js project to another serverless platform can be challenging. On the other hand, you can effectively run it as a Node.js application with a serverful approach (though with limitations), check out the documentation for details.

Moreover, you may encounter some complaints about Vercel's pricing model (click, click). Vercel kindly offers a pretty generous Hobby tier that is sufficient for most personal projects. The Pro plan, with its reasonable limits, is also a viable choice, but keep in mind that you are billed on a per user basis rather than for resource usage. However, the problem appears when usage exceeds certain thresholds, especially when application traffic grows significantly. At that point, it's crucial to make valuable improvements (such as optimizing static assets) or consider a more radical approach - exploring an alternative platform. Apart from that, other services like databases, storage, and logs are often required for applications that go beyond simple portfolio projects. While Vercel provides its own wrappers around existing services (e.g. Vercel Postgres, which is built on top of Neon but at a higher price), you may still need to invest time and effort to explore third-party services.

ALTERNATIVES​

A noteworthy competitor to Vercel that often comes to the fore is Netlify. It has established itself as one of the leading choices for hosting Next.js applications, gaining traction for its user-friendly interface, scalability and serverless architecture.

Application deployment follows a straightforward process similar to Vercel. In just a few minutes, you'll be able to access your application, review the deployment summary, inspect build artifacts, delve into function logs and much more. While some features may require a Pro plan, the Free-tier is more than sufficient for smaller projects. At the core of Netlify's deployment mechanism lies its edge network, a distributed network of servers strategically positioned across the globe, which ensures rapid content delivery to a user’s location. Moreover, this edge network also incorporates Edge Functions, similar to Vercel's, which enable middleware to behave identically to how it does on Vercel. Netlify's serverless architecture further enhances the deployment process by offloading computationally intensive tasks to AWS Lambda functions. These functions execute code in response to user requests, enabling dynamic content generation, database interactions, and other server-side functionalities. In general, most of the Next.js features are supported out of the box, although there may be some limitations (e.g. ISR revalidation timeout).

Given that Vercel and Netlify leverage AWS under the hood, why not deploy directly to AWS? It's possible!

CLOSER TO AWS​

One of the first options that comes up when googling "deploy Next.js on AWS" is AWS Amplify. Let's delve into what it is.

AWS Amplify is an excellent tool for beginners to AWS, as it abstracts away the complexities and eliminates the need to navigate through the labyrinth of AWS services. The user interface is intuitive, so it takes only a few simple steps to deploy your application (and it's not limited to Next.js projects only). If you don't already have a ready-made project, the setup is slightly different (you can use Next.js starter that Amplify offers by default). However, for more complex applications, you'll need to handle tasks like SSL/Routing configurations, database setup, storage, and so on.

The final result is a distributed CDN deployment with API endpoints running on AWS Lambda functions. However, there are a few considerations:

• Amplify may not immediately support the latest Next.js features, and some features might not work as expected or may require adjustments
• The infrastructure details are hidden, and although you can find the CloudFormation stack, it may not provide information you are looking for.

When it comes to pricing, for commercial applications with low to moderate traffic and a standard setup (database, logging, storage), Amplify is likely to be more cost-effective, mainly due to Vercel's user-based pricing model, even though you’re charged for both AWS resources and Amplify itself. For me details check out their docs.

FULL CONTROL OVER INFRASTRUCTURE WITH SST​

Among the various open-source solutions for deploying Next.js apps to AWS (Terraform, serverless-next.js) that you may come across, SST (Serverless Stack Toolkit) stands out as a relatively new and promising tool. It’s a comprehensive framework for deploying not only Next.js applications but also other modern tech stacks like Remix, Svelte, Astro and more.

Speaking of Next.js applications, SST leverages OpenNext framework under the hood, which basically takes Next.js build output and converts it into a format that in theory can be deployed to any serverless platform, but as for now only AWS Lambda is supported.

Integrating SST into an existing project is relatively straightforward. Add your AWS account keys to AWS CLI (how) and run the following command:

npx create-sst@latest

This command will install the necessary dependencies and add an SST configuration file to the root of your project. The framework is built on top of AWS CDK and provides high-level TypeScript abstractions for different AWS services and resources, such as Lambda functions, API Gateways, and databases. For simple applications, the configuration may look as follows:

export default {
  config(_input) {
    return {
      name: 'demo-project',
      region: 'eu-north-1',
    };
  },
  stacks(app) {
    if (app.stage !== "prod") {
      app.setDefaultRemovalPolicy('destroy');
    }


    app.stack(function Site({ stack }) {
      const serverCachePolicy = new cf.CachePolicy(stack, 'ServerCache', {
        queryStringBehavior: cf.CacheQueryStringBehavior.all(),
        cookieBehavior: cf.CacheCookieBehavior.none(),
        headerBehavior: cf.CacheHeaderBehavior.none(),
      })
      const site = new NextjsSite(stack, 'demo-project', {
        cdk: {
          serverCachePolicy
        },
        timeout: '20 seconds',
        memorySize: '2048 MB',
        environment: {
          DATABASE_URL: process.env.DATABASE_URL
        }
      });


      stack.addOutputs({
        SiteUrl: site.url,
      });
    });
  },
} satisfies SSTConfig;

Once configured, you can start your local development environment by running:

npx sst dev

This allows you to debug and test your Lambda functions locally, while being invoked remotely by resources in AWS. It works by proxying requests from your AWS account to your local machine. Changes are automatically detected, built, and live reloaded. To build and deploy your Next.js app on AWS, use the following command:

npx sst deploy --stage <stage_name>

It will provision the entire infrastructure defined in your configuration file. The initial deployment may take a while due to bootstrapping of all the necessary components that will help SST to take care of your application behind the scenes. Once you’re done, remove your stack with the following CLI command:

npx sst remove --stage <stage_name>

You may encounter some differences compared to how Vercel does things (such as middleware), but SST is constantly evolving to keep up with new Next.js releases, so be sure to check out their docs as you may find solutions to issues you have. Regarding pricing, SST is entirely free to use. You only pay for the actual AWS resources used by your application. However, there is a possibility of incurring additional fees for resources that aren’t explicitly defined in your configuration file, such as the warmer function. It's crucial to review the documentation thoroughly to avoid unexpected costs.

Overall, SST emerges as a promising toolkit for deploying Next.js apps and other modern tech stacks to AWS infrastructure. Its ability to support a wider range of frameworks and its focus on simplicity makes it an attractive option for developers seeking a streamlined deployment process.

SAAS ALTERNATIVE​

Flightcontrol is a relatively new Software-as-a-Service (SaaS) offering, created by the developer behind Blitz.js, that plays a role of wrapper around various AWS services. With its recent release of v2.0, Flightcontrol has positioned itself as a strong competitor to other popular solutions in the market. The updates in this version have significantly improved the developer experience and expanded the functionality of the platform.

Flightcontrol aims to align itself with Vercel, offering a seamless application deployment experience that extends beyond Next.js. To get started, all you need is to link your AWS account, which is done through a semi-automated process where Flightcontrol creates the necessary IAM privileges for you. In the wizard, you have the option to finely configure the required resources, such as server instances and databases, to suit your specific needs. Alternatively, you can describe your infrastructure using a configuration file. Although the number of available resources is currently limited, ongoing support is continuously expanding. Once you proceed, you'll find yourself in the Flightcontrol dashboard, which bears similarities to the Vercel interface. Here, you can easily monitor runtime logs, various metrics, reserved AWS resources, and even pricing. The dashboard is designed to be straightforward and intuitive, allowing for seamless navigation and understanding of your infrastructure.

Flightcontrol runs your application as a container managed by ECS Fargate, leveraging CloudFront for global deployment capabilities. It utilizes CloudFormation to spin up your infrastructure, allowing you to easily review all the resources created in the process.

It's worth noting that the pricing for Flightcontrol may be relatively high for teams, with costs of up to $50 per service. However, Flightcontrol also offers an exceptionally generous free-tier plan, which even includes commercial use. This makes it an attractive option for smaller teams or individual developers.

COMPARISON​

Let’s see how various features work on these platforms (you can find implementation in a repo). Next.js version - v14.0.4. Also, it's important to note that content propagation across CDN may take some time. While this isn't a critical issue, it can affect the time it takes for users to access new content.

As you can see, a pretty wide range of features is supported by each solution. However, a few of them may require additional steps to work or may function in an unexpected way.

CONCLUSION​

When it comes to selecting the ideal Next.js deployment platform, the perfect choice depends on your specific requirements. Vercel stands out as the top choice, unless:

• you're facing pricing issues
• you own AWS infrastructure
• you simply want to try something new

For those primarily concerned with cost-effectiveness and averse to significant changes, Netlify (or other PaaS providers compatible with Next.js) becomes a viable alternative, although it comes with its own drawbacks.

If AWS is your preferred hosting platform, SST is an excellent open-source option that offers complete control over deployments and resource management. Moreover, it’s absolutely free.

If you prefer the simplicity of not having to worry about infrastructure details, Amplify or Flightcontrol could be a good choice for you. These platforms take care of most of the underlying infrastructure complexity, allowing you to focus on your application logic. While Amplify might seem more cost-effective at first, there's a risk of unexpected issues that might be difficult to troubleshoot. In these cases, Flightcontrol comes in handy as an alternative solution.