Skip to main content

Static Export

This guide assumes you want to host a static Next.js build (no Node.js runtime). You’ll upload the exported out/ folder to cPanel and serve it like a plain HTML site. This avoids CloudLinux/NodeJS Selector issues on cPanel.

Watch on YouTube

Prerequisites​

Before you start, make sure you have the following installed on your cPanel:

  • Ensure that you already uploaded the admin on cPanel and setup all the necessary configuration and you admin url are is working fine. Example (app.domain.com)
  • Make sure your local machine has Node.js installed and the version is 22 or higher.

Node Installation​

  1. If you use Window then follow this Link to install Node.js.

  2. If you use Mac then follow this Link to install Node.js.

  3. If you use Linux then follow this Link to install Node.js.

Step 1: Find the static export file​

On the core folder you will see have static-client.zip file. Extract the zip file.

and Go to project root directory,

Step 2: PWA Setup​

  1. Open the src/app/manifest.webmanifest file and remove the start_url field.
{
  "name": "My Next.js Application",
  "short_name": "Next.js App",
  "description": "An application built with Next.js",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/fb-logo.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/fb-logo.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

update all the value according to your needs. also on the icons section you can add more icons. Node: All the icons should be the size of 192x192. If you want to add more icons, you can add them in the icons array. All the icons upload on public folder. Make sure that all the icons are of the same size and type also make sure that name is correct as per the manifest file.

Step 3: Setup the ENV file​

  1. Copy the .example.env file to .env file end edit the file.

  2. Add the following variables to the .env file:

NEXT_PUBLIC_API_BASE_URL=http://app.example.com
NEXT_PUBLIC_TOKEN_NAME=token
NEXT_PUBLIC_BASE_URL=http://example.com
info

Note: Before the adding your API_BASE_URL which you admin url check that is working fine. Example (app.domain.com). If not, then you will get error on the client side when you try to build the app.

Step 4: Build the app for production​

  1. Install the dependencies using npm install
npm install --force
  1. Build the app for production:
npm run build

Step 5: Zip the out folder​

  1. Go to the out folder.
  2. Select all the files and compress them as out.zip file.

Step 6: Upload the out.zip file to cPanel​

  1. Upload the out.zip file to cPanel.

Step 7: Add .htaccess file​

Now add the .htaccess file to your cPanel and add the following code:

<IfModule mod_rewrite.c>
    Options +FollowSymLinks -MultiViews

    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^(.*)/$ $1.html

    RewriteCond %{REQUEST_FILENAME}.html -f
    RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L]

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME}\.html -f
    RewriteRule ^(.*)$ $1.html [NC,L]

    # Protect some contents
    RewriteRule ^.*/?\.git+ - [F,L]

    RewriteCond %{ENV:HTTPS} !on
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

Copy the above code to your .htaccess file and save it.

Conclusion​

Congratulations! You have successfully deployed the app on cPanel.