Chapter 11: Different Deployment Platforms

In the previous chapters, we saw how Next.js works, how to optimize it for SEO, how to deal with performance, how to adopt UI frameworks, and how to fetch data on both the client and server sides, eventually being able to create a fantastic web application. But then, we have a problem: how should we ship it to production? There are many different hosting providers, cloud platforms, and even Platform as a Service (PaaS) solutions out there; how do we pick one?

In this chapter, we will see how to choose the right deployment platform.

We will look at the following in detail:

• How choosing the right deployment platform could affect performance
• How to decide between different cloud solutions
• What are the most popular alternatives for hosting a Next.js app?

By the end of this chapter, you'll be able to deploy any Next.js application to any host, knowing how to choose the right provider from the most popular hosting...

Technical requirements

To run the code examples in this chapter, you need to have both Node.js and npm installed on your local machine.

If you prefer, you can use an online IDE, such as https://repl.it or https://codesandbox.io; they both support Next.js, and you don't need to install any dependency on your computer. As with the other chapters, you can find the code base for this chapter on GitHub: https://github.com/PacktPublishing/Real-World-Next.js.

A brief introduction to different deployment platforms

While thinking about a new web application, we have many things to consider. For example, how do we want to render its pages, which styling method do we want to adopt, where does data come from, how do we manage the application state, and where do we want to deploy the application itself?

Focusing on that last part, we could split one problem into two: where do we want to deploy our application and how do we want to do it?

In fact, most of the time, choosing a deployment platform also means selecting a slightly different deployment method. There are specific cloud platforms, such as Vercel, Netlify, and Heroku, where the deployment process is standardized and incredibly simplified to be accessible for everyone. With other cloud providers, such as AWS, Azure, and DigitalOcean, you have complete control over the whole deployment process. Unfortunately, in many cases, you have to implement this process on your own or use third...

Deploying to the Vercel platform

Develop, preview, ship is not just a motto. It's the perfect description of the company that developed Next.js (alongside many other open source libraries) and an excellent cloud infrastructure for deploying and serving web applications.

With Vercel, you almost don't need to configure anything. You can deploy your web application from the command line using their CLI tool, or create an automatic deployment after a push to the main Git branch.

One thing to know before getting started with Vercel is that the platform is built specifically for static sites and frontend frameworks. Unfortunately, that means that custom Node.js servers are not supported.

But at this point, you might be wondering whether only statically generated or client-side-rendered Next.js websites are supported. The short answer is no. In fact, Vercel supports server-side-rendered pages by serving them via serverless functions.

What Does "Serverless Function...

Deploying a static site to a CDN

When talking about a CDN (short for content delivery network), we refer to a geographically distributed network of data centers used to achieve high availability and performance when serving content to users in any part of the world.

To keep it simple, let's give an example. I currently live near Milan, Italy, and I want my web application to be used in potentially any part of the world. So, where should I host it from a geographical point of view?

Certain providers, such as Amazon AWS, DigitalOcean, and Microsoft Azure (and many more), will let you choose a specific data center to serve your application from. For example, I could select AWS eu-south-1 (Milan, Italy), ap-northeast-2 (Seoul, South Korea), or sa-east-1 (São Paulo, Brazil). If I choose to serve my web application from Milan, Italian users will notice a very low latency when trying to reach the web application; it is geographically located very close to them. The same could...

Choosing a CDN

When looking for a CDN to deploy our web application, we will find many different alternatives. Prominent players in this area are (but are not limited to) Amazon AWS, Microsoft Azure CDN, and Cloudflare. Of course, there are many other alternatives, but these are the ones I've tried and had great experiences with, so I feel confident recommending them to you.

The CDN deployment adds some configuration steps, but spending a bit more time to achieve the best possible performance might be worth it.

Talking about AWS, for instance, the procedure won't be as straightforward as the Vercel one. We would need to build a pipeline (with either GitHub Actions or GitLab Pipelines, and so on) to statically generate the web application, then to push it to AWS S3 (a service used for storing static assets), and eventually use a CloudFront (AWS CDN) distribution to let users reach these static assets over HTTP requests. We would also need to link our CloudFront distribution...

Deploying Next.js on any server

So far, we've seen some alternatives for deploying our Next.js application to CDNs and managed infrastructures, such as Vercel and Netlify. Still, there is another alternative that we haven't considered yet; what if we want to deploy our application to our private server?

Even though this is a common situation, it is also the most complex one by far. While platforms such as Vercel, Netlify, and Heroku manage the server for us, sometimes we may want to host our application on a private server where we have to control everything independently.

Let's have a quick recap of what the previously mentioned managed platforms can do for us:

• Automatic deployments
• Rollback to previous deployments
• Automatic deployments for feature branches
• Automatic server configuration (Node.js runtime, reverse proxy, and so on)
• Built-in scaling capabilities

By choosing a custom server, we have to implement all these features on...

Running Next.js in a Docker container

Docker, and virtualization in general, has changed forever the way we build and deploy our applications. It provides a set of useful utilities, commands, and configurations to make our build reproducible on any server, making our application available on almost every operating system by creating a virtual machine running our program (or web application).

In Case You Are New to Docker

Docker is an important tool to consider when building and deploying any computer program (a web application, database, or anything else). If you're new to this technology, I highly recommend reading the official Docker documentation at https://www.docker.com before starting to use it. If you're interested in a hands-on approach to learning Docker, I'd also recommend you read Mastering Docker – Fourth Edition by Russ McKendrick (https://www.packtpub.com/product/mastering-docker-fourth-edition/9781839216572); it provides a complete guide to...

Summary

In this chapter, we've seen different deployment platforms for our Next.js application. There's no perfect solution for building and deploying Next.js apps, as it depends on the specific use case and challenges that every project brings.

Vercel, Netlify, and Heroku (just to quote some) are all excellent alternatives for quickly deploying a Next.js application to production. On the other hand, Cloudflare Pages, AWS S3 and AWS CloudFront, and Microsoft Azure CDN can really provide excellent performance for our static sites, which competes with all the other great solutions we've seen in this chapter when it comes to serving a statically generated website.

Docker is probably one of the most flexible solutions. It allows us to deploy our application everywhere, making it easy to replicate the production environment on every machine.

Again, there's no "perfect" solution for deploying a Next.js application, as the competition in this field is...