A Step-by-Step Guide on How Does Nextjs App Be Deployed to the Public

Author

Posted Oct 26, 2024

Reads 584

Monitor Displaying Computer Application
Credit: pexels.com, Monitor Displaying Computer Application

To deploy a Next.js app to the public, you'll need to follow these steps. First, create a new project using the Next.js CLI by running `npx create-next-app my-app` in your terminal.

Next, navigate to your project directory and install the required dependencies by running `npm install` or `yarn install`.

Before deploying your app, make sure to build it by running `npm run build` or `yarn build`. This will create a production-ready version of your app in the `out` directory.

Once you've built your app, you can deploy it to a hosting platform such as Vercel, Netlify, or GitHub Pages.

Prerequisites

Before you start deploying your Next.js app to the public, you need to have a few things in place.

First and foremost, you need a fully developed Next.js application. If you haven't already, initiate the project and make sure it's ready for deployment.

You'll also need AWS account credentials to move forward.

It's also a good idea to have the AWS CLI installed on your local machine.

To ensure a smooth deployment process, make sure to configure your bucket properties.

Setting Up Next.js

Credit: youtube.com, How To Deploy a NextJS App To Vercel (EASY AND QUICK!!!)

To set up Next.js, you'll need to create a new project using the `npx create-next-app` command, which will generate a basic project structure with a `pages` directory and an `app.js` file.

The `pages` directory is where you'll create your routes, and Next.js will automatically handle client-side routing for you.

Next.js uses a file-based routing system, where each file in the `pages` directory represents a route.

To get started with Next.js, you'll need to install the `@zeit/next-css` package to enable CSS support.

Once installed, you can import CSS files into your pages using the `import` statement.

Next.js also supports server-side rendering (SSR) out of the box, which allows you to render your pages on the server before sending them to the client.

To enable SSR, you'll need to create a `getServerSideProps` function in your page components.

This function will be called on the server when the page is requested, allowing you to fetch data and render the page before sending it to the client.

Building and Preparing the App

Credit: youtube.com, Deploy a Next JS Application - Easy

To make the application ready for the production stage, we need to bundle the javascript files. This process is done by Next.js by executing the command "npm run build".

Next.js bundles the javascript files to make the application ready for deployment. The command "npm run build" is used to achieve this.

The bundled application is now ready for deployment to the public.

Running and Managing the App

To run and manage your Next.js app, you'll need to deploy it locally first. Deploy a locally built Next.js app to Vercel to make it accessible to the public.

Once deployed, you'll want to run the app in the background even after closing the terminal. We can achieve this using the PM2 tool to run, stop, and restart the Next.js application.

To do this, follow Step 7: Run Next.js via PM2 in the background. This will allow you to manage the app even when the terminal is closed.

Deployment

Credit: youtube.com, Why People Aren't Deploying to Vercel Anymore

Deployment is where the magic happens. You can deploy a locally built Next.js app to Vercel, making it easily accessible to the public.

You can also deploy your Next.js app to Koyeb using git-driven deployment. This process involves creating a web service on the Koyeb control panel, selecting GitHub as the deployment option, and choosing the repository and branch containing your application code.

Here are the steps to create a Koyeb App and Service:

  1. Click Create Web Service on the Overview tab of the Koyeb control panel.
  2. Select GitHub as the deployment option.
  3. Choose the GitHub repository and branch containing your application code.
  4. Name the App and Service.
  5. Click the Deploy button.

Once the build has finished, you will be able to access your application running on Koyeb by clicking the URL ending with .koyeb.app.

Set Next.js Environment Variables

Setting environment variables for Next.js is crucial for both static page generation and dynamic page generation with server-side rendering. Next.js uses environment variables at build time and at request time.

You'll need to set environment variables both within the build and deploy task, and in the Environment variables of your Azure Static Web Apps resource. This ensures that your environment variables are set correctly for both static and dynamic page generation.

Next.js uses environment variables at build time and at request time, so make sure to set them accordingly. This will help you avoid any issues with your environment variables not being set correctly.

Install PM2

Credit: youtube.com, PM2: The Ultimate Tool for Managing Your Node.js Applications

To manage the Next.js process running in the background after the terminal is closed, we need a tool like PM2.

PM2 is a tool that allows us to run, stop, and restart the Next.js application even after the terminal is closed.

To install PM2, you can use the following command in your terminal: pm2 install. This will download and install PM2 on your system.

To verify PM2 installation, execute the command pm2 in your terminal. You will get a response similar to the screenshot given below, indicating that PM2 has been installed successfully.

Deploy Next.js App

Deploying a Next.js app can be done in several ways, including deploying to Vercel or Koyeb.

To deploy a locally built Next.js app to Vercel, you'll need to follow the steps outlined in the Vercel documentation. You can also deploy to Koyeb using a git-driven deployment.

To deploy to Koyeb, follow these steps: click Create Web Service on the Overview tab of the Koyeb control panel, select GitHub as the deployment option, choose the GitHub repository and branch containing your application code, name the App and Service, and click the Deploy button.

Credit: youtube.com, The BEST way to host Next.js websites

A Koyeb App and Service will be created, and your application will be built and deployed to Koyeb. Once the build has finished, you'll be able to access your application running on Koyeb by clicking the URL ending with .koyeb.app.

You'll need to add a file called .dockerignore to the project's root directory to limit the files copied to the Docker image. This file should contain the following contents.

Here's a list of the deployment options for a Next.js app:

  • Vercel
  • Koyeb (git-driven deployment)

After deploying your Next.js app to Koyeb, you'll need to set up a reverse proxy in Nginx to redirect requests to the app running at port 3000. This can be done by implementing a technique called reverse proxy in Nginx.

Next.js Sitemap

When deploying your Next.js app on Vercel, it's essential to consider SEO. You can generate a sitemap.xml for your Next.js app on Vercel.

A sitemap helps search engines understand your app's structure and content, improving visibility and crawlability. You can learn how to generate a sitemap.xml for your Next.js app on Vercel.

Ismael Anderson

Lead Writer

Ismael Anderson is a seasoned writer with a passion for crafting informative and engaging content. With a focus on technical topics, he has established himself as a reliable source for readers seeking in-depth knowledge on complex subjects. His writing portfolio showcases a range of expertise, including articles on cloud computing and storage solutions, such as AWS S3.

Love What You Read? Stay Updated!

Join our community for insights, tips, and more.