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.
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.
To get started with Next.js, run the following command in your terminal:
The command above will create a Next.js project. Next, follow the series of prompts that are displayed.
In your terminal, run the following:
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
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
command = "npm run build"
publish = ".next"
package = "@netlify/plugin-nextjs"
Here is a breakdown of the code above:
This specifies the build settings.
This specifies the command to run during the build process. In
this command is set to
npm run build.
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.
This specifies the plugins used during the build process.
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.
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.
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.
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.