Deploying NextJS and React Dashboards

Next.js is a React-based framework for building full-stack web applications, and it has become the go-to choice for building dashboards, admin panels, and data-driven interfaces. This guide covers what React and Next.js are, why developers choose them, and how to deploy a Next.js or React application on Ultra Web Hosting using the cPanel Node.js Selector.

01. What Is React?

React is a JavaScript library created by Meta (Facebook) for building user interfaces. It lets you break your UI into reusable components — self-contained pieces of code that manage their own state and rendering. A dashboard sidebar, a chart widget, a data table, and a notification bell can each be their own component, composed together to build a complete interface.

React uses a virtual DOM to efficiently update only the parts of the page that change, rather than reloading the entire page. This makes React apps feel fast and responsive, which is especially important for dashboards that display real-time data or handle frequent user interactions.

React is a library, not a framework. It handles the view layer (rendering UI) but does not include routing, server-side rendering, or build tooling out of the box. You can add these yourself, or use a framework like Next.js that bundles everything together.

02. What Is Next.js?

Next.js is a full-stack React framework created by Vercel. It takes React and adds everything you need for production applications: file-based routing, server-side rendering (SSR), static site generation (SSG), API routes, middleware, image optimization, and built-in CSS/Sass support.

Where React alone gives you components and rendering, Next.js gives you a complete application architecture. You get:

• File-based routing — create a file in the pages/ (or app/) directory and it becomes a URL route automatically
• Server-side rendering (SSR) — pages render on the server for each request, sending fully-formed HTML to the browser
• Static site generation (SSG) — pages are pre-rendered at build time, served as static HTML for maximum speed
• API routes — build your back-end API endpoints right inside the same project
• Middleware — run code before a request completes (authentication checks, redirects, logging)

Next.js is used in production by companies including TikTok, Notion, Hulu, Twitch, and Nike.

03. Why Next.js for Dashboards

Dashboards and admin panels have specific requirements that Next.js handles well:

Fast initial load. Server-side rendering means your dashboard loads with content already in place, rather than showing a loading spinner while client-side JavaScript fetches data. Users see a complete page immediately.

SEO when needed. Internal dashboards may not need SEO, but customer-facing portals and reporting pages benefit from server-rendered HTML that search engines can index.

API routes in the same project. Instead of building and deploying a separate API server, Next.js lets you create API endpoints in the pages/api/ directory. Your dashboard front end and its data API live in one codebase.

Authentication patterns. Next.js middleware makes it straightforward to protect routes, check session tokens, and redirect unauthenticated users — all on the server before the page even renders.

Component ecosystem. React’s massive library ecosystem means you can pull in battle-tested dashboard components: Recharts or Chart.js for data visualization, TanStack Table for sortable/filterable data tables, shadcn/ui or Material UI for pre-built UI components, and NextAuth.js for authentication.

04. React vs. Next.js: Which to Use

05. Deploying a Next.js App

Next.js applications that use SSR, API routes, or middleware need a running Node.js process. Deploy using the cPanel Node.js Selector:

1. Build your app locally. Run npm run build in your project directory. This creates the .next/ directory with your compiled application.
2. Upload your project to a directory in your home folder (e.g., ~/myapp) using FTP or File Manager. Include:
   • .next/ (build output)
   • package.json and package-lock.json
   • public/ (static assets)
   • next.config.js (if you have one)
   • .env or .env.production (environment variables)
   You do not need to upload node_modules/ — it will be installed on the server.
3. Create the Node.js application in cPanel → Setup Node.js App → Create Application:
   • Node.js version: 18.x or 20.x (LTS recommended)
   • Application mode: Production
   • Application root: myapp
   • Application URL: your domain or subdomain
   • Startup file: node_modules/.bin/next (or create a custom server.js)
4. Run NPM Install in the Node.js Selector to install dependencies.
5. Set the start script. Make sure your package.json has: "scripts": { "start": "next start" }
6. Start the application and visit your URL to confirm it’s running.

// server.js - Passenger wrapper for Next.js
const { createServer } = require('http');
const next = require('next');

const app = next({ dev: false });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    handle(req, res);
  }).listen(process.env.PORT || 3000);
});

Set server.js as your startup file in the Node.js Selector.

06. Deploying a React SPA (Static)

If your React app is a client-side single-page application (built with Create React App, Vite, or similar), you can deploy it as static files without Node.js:

1. Build your app locally. Run npm run build. This creates a build/ or dist/ directory with static HTML, CSS, and JavaScript files.
2. Upload the build output to your public_html directory (or the document root for your domain) using FTP or File Manager.
3. Add an .htaccess rule to handle client-side routing. React SPAs use front-end routing, so all paths need to serve index.html:

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

This is the same pattern WordPress uses — any request that doesn’t match a real file or directory gets served index.html, and React’s router handles the rest client-side.

07. Connecting to a Database or API

Dashboards typically need data. Here are your options on Ultra Web Hosting:

MariaDB/MySQL (included). Your hosting account includes MariaDB databases. Create a database in cPanel → MySQL Databases, then connect from your Node.js app using a package like mysql2 or an ORM like Sequelize or Prisma.

const mysql = require('mysql2/promise');
const db = await mysql.createConnection({
  host: 'localhost',
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME
});

External APIs. If your data lives elsewhere (a CRM, analytics service, or third-party API), use fetch or axios in your Next.js API routes or getServerSideProps to pull data server-side before rendering.

SQLite. For lightweight applications, SQLite stores your database in a single file. Use the better-sqlite3 package. No database server setup required.

08. Troubleshooting

1. Application shows “503” or “Application Error”. Check the startup file path in the Node.js Selector. For Next.js, make sure you have either a custom server.js or that the start script is configured correctly in package.json.
2. Build errors. Always build your Next.js app locally before uploading. The shared hosting environment may not have enough memory to run next build on the server. Upload the pre-built .next/ directory.
3. Static assets not loading. Verify that your public/ directory was uploaded and that asset paths in your code are correct. Check the browser console (F12) for 404 errors on CSS, JS, or image files.
4. API routes return 404. Make sure your app is running in SSR mode (not static export) and that the Node.js process is active. API routes require a running server.
5. Environment variables not available. If using the cPanel environment variables UI, restart the app after adding new variables. If using a .env file, make sure dotenv is installed or that Next.js is loading the file (Next.js automatically loads .env.production in production mode).

Quick Recap: Deploying React & Next.js

1. Static React SPA — build locally, upload to public_html, add .htaccess for routing
2. Next.js with SSR — build locally, upload project + .next/ directory, deploy via Node.js Selector
3. Use a custom server.js as a Passenger wrapper for Next.js if the default startup doesn’t work
4. Store secrets in environment variables, not in code
5. Build locally — don’t run next build on shared hosting, upload the pre-built output

Last updated March 2026 · Browse Getting Started articles · See also: Node.js Hosting Plans