BLOG #01

Deploying next.js site (static) with CPanel

December 1, 2024
1

Step 1: Register to a CPanel hosting provider (Prabhu-host, Babal-host etc.). Then register your domain.

2

Step 2: Click on "Log in to CPanel". Then click on "File Manager"

3

Step 3: Make sure your package.json has this:

json
"scripts": {
  "dev": "next dev --turbopack",
  "build": "next build",
  "start": "next start"
},
4

Step 4: Make sure your next.config.js looks like this:

javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true
  }
};
export default nextConfig;
5

Step 5: Open your terminal and go to your project root folder. Then run the following commands.

bash
npm install 
npm run build

💡 This will generate a new folder "out" which contains the static website

6

Step 6: Open your terminal inside the "out" folder and run the following command

bash
tar -czvf out.tar.gz *

💡 This will generate a compressed tar.gz file

7

Step 7: Inside the file manager, go to "public_html" and upload the out.tar.gz file

8

Step 8: Extract the uploaded file.

Success!

Finally visit your domain to make sure the deployment was successful.