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.

What is Static Export?

Static export means the Next.js project is built into pure HTML, CSS, and JavaScript files. After the build process, the application becomes a fully static website, similar to a normal HTML project. It does not require any server or Node.js runtime to run. Because of this, static export can be deployed on almost any platform, including cPanel, shared hosting, or any panel-based hosting environment. It is very fast because pages are served directly as static files. However, it does not support server-side rendering, API routes, or middleware. All data is generated at build time, so if you change anything in the admin panel such as settings, content, or SEO, those changes will not appear until you rebuild and redeploy the project.

Watch on YouTube

warning

Note: Currently, Next.js static export does not support dynamic updates from the admin panel, including Settings, Themes, SEO, PWA, etc. Therefore, before building the app for production, make sure to update all required settings from the admin panel. Once updated, you can build the app, and the settings will be correctly reflected in the production version.

If you need to make any changes to the settings in the future, you will need to rebuild and redeploy the app to apply those changes in production.

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

If you use Windows then follow this Link to install Node.js.
If you use Mac then follow this Link to install Node.js.
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

Open the src/app/manifest.ts file.

import type { MetadataRoute } from "next";
export const dynamic = "force-static";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "Investra",
    short_name: "Investra",
    description: "Investment platform",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#000000",
    icons: [
      {
        src: "/web-app-manifest-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/web-app-manifest-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
    screenshots: [
      {
        src: "/desktop-screenshot.png",
        type: "image/png",
        form_factor: "wide",
        sizes: "1366x768",
        label: "Desktop view of Investra",
      },
      {
        src: "/mobile-screenshot.png",
        type: "image/png",
        form_factor: "narrow",
        sizes: "400x800",
        label: "Mobile view of Investra",
      },
    ],
  };
}

Update all the values according to your needs:

name: The full name of your application (displayed on install prompts)
short_name: A shorter name for your app (displayed on home screens)
description: A brief description of your application
background_color & theme_color: Customize to match your brand colors

Adding PWA Icons

The icons array defines the app icons used when users install the PWA. You can add more icons to support different device resolutions:

All icon files must be placed in the public folder
Ensure each icon's src path matches the actual filename in your public folder
Common sizes include 192x192 (required), 512x512 (required), and optionally 384x384, 256x256, etc.
All icons should be in PNG format with type: "image/png"

tip

For best results, include at least a 192x192 and 512x512 icon. You can use tools like Favicon.io or RealFaviconGenerator to generate all required sizes from a single image.

Step 3: Setup the ENV file

Copy the .example.env file to .env file end edit the file.
Add the following variables to the .env file:

NEXT_PUBLIC_API_URL=http://app.example.com #Required
NEXT_PUBLIC_TOKEN_NAME=token
NEXT_PUBLIC_ASSET_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

Install the dependencies using npm install

npm install --force

Build the app for production:

npm run build

We use sharp package for image optimization. If you get error on sharp package then remove the sharp package from the package.json file.

"dependencies": {
"sharp": "^0.32.1", #remove this line
}

Then remove the node_modules folder and package-lock.json file. Then run the npm install --force command again and build the app again.

npm run build

Step 5: Zip the out folder

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

Step 6: Upload the out.zip file to cPanel

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

    # Remove trailing slash and map to .html
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^(.*)/$ $1.html [L]

    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 git directory
    RewriteRule (^|/)\.git - [F,L]

    # Force HTTPS
    RewriteCond %{HTTPS} !=on
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

# Redirect all 404 errors
ErrorDocument 404 /404.html

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

Most of the cpanel work with this .htaccess file. But if you face any issue then use the below code for like (KeyWeb).

<IfModule mod_rewrite.c>
    RewriteEngine On

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

    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]
</IfModule>

# Serve custom 404 page
ErrorDocument 404 /404.html

Conclusion

Congratulations! You have successfully deployed the web frontend on cPanel.

What is Static Export?​

Prerequisites​

Node Installation​

Step 1: Find the static export file​

Step 2: PWA Setup​

Adding PWA Icons​

Step 3: Setup the ENV file​

Step 4: Build the app for production​

Step 5: Zip the out folder​

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

Step 7: Add .htaccess file​

Conclusion​