Deploying Next.js 13 apps to Netlify: replace an existing React app
Tags: nextjs, netlify, react, tutorial
Published: 2023-06-13 16:11:51

Deploying a Next.js 13 application to [Netlify](https://www.netlify.com/) 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](https://www.netlify.com/) and running on a custom domain. 

- You have [Node.js](https://nodejs.org/en) installed on your machine.

- You must have an account on [Netlify](https://www.netlify.com/). 

- 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:

```javascript
npx create-next-app@latest 
```

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

![Next.js 13 setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byn2mqnj2c26r1l2y2eq.PNG)

In your terminal, run the following:

```javascript
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. 

```javascript
[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:

```javascript
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](https://app.netlify.com/signup).

![Login into netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dddufe8a7fnxfu92pbvt.png)

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.

![Netlify dashboard after login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5087xonqrl2e952zbwsd.png)

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

![Different Git providers to import your project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gjqurn1ff3xwcjb028e.png)

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

![Import existing Next.js repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd7l1wopn4xn4611p4fz.png)

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.

![Deploy your Netlify site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrpe9lkoodz18n6ati3c.png)

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

![Next.js project deployed successfully](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udt8ootgi7effn5ctq6y.PNG)

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**.

![Replace old react app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl5o28n2x8i2mqxrjj36.png)

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

![Link your repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u967l9ldab77c2oabpfa.png)

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.

![Deployed succesfull](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6l8vi2qfjta2zzb36fn.gif)

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](https://docs.netlify.com/integrations/frameworks/next-js/overview/)
[Official Next.js Documentation](https://nextjs.org/docs)