v1.0

Follow the following step to install the Next.js in your localhost
You may refer to their official documentation for how to setup the node js & npm.
Setup Guide

<!-- run the following command -->
cd /your-path-url/template_nextjs
npm install

<!-- Start the development server -->
npm run dev

<!-- Build the project -->
npm run build


<!-- browse the url -->
http://localhost:3000/

Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

File structure overview for Next.js Version

template_nextjs/
├── eslint.config.mjs        # ESLint configuration
├── next-env.d.ts            # Next.js TypeScript environment declaration
├── next.config.ts           # Next.js configuration file
├── package.json             # Project dependencies and scripts
├── README.md                # Project documentation
├── tsconfig.json            # TypeScript configuration
├── public/                  # Public assets (e.g., images, fonts)
└── src/                     # Source code
    ├── global.d.ts          # Global TypeScript declarations
    ├── app/                 # Next.js app directory (e.g., routing, pages)
    ├── components/          # Reusable UI components
    ├── composables/         # Custom hooks or composable utilities
    ├── config/              # Global application configurations
    ├── styles/              # HUD scss styles
    └── utils/               # Utility functions

Below is the code from /app/layout.tsx which include the header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.

'use client';

// css
import 'bootstrap-icons/font/bootstrap-icons.css';
import '@fortawesome/fontawesome-free/css/all.css';
import 'react-perfect-scrollbar/dist/css/styles.css';
import '@/styles/styles.scss';

import { useEffect, useCallback } from 'react';
import Header from '@/components/header/header';
import TopNav from '@/components/top-nav/top-nav';
import Sidebar from '@/components/sidebar/sidebar';
import Footer from '@/components/footer/footer';
import ThemePanel from '@/components/theme-panel/theme-panel';
import { AppSettingsProvider, useAppSettings } from '@/config/app-settings';

function Layout({ children }: { children: React.ReactNode }) {
  const { settings } = useAppSettings();
  
  const handleScroll = useCallback(() => {
    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
      const totalScroll = window.scrollY;
      const elm = document.querySelector('.app');
      
      if (elm) {
        if (totalScroll > 0) {
          elm.classList.add('app-has-scroll');
        } else {
          elm.classList.remove('app-has-scroll');
        }
      }
    }
  }, []);
  
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', handleScroll);
    }

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]);

  return (
    <div className={
      'app ' +
      (settings.appBoxedLayout ? 'app-boxed-layout ' : '') + 
      (settings.appContentFullHeight ? 'app-content-full-height ' : '') + 
      (settings.appHeaderNone ? 'app-without-header ' : '') + 
      (settings.appSidebarNone ? 'app-without-sidebar ' : '') + 
      (settings.appSidebarCollapsed ? 'app-sidebar-collapsed ' : '') + 
      (settings.appFooter ? 'app-footer-fixed ' : '') + 
      (settings.appTopNav ? 'app-with-top-nav ' : '')
    }>
    
      {settings.appTopNav && (<TopNav />)}
      {!settings.appHeaderNone && (<Header />)}
      {!settings.appSidebarNone && (<Sidebar />)}
      {!settings.appContentNone && (<div className={'app-content '+ settings.appContentClass }>{children}</div>)}
      {settings.appContentNone && (<>{children}</>)}
      {settings.appFooter && (<Footer />)}
      <ThemePanel />
    </div>
  );
}


export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) {
  useEffect(() => {
    let isMounted = true;

    const loadBootstrap = async () => {
      try {
        const bootstrap = await import('bootstrap');
        if (isMounted) {
          window.bootstrap = bootstrap;
        }
      } catch (error) {
        console.error('Error loading Bootstrap:', error);
      }
    };
  
    if (typeof window !== 'undefined') {
      loadBootstrap();
    }
    
    return () => {
      isMounted = false;
    };
  }, []);
  
  return (
    <html lang="en">
      <head>
        <title>Quantum | Nextjs Version</title>
      </head>
      <body>
        <AppSettingsProvider>
          <Layout>{children}</Layout>
        </AppSettingsProvider>
      </body>
    </html>
  );
}

List of components inside the components folder

components/
├── card/
├── content/
├── footer/
├── header/
├── nav-scroll-to/
├── sidebar/
├── theme-panel/
└── top-nav/

Example of how to change page options in single page

'use client';

import { useEffect } from 'react';
import { useAppSettings } from '@/config/app-settings';

export default function LayoutFullWidth() {
  const { updateSettings } = useAppSettings();
  
  useEffect(() => {
    updateSettings({ appSidebarNone: true });
    
    return function cleanUp() {
      updateSettings({ appSidebarNone: false });
    }
    // eslint-disable-next-line
  }, []);
  return (
    <>
    </>
  )
}

List of default options can be set in /config/app-settings.tsx:

const defaultSettings: AppSettings = {
  appBoxedLayout: false,
  appContentClass: '',
  appContentFullHeight: false,
  appContentNone: false,
  appHeaderNone: false,
  appSidebarNone: false,
  appSidebarCollapsed: false,
  appFooter: false,
  appTopNav: false,
};

List of options can be used in single page:

