Hello guys how are you? Welcome back to my blog. Today in this blog post I will show you Build a Next.js React Free Admin Dashboard from Scratch.
For react js new comers, please check the below links:
Guys here is the code snippet for nextjs admin dashboard, react admin template, free react dashboard, nextjs template, tailwind css dashboard, next js admin panel, open source react admin, nextjs dashboard ui, modern admin dashboard react, responsive admin panel, react next admin, react js ui dashboard, admin dashboard for developers and please use carefully:
Step 1: Create a New Next.js Project
If you haven’t already, create a new Next.js project as well:
npx create-next-app@latest my-realestate-demo
cd my-realestate-demo
Step 2: Apply below code inside app/layout.js file:
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<title>Dashboard - Mazer Admin Dashboard</title>
<link rel="preconnect" href="https://fonts.gstatic.com"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet"></link>
<link rel="stylesheet" href="assets/css/bootstrap.css"></link>
<link rel="stylesheet" href="assets/css/bold.css"></link>
<link rel="stylesheet" href="assets/css/perfect-scrollbar.css"></link>
<link rel="stylesheet" href="assets/css/bootstrap-icons.css"></link>
<link rel="stylesheet" href="assets/css/app.css"></link>
<link rel="stylesheet" href="assets/css/auth.css"></link>
</head>
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
</body>
</html>
);
}
Step 3: Update code in a Page.js inside src/app folder
Open the page.js file and replace the content with the following code :
import Link from 'next/link';
export default function Home() {
return (
<div suppressHydrationWarning id="app">
<div id="sidebar" className="active">
<div className="sidebar-wrapper active">
<div className="sidebar-header">
<div className="d-flex justify-content-between">
<div className="logo">
<a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo" /></a>
</div>
<div className="toggler">
<a href="#" className="sidebar-hide d-xl-none d-block"><i className="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div className="sidebar-menu">
<ul className="menu">
<li className="sidebar-title">Menu</li>
<li className="sidebar-item active ">
<Link href="/" className='sidebar-link'>
<i className="bi bi-grid-fill"></i>
<span>Dashboard</span>
</Link>
</li>
<li className="sidebar-item">
<Link href="/login" className='sidebar-link'>
<i className="bi bi-person-badge-fill"></i>
<span>Login</span>
</Link>
</li>
<li className="sidebar-item">
<Link href="/register" className='sidebar-link'>
<i className="bi bi-person-badge-fill"></i>
<span>Register</span>
</Link>
</li>
</ul>
</div>
<button className="sidebar-toggler btn x"><i data-feather="x"></i></button>
</div>
</div>
<div id="main">
<header className="mb-3">
<a href="#" className="burger-btn d-block d-xl-none">
<i className="bi bi-justify fs-3"></i>
</a>
</header>
<div className="page-heading">
<h3>Profile Statistics</h3>
</div>
<div className="page-content">
<section className="row">
<div className="col-12 col-lg-9">
<div className="row">
<div className="col-6 col-lg-3 col-md-6">
<div className="card">
<div className="card-body px-3 py-4-5">
<div className="row">
<div className="col-md-4">
<div className="stats-icon purple">
<i className="iconly-boldShow"></i>
</div>
</div>
<div className="col-md-8">
<h6 className="text-muted font-semibold">Profile Views</h6>
<h6 className="font-extrabold mb-0">112.000</h6>
</div>
</div>
</div>
</div>
</div>
<div className="col-6 col-lg-3 col-md-6">
<div className="card">
<div className="card-body px-3 py-4-5">
<div className="row">
<div className="col-md-4">
<div className="stats-icon blue">
<i className="iconly-boldProfile"></i>
</div>
</div>
<div className="col-md-8">
<h6 className="text-muted font-semibold">Followers</h6>
<h6 className="font-extrabold mb-0">183.000</h6>
</div>
</div>
</div>
</div>
</div>
<div className="col-6 col-lg-3 col-md-6">
<div className="card">
<div className="card-body px-3 py-4-5">
<div className="row">
<div className="col-md-4">
<div className="stats-icon green">
<i className="iconly-boldAdd-User"></i>
</div>
</div>
<div className="col-md-8">
<h6 className="text-muted font-semibold">Following</h6>
<h6 className="font-extrabold mb-0">80.000</h6>
</div>
</div>
</div>
</div>
</div>
<div className="col-6 col-lg-3 col-md-6">
<div className="card">
<div className="card-body px-3 py-4-5">
<div className="row">
<div className="col-md-4">
<div className="stats-icon red">
<i className="iconly-boldBookmark"></i>
</div>
</div>
<div className="col-md-8">
<h6 className="text-muted font-semibold">Saved Post</h6>
<h6 className="font-extrabold mb-0">112</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-xl-4">
<div className="card">
<div className="card-header">
<h4>Profile Visit</h4>
</div>
<div className="card-body">
<div className="row">
<div className="col-6">
<div className="d-flex align-items-center">
<h5 className="mb-0 ms-3">Europe</h5>
</div>
</div>
<div className="col-6">
<h5 className="mb-0">862</h5>
</div>
<div className="col-12">
<div id="chart-europe"></div>
</div>
</div>
<div className="row">
<div className="col-6">
<div className="d-flex align-items-center">
<h5 className="mb-0 ms-3">America</h5>
</div>
</div>
<div className="col-6">
<h5 className="mb-0">375</h5>
</div>
<div className="col-12">
<div id="chart-america"></div>
</div>
</div>
<div className="row">
<div className="col-6">
<div className="d-flex align-items-center">
<h5 className="mb-0 ms-3">Indonesia</h5>
</div>
</div>
<div className="col-6">
<h5 className="mb-0">1025</h5>
</div>
<div className="col-12">
<div id="chart-indonesia"></div>
</div>
</div>
</div>
</div>
</div>
<div className="col-12 col-xl-8">
<div className="card">
<div className="card-header">
<h4>Latest Comments</h4>
</div>
<div className="card-body">
<div className="table-responsive">
<table className="table table-hover table-lg">
<thead>
<tr>
<th>Name</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td className="col-3">
<div className="d-flex align-items-center">
<div className="avatar avatar-md">
<img src="assets/images/faces/5.jpg" />
</div>
<p className="font-bold ms-3 mb-0">Si Cantik</p>
</div>
</td>
<td className="col-auto">
<p className=" mb-0">Congratulations on your graduation!</p>
</td>
</tr>
<tr>
<td className="col-3">
<div className="d-flex align-items-center">
<div className="avatar avatar-md">
<img src="assets/images/faces/2.jpg" />
</div>
<p className="font-bold ms-3 mb-0">Si Ganteng</p>
</div>
</td>
<td className="col-auto">
<p className=" mb-0">Wow amazing design! Can you make another
tutorial for
this design?</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-3">
<div className="card">
<div className="card-body py-4 px-5">
<div className="d-flex align-items-center">
<div className="avatar avatar-xl">
<img src="assets/images/faces/1.jpg" alt="Face 1" />
</div>
<div className="ms-3 name">
<h5 className="font-bold">John Duck</h5>
<h6 className="text-muted mb-0">@johnducky</h6>
</div>
</div>
</div>
</div>
<div className="card">
<div className="card-header">
<h4>Recent Messages</h4>
</div>
<div className="card-content pb-4">
<div className="recent-message d-flex px-4 py-3">
<div className="avatar avatar-lg">
<img src="assets/images/faces/4.jpg" />
</div>
<div className="name ms-4">
<h5 className="mb-1">Hank Schrader</h5>
<h6 className="text-muted mb-0">@johnducky</h6>
</div>
</div>
<div className="recent-message d-flex px-4 py-3">
<div className="avatar avatar-lg">
<img src="assets/images/faces/5.jpg" />
</div>
<div className="name ms-4">
<h5 className="mb-1">Dean Winchester</h5>
<h6 className="text-muted mb-0">@imdean</h6>
</div>
</div>
<div className="recent-message d-flex px-4 py-3">
<div className="avatar avatar-lg">
<img src="assets/images/faces/1.jpg" />
</div>
<div className="name ms-4">
<h5 className="mb-1">John Dodol</h5>
<h6 className="text-muted mb-0">@dodoljohn</h6>
</div>
</div>
<div className="px-4">
<button className='btn btn-block btn-xl btn-light-primary font-bold mt-3'>Start
Conversation</button>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div className="footer clearfix mb-0 text-muted">
<div className="float-start">
<p>2025 © Mazer</p>
</div>
<div className="float-end">
<p>Crafted with <span className="text-danger"><i className="bi bi-heart"></i></span> by <a
href="#">A. LULLA</a></p>
</div>
</div>
</footer>
</div>
</div>
);
}
Step 4: Guys now create first login folder inside app folder and create page.js file inside app/login folder and add below code inside it:
import Link from 'next/link';
export default function Home() {
return (
<div suppressHydrationWarning id="auth">
<div className="row h-100">
<div className="col-lg-5 col-12">
<div id="auth-left">
<div className="auth-logo">
<Link href="/"><img src="assets/images/logo/logo.png" alt="Logo" /></Link>
</div>
<h1 className="auth-title">Log in.</h1>
<p className="auth-subtitle mb-5">Log in with your data that you entered during registration.</p>
<form action="index.html">
<div className="form-group position-relative has-icon-left mb-4">
<input type="text" className="form-control form-control-xl" placeholder="Username" />
<div className="form-control-icon">
<i className="bi bi-person"></i>
</div>
</div>
<div className="form-group position-relative has-icon-left mb-4">
<input type="password" className="form-control form-control-xl" placeholder="Password" />
<div className="form-control-icon">
<i className="bi bi-shield-lock"></i>
</div>
</div>
<div className="form-check form-check-lg d-flex align-items-end">
<input className="form-check-input me-2" type="checkbox" value="" id="flexCheckDefault" />
<label className="form-check-label text-gray-600" htmlFor="flexCheckDefault">
Keep me logged in
</label>
</div>
<button className="btn btn-primary btn-block btn-lg shadow-lg mt-5">Log in</button>
</form>
<div className="text-center mt-5 text-lg fs-4">
<p className="text-gray-600">Don't have an account? <Link href="/register"
className="font-bold">Sign
up</Link>.</p>
</div>
</div>
</div>
<div className="col-lg-7 d-none d-lg-block">
<div id="auth-right">
</div>
</div>
</div>
</div>
);
}
Step 5: Guys now create first register folder inside app folder and create page.js file inside app/register folder and add below code inside it:
import Link from 'next/link';
export default function Home() {
return (
<div suppressHydrationWarning id="auth">
<div className="row h-100">
<div className="col-lg-5 col-12">
<div id="auth-left">
<div className="auth-logo">
<Link href="/"><img src="assets/images/logo/logo.png" alt="Logo" /></Link>
</div>
<h1 className="auth-title">Sign Up</h1>
<p className="auth-subtitle mb-5">Input your data to register to our website.</p>
<form action="index.html">
<div className="form-group position-relative has-icon-left mb-4">
<input type="text" className="form-control form-control-xl" placeholder="Email" />
<div className="form-control-icon">
<i className="bi bi-envelope"></i>
</div>
</div>
<div className="form-group position-relative has-icon-left mb-4">
<input type="text" className="form-control form-control-xl" placeholder="Username" />
<div className="form-control-icon">
<i className="bi bi-person"></i>
</div>
</div>
<div className="form-group position-relative has-icon-left mb-4">
<input type="password" className="form-control form-control-xl" placeholder="Password" />
<div className="form-control-icon">
<i className="bi bi-shield-lock"></i>
</div>
</div>
<div className="form-group position-relative has-icon-left mb-4">
<input type="password" className="form-control form-control-xl" placeholder="Confirm Password" />
<div className="form-control-icon">
<i className="bi bi-shield-lock"></i>
</div>
</div>
<button className="btn btn-primary btn-block btn-lg shadow-lg mt-5">Sign Up</button>
</form>
<div className="text-center mt-5 text-lg fs-4">
<p className='text-gray-600'>Already have an account? <Link href="/login"
className="font-bold">Log
in</Link>.</p>
</div>
</div>
</div>
<div className="col-lg-7 d-none d-lg-block">
<div id="auth-right">
</div>
</div>
</div>
</div>
);
}
Step 6: Guys download assets from below GitHub link add that inside project public folder:
Step 7: Run the Application
Finally, run your Next.js application:
npm run dev
Visit http://localhost:3000 in your browser to see the website in action.
This is it guys and if you will have any kind of query, suggestion or requirement then feel free to comment below. Also if you will have any kind of project then feel free to hire me
Thanks
Ajay