2 min read

Host/Deploy/upload Next.js 13 frontend in cPanel

Host/Deploy/upload Next.js 13 frontend in cPanel
Photo by Lautaro Andreani / Unsplash

In fact, a frontend built with Next.js 13 can be a static files like a traditional React, Vue, or any frontend framework, of course, with the appropriated configuration.

In this time I am summing you have a frontend with Next.js ready to deploy to your cPanel and I are omitting a lot of things to do this short and at the point.

The configuration

The first thing you need is add the next lines to your next.config.js

const nextConfig = {
  output: 'export',
  distDir: 'dist',
}

module.exports = nextConfig

According to the documentation about output option:

During a build, Next.js will automatically trace each page and its dependencies to determine all of the files that are needed for deploying a production version of your application.
next.config.js Options: output
Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.

According to the documentation about distDir option:

You can specify a name to use for a custom build directory to use instead of .next.
next.config.js Options: distDir
Set a custom build directory to use instead of the default .next directory.

After this, you can run the build command

# with yarn
yarn build

#with NPM
npm run build

Now you have a new directory inside your project called dist this generated a static files like HTML, JavaScript, and CSS, now you can upload the dist directory to your cPanel.

Extra note

If you are using Git make a sure to add the dist to your .gitignore