Next.js adalah framework React populer yang mendukung SSR dan SSG, sedangkan AdminLTE adalah template dashboard open-source berbasis Bootstrap 4. Menggabungkan keduanya memungkinkan Anda membangun aplikasi admin yang cepat, dinamis, dan modern dengan kemampuan rendering server-side.
Artikel ini membahas langkah-langkah lengkap mengintegrasikan AdminLTE 3 ke dalam proyek Next.js, cocok untuk Anda yang ingin membuat sistem informasi, dashboard admin, atau aplikasi manajemen berbasis web.
Keunggulan Menggunakan Next.js + AdminLTE
🔹 Next.js
- Routing otomatis
- SSR & SSG out of the box
- Performa tinggi & SEO optimal
🔹 AdminLTE
- Antarmuka UI siap pakai
- Responsif & mobile-friendly
- Komponen Bootstrap lengkap (form, chart, table)
Dengan kombinasi ini, Anda bisa membangun dashboard profesional tanpa mengorbankan kecepatan, keamanan, dan SEO.
Langkah 1: Inisialisasi Proyek Next.js
Jalankan di terminal:
npx create-next-app@latest nextjs-adminlte
cd nextjs-adminlte
npm install
npm run dev
Pastikan proyek berjalan di http://localhost:3000.
Langkah 2: Download AdminLTE
- Kunjungi: https://adminlte.io
- Unduh AdminLTE versi 3 (file
.zip) - Ekstrak dan salin folder:
dist/→ simpan kepublic/adminlte/plugins/→ simpan kepublic/adminlte/
📁 Struktur direktori menjadi:
public/
└── adminlte/
├── dist/
└── plugins/
Langkah 3: Tambahkan CSS & JS AdminLTE ke _app.js
Edit file pages/_app.js:
import '@/styles/globals.css';
import Head from 'next/head';
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<link
rel="stylesheet"
href="/adminlte/plugins/fontawesome-free/css/all.min.css"
/>
<link
rel="stylesheet"
href="/adminlte/dist/css/adminlte.min.css"
/>
</Head>
<Component {...pageProps} />
<script src="/adminlte/plugins/jquery/jquery.min.js"></script>
<script src="/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/adminlte/dist/js/adminlte.min.js"></script>
</>
);
}
⚠️ Pastikan urutan script benar: jQuery → Bootstrap → AdminLTE.
Langkah 4: Buat Layout Dashboard
Buat folder components/ dan file DashboardLayout.js:
export default function DashboardLayout({ children }) {
return (
<div className="wrapper">
<nav className="main-header navbar navbar-expand navbar-white navbar-light">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" data-widget="pushmenu" href="#">
<i className="fas fa-bars"></i>
</a>
</li>
</ul>
</nav>
<aside className="main-sidebar sidebar-dark-primary elevation-4">
<a href="/" className="brand-link">
<span className="brand-text font-weight-light">NextAdminLTE</span>
</a>
<div className="sidebar">
<nav className="mt-2">
<ul className="nav nav-pills nav-sidebar flex-column" role="menu">
<li className="nav-item">
<a href="/" className="nav-link">
<i className="nav-icon fas fa-home"></i>
<p>Dashboard</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<div className="content-wrapper p-3">
{children}
</div>
</div>
);
}
Langkah 5: Gunakan Layout di Halaman
Edit pages/index.js:
import DashboardLayout from '@/components/DashboardLayout';
export default function Home() {
return (
<DashboardLayout>
<h1>Selamat Datang di Dashboard</h1>
<p>Ini adalah dashboard menggunakan Next.js dan AdminLTE 3.</p>
</DashboardLayout>
);
}
Langkah 6: Tambahkan Komponen Tambahan (Opsional)
Misalnya, gunakan Chart.js:
npm install chart.js react-chartjs-2
Kemudian render di dalam layout Anda. AdminLTE sudah mendukung integrasi Chart.js secara native.
Tips SEO dan Performa
- Gunakan
next/headuntuk meta tag halaman - Optimalkan gambar dengan
next/image - Gunakan fitur SSG atau ISR untuk halaman statis yang SEO-friendly
- Aktifkan preloading untuk font dan CSS
Kesimpulan
Integrasi Next.js dengan AdminLTE memberikan kekuatan dua dunia:
- UI cepat dan menarik
- Backend frontend yang efisien dan SEO-ready
Dengan setup yang tepat, Anda bisa membangun sistem manajemen, aplikasi ERP, atau panel admin yang efisien dan siap digunakan di lingkungan produksi.
Kembangkan Dashboard Next.js Profesional Anda!
🚀 Ingin membangun sistem dashboard berbasis Next.js dan AdminLTE yang modern, efisien, dan siap produksi?
💡 Percayakan pengembangannya pada tim Elektra Network Vision – spesialis solusi web enterprise.
🌐 Kunjungi elektranetworkvision.com untuk konsultasi & penawaran.
