Deploying Next.js 13 apps to Netlify: replace an existing React app

Deploying a Next.js 13 application to Netlify is easy. Moreover, it is possible to easily replace an existing React app or website on Netlify (provided it's on a custom domain) with a Next.js 13 application.

In this article, you will learn how to:

• Deploy a Next.js 13 project to Netlify.

• Change or replace a React application or website hosted on Netlify with a custom domain.

Prerequisites

The following is necessary to understand this article:

• You have an existing React app or website deployed to Netlify and running on a custom domain.

• You have Node.js installed on your machine.

• You must have an account on Netlify.

• You have a Git provider account, E.g., Github, Gitlab, Bitbucket.

• Yarn package manager to install and run the scripts.

Getting started with Next.js

To get started with Next.js, run the following command in your terminal:

npx create-next-app@latest 

The command above will create a Next.js project. Next, follow the series of prompts that are displayed.

In your terminal, run the following:

yarn dev

The command above will start the local development server for your project. Now open your browser and visit http://localhost:3000. Your Next.js project should be running on port 3000.

Now that you have a Next.js project installed successfully on your machine create a file called netlify.toml in the root of your project. Copy and paste the code snippet below into the netlify.toml file.

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

Here is a breakdown of the code above:

[build]

This specifies the build settings.

command
This specifies the command to run during the build process. In
other words,
this command is set to npm run build.

publish
Specifies the directory that contains the static files to be published and served by Netlify. In this case, it is set to .next, indicating that the .next directory will be published.

[[plugins]]
This specifies the plugins used during the build process.

package
Specifies the package name of the plugin. In this case, it is set to @netlify/plugin-nextjs, indicating that the Netlify plugin for Next.js will be used during the build process.

Now that you have some code snippets inside the netlify.toml file, install the Netlify plugin by running the following command:

yarn add @netlify/plugin-nextjs

Commit and push your code to a Git provider of your choice. In the next section, you'll see how to deploy a Next.js project to Netlify.

Deploying Next.js project to Netlify

Before deploying your Next.js project to Netlify, you must log in to your Netlify account. If you don’t have an account, sign up here: Register for free.

Once you have selected a Git provider, you will be redirected to the Netlify dashboard. Click on Add new site.
Select Import an existing project from the drop-down.

Import your existing Next.js project using a Git provider of your choice.

You can now search and select the repository name of your Next.js project.

It's now time to deploy your Next.js project to Netlify. On Netlify's platform, Next.js apps or websites are automatically detected. Once you have selected the repository, click the Deploy Site button.

When the deployment process is complete, Netlify gives you a link (always ends with .netlify.app) to check your deployed project on your dashboard.

Your Next.js project has been successfully deployed to Netlify.🎉

Now that you have a Next.js project deployed to Netlify, you should replace the existing React app or website.

Replace the existing React app

It’s time to replace the old React app or website on Netlify with the Next.js project (deployed in the previous step).

You can find the old React app or website on your Netlify dashboard.
Select Deploys on the left-hand side of your Netlify dashboard.
Click on Deploy Settings.

Click on Manage Repository. A drop-down option is displayed.
Select Link to a different repository.

Import the deployed Next.js project using a Git provider of your choice.
You can find and select the repository name of the deployed Next.js project.
Click on the Deploy Site button.

From your Netlify dashboard, click on the old React app or website URL when the deployment is complete. In the next few seconds, you will notice that the old React app or website has been replaced with the Next.js version, and you have a Next.js project running on that same custom domain.

Conclusion

This article showed how to deploy a Next.js 13 project to Netlify and replace an existing React app or website on a custom domain.

Resources

Next.js on Netlify
Official Next.js Documentation