Deploy your Next.JS projects in just a few clicks on Porter Cloud, and freely eject to AWS, Google Cloud, or Azure as you scale. Note that to follow this guide, you’ll need an account on Porter Cloud with a valid credit card. Every user will receive a free $5 credits on sign up.

​
What We’re Deploying

Next.js is an open-source React framework that enables developers to build server-rendered applications, static websites, and more, with an emphasis on performance and ease of use. It leverages the power of React for component-based development and introduces several built-in features such as automatic code splitting, optimized prefetching, and server-side rendering, ensuring that applications are fast and efficient. One of the main advantages of using Next.js is its hybrid rendering capabilities, allowing developers to choose between static generation or server-side rendering on a per-page basis, optimizing both user experience and server resources. Plus it has a vibrant and active community, which means you get access to a wealth of plugins and community expertise We’re going to deploy a sample NextJS server - but that doesn’t mean you’re restricted to NextJS. You’re free to use any and all Nodejs web frameworks (the ExpressJS web framework is also common among Porter users). This app’s a very basic app with a single endpoint - ‘/’ to demonstrate how you can push out a public-facing app on Porter Cloud with a public facing domain and TLS. The idea here is to show you how a basic app can be quickly deployed on Porter Cloud, allowing you to then use the same flow for deploying your code. You can find the repository for this sample app here: https://github.com/porter-dev/nextjs-getting-started. Feel free to fork/clone it, or bring your own.

​
Deploying Your App

Deploying an app from a GitHub repository on Porter involves - broadly - the following steps:
  1. Creating a new app on Porter where you specify the repository, the branch, any build settings, as well as what you’d like to run.
  2. Building your app and deploying it (automatically handled by Porter so you don’t have to worry about Continuous Integration and Continuous Deployment).
Let’s get started!

​
​Deployment Process: Creating an App and Connecting Your GitHub Repository

After creating a new project, on the Porter Cloud dashboard, select ‘Create a new application’, which opens the following screen: image-1 This is where you select a name for your Next.js app and connect a GitHub repository containing your code. Once you’ve selected the appropriate repository, select the branch you’d like to deploy to Porter Cloud.
If you signed up for Porter Cloud using an email address instead of a Github account, you can easily connect your Github account to Porter by clicking on the profile icon on the top right corner of the dashboard, selecting ‘Account settings’, and adding your Github account.

​
Configuration of Build Settings

Porter has the ability to automatically detect what language your app is written in and select an appropriate buildpack that can be used to package your Next.js app for eventual deployment automatically. Once you’ve selected the branch you wish to use, Porter will display the following screen: image-2 You can further tune your build here. For instance, we’re going to use the newer ‘heroku/builder:22’ buildpack for our new Next.js app.

​
Configuration of services

At this point, taking a quick look at applications and services is a good idea. An application on Porter is a group of services where each service shares the same build and the same environment variables. If your app consists of a single repository with separate modules for, say, an API, a frontend, and a background worker, then you’d deploy a single application on Porter with three separate services. Porter supports three kinds of services: ‘web’, ‘worker’, and ‘job’ services. Let’s add a single ‘web’ service for our app: image-3

​
Configure Your Service

Now that we’ve defined a single web service in the previous steps, it’s time to tell Porter how it runs. That means specifying what command to run for this service, what CPU/RAM levels to allocate, and how it will be accessed publicly. image-4 You can define what start command you’d like Porter to use to run your app in the ‘Main’ tab. This is required if your app’s being built using a buildpack; this may be optional if you opt to use a Docker file(since Porter will assume you have an ‘ENTRYPOINT’ in your Docker file and use that if it exists). image-5 The ‘Resources’ tab allows you to define how much CPU and RAM your app’s allowed to access. Porter Cloud imposes a limit on the resources that can be used by a single app; if your app needs more scalability it might make sense to look at Porter Standard and using your own AWS account instead. The cloud platform allows you to bring your own infrastructure and have more flexibility regarding resource limits. You can also use cloud provider credits from AWS/Azure/Google Cloud when using Porter Standard and it has a free plan for startups. Other than scalability, you may need to be hosting on your own infrastructure to meet any security framework standards like SOC 2. In this section, you can also define the number of replicas you’d like to run for this app and any autoscaling rules—these allow you to instruct Porter to add more replicas if resource utilization crosses a certain threshold. image-6 The ‘Networking’ tab is where you specify what port your app listens on - since we’ve kept NextJS’s default settings, we’re going to set the port to 8000. When you deploy a web app on Porter, we automatically generate a public URL for you to use - but you can also opt to bring your own domain by adding an A record to your DNS records, pointing your domain at Porter Cloud’s public load balancer, and adding the custom domain in this section. This can be done at any point - either while you’re creating the app or later once you’ve deployed it.
If your app listens on ‘localhost’ or ‘127.0.0.1’, Porter won’t be able to forward incoming connections and requests to your app. To that end, please ensure your app is configured to listen on ‘0.0.0.0’ instead.

​
​Deployment Process: Review and Merge Porter’s PR

Hitting ‘Deploy’ will show you the contents of a GitHub Action workflow that Porter would use to build and deploy your Next.js server: image-7 This Github Action is configured to run every time you push a commit to the branch you specified earlier - when it runs, Porter applies the selected buildpack to your code, builds a final image, and pushes that image to Porter. Selecting ‘Deploy app’ will allow Porter to open a PR in your repo, adding this workflow file: image-8 All you need to do is merge this PR, and your build will commence. image-9 image-10 You can also use the ‘Activity’ tab on the Porter cloud platform dashboard to see a timeline of your build going through. Once the build succeeds, you’ll also be able to see the deployment in action: image-11 image-12

​
Accessing Your App

After completing the previous steps, our new Next.js app’s now live on Porter Cloud. The Porter-generated unique URL or domain name is now visible on the dashboard under your app’s name. Let’s test it: image-13 Porter Cloud also provides logging and monitoring in the form of app logs and resource consumption metrics on the dashboard, so you can see how your web application is faring: image-15 image-16

​
Exploring Further

We’ve seen how you can deploy a Next.JS project on Porter. Here are a few pointers to help you dive further into configuring/tuning your Next.js application without having to manage your infrastructure/DevOps:
  1. Adding your own domain.
  2. Adding environment variables and groups (environment groups are only available when hosting on Porter Standard).
  3. Scaling your Next.js applications.
  4. Ensuring your app’s never offline (we’ll renew and manage the SSL certificate for you).