Ultimate Deployment Guide

How am I running it locally?

When we work together in this IDE, I have access to an embedded terminal in your workspace. To run your app locally, I simply execute:

npm run dev

This starts a local Node.js Development Server (usually Vite or Webpack). This server handles "Hot Module Replacement" (HMR), meaning it watches your files and instantly updates the browser when we change code. However, this server is only for development. It is not optimized or secure enough to be exposed to the internet.

Deploying React (Vite/CRA) to Shared Hosting

Shared hosting (like Namecheap, Hostinger, GoDaddy) typically uses Apache or Nginx servers designed to serve static files (HTML, CSS, JS, Images). They do not natively run Node.js commands like npm start in their standard web directories.

1 Build the Project

Instead of running a dev server, we must "build" the project. This bundles all your React code into standard, minified static files that any web browser can understand.

npm run build

This command creates a dist folder (or build if using Create React App).

2 The Routing Problem (.htaccess)

To fix this, we tell the Apache server: "If a file or folder doesn't exist, just load index.html and let React handle the routing." We do this by creating a file named .htaccess in the public/ folder before building (so it gets copied to dist):

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
        

3 Upload to Namecheap

1. Zip the contents of your dist folder (not the folder itself).
2. Log into Namecheap cPanel and open File Manager.
3. Navigate to your domain's root folder (usually public_html).
4. Upload the zip file and extract it.
5. Make sure you enable "Show Hidden Files" in cPanel settings to verify the .htaccess file is there!

Deploying Next.js to Shared Hosting

Next.js is traditionally a full-stack framework that requires a Node.js server. However, if you are purely building a frontend or using Supabase for your backend, you can export Next.js as a Static Site (SSG) to run on shared hosting without a Node server.

1 Update next.config.js

You must tell Next.js to do a static export instead of building for a Node server.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // This is the magic line
  trailingSlash: true, // Helps with static routing
  images: {
    unoptimized: true // Required because Next's image optimizer needs a Node server
  }
};

export default nextConfig;
        

2 Build the Project

Run the standard build command. Because of the config change, Next.js will generate a static version of your site.

npm run build

This creates an out folder (instead of the usual .next folder).

3 Handling Routes

Because you enabled trailingSlash: true, Next.js generates physical HTML files for every route (e.g., out/admin/index.html). Because physical files exist, Apache knows exactly how to serve them. An .htaccess file is generally not required for basic Next.js static exports, but adding a fallback error page is good practice.

4 Upload to Namecheap

1. Zip the contents of the out folder.
2. Upload to Namecheap cPanel -> public_html.
3. Extract the files. Your Next.js site is now live!