v5.0Next.js & HTML
Bootstrap 5 responsive admin template
documented by Sean Ngu
Last Updated on: 02/April/2025
By: Sean Ngu
Thank you for purchasing my theme. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
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/ # Studio 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 } 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();
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.appSidebarMinified ? 'app-sidebar-minified ' : '') +
(settings.appSidebarMobileToggled ? 'app-sidebar-mobile-toggled' : '') +
(settings.appFooter ? 'app-footer-fixed ' : '') +
(settings.appTopNav ? 'app-with-top-nav ' : '') +
(settings.appVh100 ? 'vh-100 ' : '')
}>
{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" data-bs-theme="dark">
<head>
<title>Studio | 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,
appSidebarMobileToggled: false,
appSidebarMinified: false,
appFooter: false,
appTopNav: false,
appVh100: false
};
List of options can be used in single page:
updateSettings({
appBoxedLayout: false,
appContentClass: '',
appContentFullHeight: false,
appContentNone: false,
appHeaderNone: false,
appSidebarNone: false,
appSidebarMobileToggled: false,
appSidebarMinified: false,
appFooter: false,
appTopNav: false,
appVh100: false
});
File to configure the page sidebar menu
config/ └── app-menu.tsx
Below is the sidebar structures with two level support
const Menu = [
{ is_header: true, title: 'Navigation' },
{ path: '/email', icon: 'fa fa-envelope', title: 'Email', badge: '4',
children: [
{ path: '/email/inbox', title: 'Inbox' },
{ path: '/email/compose', title: 'Compose' },
{ path: '/email/detail', title: 'Detail' }
]
},
{ is_divider: true },
{ is_header: true, title: 'Components' },
];
export default Menu;
The default theme color is set to the blue color. You may change it from /src/styles/_variables.scss
// LINE 84 $theme: $blue !default;
Besides that, you can also set the theme color by adding the css class theme-{ color-name } to /src/app/layout.tsx
// LINE 74 <body className="theme-blue">
<ThemePanel /> component from /src/app/layout.tsx.
If you wish to enable the dark mode instead, you can easily do so by adding the data-bs-theme="dark" attribute to the HTML tag.
This will disable the default light mode and enable the dark mode theme.
<!DOCTYPE html> <html lang="en"> </html>to
<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> </html>
If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.
<div class="card" data-bs-theme="dark">
<div class="card-body">
<!-- your component content here -->
</div>
</div>
To enable RTL mode, follow these steps:
/src/styles/_variables.scss file in your code editor.$enable-rtl variable and change its value to true:
$enable-rtl: true;This will enable RTL mode for your application.
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
Dark Mode Variables
The /src/styles/_variables-dark.scss file contains the variables that control the styles for dark mode.
These variables are used in conjunction with the variables in the /src/styles/_variables.scss file to provide different values for light and dark modes.
<!-- dark mode variable --> /src/scss/_variables-dark.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,
CardBody,
CardImgOverlay,
CardFooter,
CardGroup,
CardExpandToggler
} from '@/components/card/card';
<CardGroup>
<Card>
<CardHeader>
...
<CardExpandToggler />
</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
Photos