Host/Deploy/upload Next.js 13 frontend in cPanel
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.
According to the documentation about distDir
option:
You can specify a name to use for a custom build directory to use instead of.next
.
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