Skip to main content

Deploying your Nextjs app to other platforms

In this tutorial, we'll cover how to deploy a Next.js application to various platforms. Next.js is a powerful React framework that has built-in server-side rendering and generates static websites. It's perfect for creating highly performant, SEO-friendly web applications.

Preparing Your Next.js App for Deployment​

Before you can deploy your Next.js app, you need to prepare your app for the deployment process. This involves a few steps:

  1. Update your scripts in package.json: Your package.json file should have a script named build that runs next build. This script builds your application for production usage.

    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start"
    }

  2. Create a .env file: If your application uses environment variables, you should create a .env file in your project root directory and declare your variables there. This file should not be committed to your repository. Instead, the variables should be set in your hosting platform.

  3. Run a local production build: Before deploying, it's a good idea to run a production build locally to identify and fix any potential issues. You can do this by running the npm run build command.

Deploying Your Next.js App to Vercel​

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with Next.js. Here's how you can deploy your Next.js app to Vercel:

  1. Sign up on Vercel: You can use your GitHub, GitLab, or Bitbucket account to sign up.

  2. Install Vercel CLI: You can install Vercel CLI by running npm i -g vercel.

  3. Deploy: Navigate to your Next.js project directory and run vercel. Follow the prompts to deploy your project.

Deploying Your Next.js App to Heroku​

Heroku is another popular platform for hosting applications. You can deploy your Next.js app to Heroku as follows:

  1. Create a Procfile: A Procfile is a file that specifies the commands that are executed by the app on startup. Create a Procfile in your project root directory and add the following line to it: web: npm run start.

  2. Create a new Heroku app: Log in to your Heroku account and create a new app. Choose a unique name for your Heroku app.

  3. Connect your GitHub repository: In your Heroku app's dashboard, go to the 'Deploy' tab, choose 'GitHub' as the deployment method, and connect your repository.

  4. Deploy: In the same 'Deploy' tab, scroll down to the 'Manual Deploy' section, choose the branch you want to deploy, and click on 'Deploy Branch'.

Deploying Your Next.js App to Netlify​

Netlify is a cloud computing company that offers hosting and serverless backend services for web applications and static websites. Here's how you can deploy your Next.js app to Netlify:

  1. Create a netlify.toml file: This file is used to configure how Netlify builds and deploys your site. Create a netlify.toml file in your project root directory and add the following lines to it:

    [build]
      command = "npm run build"
      publish = "out"

  2. Sign up on Netlify: You can use your GitHub, GitLab, or Bitbucket account to sign up.

  3. Create a new site: Click on 'New site from Git', choose your Git provider, and select your repository.

  4. Deploy: Choose your branch to deploy and click on 'Deploy site'.

By following these steps, you can deploy your Next.js app to various platforms with ease. Each platform has its own unique features and advantages, so choose the one that best suits your needs. Happy coding!