Documentation | NobleUI - Next.js Admin Dashboard Template

Introduction

NobleUI Next.js is a premium admin dashboard template built with Next.js, Bootstrap, and React-Bootstrap. It offers a responsive, mobile-first design, reusable UI components, and a production-ready architecture with support for SSR, SSG, and TypeScript—ideal for modern web applications.

What's include

NobleUI - Next.js comes with a simple and logically organized file structure for easy to understand and maintainability.

  NobleUI-Next.js/
  ├── template
              ├── demo1/                           ( Vertical Menu Layout )
                          ├── public/
                                      ├── data/
                                      ├── images/
                          ├── src/
                                      ├── app/
                                                  ├── (auth)/
                                                  ├── (protected)/
                                                  ├── favicon.ico
                                                  ├── layout.tsx
                                                  ├── not-found.tsx
                                                  ├── page.tsx
                                      ├── components/
                                      ├── config/
                                      ├── mock/
                                      ├── providers/
                                      ├── styles/
                                      ├── types/
                                      ├── utils/
                          ├── scripts/
                                      ├── generate-rtl-css.ts
                          ├── .gitignore
                          ├── .prettierrc
                          ├── .prettierignore
                          ├── eslint.config.mjs
                          ├── next-env.d.ts
                          ├── next.config.ts
                          ├── package.json
                          ├── pnpm-lock.yaml
                          ├── README.md
                          ├── tsconfig.json
              ├── demo2/                            ( Horizontal Menu Layout - Coming Soon )
  ├── documentation

Set up the Development Environment

Ensure that you have Node.js LTS version installed on your machine.

Installation Steps

Assuming your machine meets all the requirements - let's proceed to the installation.

1. Open the project folder (demo1) in your code editor (VSCode, Sublime Text, etc.)

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

Then go to http://localhost:3000 to view the app.

Next.js App Router

NobleUI Next.js is built using the App Router (src/app). In the App Router, every route is driven by the filesystem and composed using layout.tsx, page.tsx, and optional special files like loading.tsx and not-found.tsx.

Routing & layouts

Pages: A route is created by a page.tsx file under src/app.
Layouts: A layout.tsx wraps all pages below it and is ideal for shared UI (sidebar/header).
Route groups: Folders like (auth) and (protected) group routes without affecting the URL.
Dynamic segments: Use folders like [id] or [...slug] to create dynamic routes.

src/app/
  (auth)/signin/page.tsx               -> /signin
  (auth)/signup/page.tsx               -> /signup
  (protected)/dashboard/page.tsx        -> /dashboard
  (protected)/apps/email/inbox/page.tsx -> /apps/email/inbox
  (protected)/apps/email/[emailId]/page.tsx -> /apps/email/1
  layout.tsx                           -> app shell (providers, global styles)
  not-found.tsx                        -> global 404

Server Components vs Client Components

In the App Router, components are Server Components by default. You only opt into Client Components when you need browser-only features like state, effects, event handlers, or client-side hooks (e.g. useState, useEffect, useSearchParams).

Server Component (default): runs on the server, can fetch data securely, and ships less JS to the browser.
Client Component: add 'use client' at the top of the file to enable interactivity and hooks.

Example: Server page with typed props

import { PageProps } from '@/types/page';

// Server Component by default (no 'use client')
export default async function UsersPage({ params, searchParams }: PageProps) {
  // params and searchParams are Promises; await when needed
  const qp = await searchParams;
  return <div>Query: {JSON.stringify(qp)}</div>;
}

Example: Client page

'use client';

import { useSearchParams } from 'next/navigation';

export default function ClientExample() {
  const sp = useSearchParams();
  return <div>Email ID: {sp.get('emailId')}</div>;
}

Data fetching & caching strategies

Next.js App Router has built-in caching for server rendering and fetch(). The right caching strategy depends on whether your data is static, periodically updated, or fully dynamic (user-specific).

Static (default when possible): fastest, cacheable output.
ISR / timed revalidation: use export const revalidate = 60 or fetch(..., { next: { revalidate: 60 } }).
Dynamic / no cache: for user-specific pages, use fetch(..., { cache: 'no-store' }) or export const dynamic = 'force-dynamic'.

Examples

// 1) Revalidate the whole route segment every 60s
export const revalidate = 60;

// 2) Revalidate a single fetch call every 30s
await fetch('https://api.example.com/stats', { next: { revalidate: 30 } });

// 3) Always fresh (no cache) – recommended for auth/user-specific pages
await fetch('https://api.example.com/me', { cache: 'no-store' });

// 4) Force dynamic rendering for the route
export const dynamic = 'force-dynamic';

Tip: Prefer Server Components for data fetching (better performance, smaller client bundle). Use Client Components for interactive UI, and pass server-fetched data down as props.

RTL Layout

The RTL does not enabled by default. It can be easily setup with RTLCSS.

Follow these steps to generate RTL CSS:

1. Open [nobleui-nextjs]/template/[demo]/ folder. Example "demo1"

2. Run pnpm script command to generate RTL CSS.

pnpm generate:rtl

You can find the bundled RTL CSS file at: [demo]/src/styles/rtl-css/styles.rtl.css.

3. Open the layout.tsx file from [demo]/src/app/layout.tsx. Change the file path to the RTL CSS path:

From: import '@/styles/styles.scss';
To: import '@/styles/rtl-css/styles.rtl.css';

5. Start the development server:

pnpm dev

Then go to http://localhost:3000 to view the app.

Dark Sidebar

The Dark sidebar (in Demo1) is not enabled by default.

Add the "sidebar-dark" class to the body element as given below (in the src/app/layout.tsx file).

For the dark sidebar (in Demo1), set className="sidebar-dark" on the body element.

<body className="sidebar-dark">

Support

We're happy to help! If you have any questions, feel free to contact us through our Support Page or email us directly at nobleui.team@gmail.com.

If you enjoyed using our product, we'd really appreciate it if you could take a moment to ⭐️⭐️⭐️⭐️⭐️ rating and a short review. Your support means a lot to us! You can submit your review on the ThemeForest Downloads page.

NobleUI - Next.js Admin Dashboard Template v 1.0