updateSettings({
  appBoxedLayout: false,
  appContentClass: '',
  appContentFullHeight: false,
  appContentNone: false,
  appHeaderNone: false,
  appSidebarNone: false,
  appSidebarCollapsed: false,
  appFooter: false,
  appTopNav: false,
});

File to configure the page sidebar menu

config/
└── app-menu.tsx

Below is the sidebar structures with two level support

const Menu = [
  { 'text': 'APP INTERFACE', 'is_header': true },
  { 'path': '/', 'icon': 'ph:rocket-duotone', 'text': 'DASHBOARD' }, 
  { 'path': '/analytics', 'icon': 'ph:chart-bar-duotone', 'text': 'ANALYTICS' }, 
  { 'path': '/email', 'icon': 'ph:envelope-duotone', 'text': 'EMAIL', 'children': [
      { 'path': '/email/inbox', 'text': 'INBOX'   }, 
      { 'path': '/email/compose', 'text': 'COMPOSE' }, 
      { 'path': '/email/detail', 'text': 'DETAIL' }
    ]
  }
];

export default Menu;

The default theme color is set to the teal color. You may change it from /src/styles/_variables.scss

// LINE 103
$theme:        $teal !default;

Besides that, you can also set the theme color by adding the css class theme-{ color-name } to /src/app/layout.tsx

// LINE 98
<body className="theme-blue">

To enable RTL mode, follow these steps:

1. Navigate to the /src/styles/_variables.scss file in your code editor.
2. Find the $enable-rtl variable and change its value to true:

   $enable-rtl: true;
   

   This will enable RTL mode for your application.
3. Save the changes to the file.

Global Variables

The /src/styles/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /src/styles/_variables.scss file in your code editor and modify the values of the variables to suit your needs.

<!-- global variable -->
/src/scss/_variables.scss

We have created the common re-usable card bootstrap component for this template. You may found the card component via /src/components/bootstrap/

//usage 
import { 
  Card, 
  CardHeader, 
  CardHeaderBtn,
  CardBody, 
  CardImgOverlay, 
  CardFooter, 
  CardGroup
} from '@/components/card/card';

<CardGroup>
  <Card>
    <CardHeader className="with-btn">
      ... 
      <CardHeaderBtn />
    </CardHeader>
    <CardBody>...</CardBody>
    <CardFooter>...</CardFooter>
    <CardImgOverlay>...</CardImgOverlay>
  </Card>
</CardGroup>

You may use the default bootstrap data attribute like data-bs-toggle="dropdown" OR use the window.bootstrap function within the useEffect callback.

// usage example

import { useEffect } from 'react';

export default function UiModalNotifications() {
  useEffect(() => {
    if (typeof window !== 'undefined' && typeof window.bootstrap !== 'undefined') {
      new window.bootstrap.ScrollSpy(document.body, {
        target: '#sidebar-bootstrap',
        offset: 200
      });
    }
  });
}

I've used the following images, icons or other files as listed.

Plugins

1. ApexCharts: https://apexcharts.com/
2. Bootstrap: http://getbootstrap.com/
3. Bootstrap Icons: https://icons.getbootstrap.com/
4. Chart.js: https://chartjs.org
5. Datatables: https://datatables.net/
6. FontAwesome: https://fontawesome.com/
7. Fullcalendar: https://fullcalendar.io/
8. Google Map React: https://github.com/google-map-react/google-map-react
9. Highlight.js: https://highlightjs.org/
10. Iconify: https://icon-sets.iconify.design/
11. jQuery: https://jquery.com/
12. jsvectormap: https://github.com/themustafaomar/jsvectormap
13. lity: https://sorgalla.com/lity/
14. masonry: https://masonry.desandro.com/
15. moment: http://momentjs.com/
16. Next.js: https://nextjs.org/
17. PdfMake: http://pdfmake.org/#/
18. Perfect Scrollbar: https://github.com/mercs600/vue3-perfect-scrollbar
19. PhotoSwipe: https://photoswipe.com/
20. Popper.js: https://popper.js.org/
21. React: https://Next.js.org/
22. React Apexcharts: https://www.npmjs.com/package/react-apexcharts
23. React Bootstrap Daterangepicker: https://github.com/skratchdot/react-bootstrap-daterangepicker
24. React Color: http://casesandberg.github.io/react-color/
25. React Countdown: https://github.com/ndresx/react-countdown
26. React Datepicker: https://github.com/Hacker0x01/react-datepicker
27. React Datetime: https://github.com/arqex/react-datetime
28. React Highlight: https://github.com/akiran/react-highlight
29. React Input Mask: https://github.com/sanniassin/react-input-mask
30. React Perfect Scrollbar: https://github.com/goldenyz/react-perfect-scrollbar
31. React Quill: https://github.com/zenoamaro/react-quill
32. React Router DOM: https://github.com/remix-run/react-router
33. React Select: https://github.com/JedWatson/react-select/tree/master#readme
34. React Tag Input Component: https://github.com/hc-oss/react-tag-input-component#readme

Photos

1. Unsplash: https://unsplash.com/
2. Freepik: https://www.freepik.com/