nextjs-dashboard

nextjs-dashboard is an open-source admin dashboard boilerplate that pairs Next.js App Router with TypeScript, React Bootstrap, and the CoreUI admin design, giving developers a pre-built starting point for admin applications.

What is nextjs-dashboard?

This boilerplate is a starting point for building admin dashboards. It runs on Next.js and TypeScript, using the App Router convention for file-based routing. The UI is styled with React Bootstrap (Bootstrap 5) and follows the open-source CoreUI admin template's layout and components. The project includes a live demo deployed on Vercel and a repository maintained by kitloong.

Key Features

• Tech stack — Built with Next.js, TypeScript, and React Bootstrap, bootstrapped via create-next-app --typescript.
• App Router — Uses the Next.js App Router, so pages live under app/(dashboard) and hot-reload on edit.
• CoreUI design — Based on the famous open-source CoreUI Bootstrap admin template, providing familiar admin UI components.
• Included pages — Ships with a dashboard page, a sample "Pokemons" page, a login page, and a register page.
• Dark mode — The dashboard supports both light and dark color schemes, visible in the project screenshots.
• Responsive sidebar — The sidebar collapses on mobile and expands on demand, with dedicated mobile screenshots.
• Multilingual example — The sample page is shown in both English and Japanese, demonstrating how to build localized pages.
• Vercel-ready — The live demo runs on Vercel, and the repo includes a "Powered by Vercel" badge.

Who is it for?

• Frontend developers who want a typed, App Router-based dashboard starter instead of setting up routing and theming from scratch.
• Startups and product teams that need a quick admin interface with login, register, and a data table-like page.
• Developers learning Next.js who want a working example of App Router, TypeScript, and Bootstrap integration.

What can you do with it?

• Build an admin panel: Start from the provided dashboard layout and add your own charts, tables, and forms.
• Prototype authentication flows: Use the included login and register pages as a template for your own auth UI.
• Create a localized app: Follow the English/Japanese sample page pattern to add multi-language support to other routes.

How does it work?

After cloning the repository, run pnpm install to install dependencies. Then pnpm run dev starts the development server at http://localhost:3000. The main dashboard page is app/(dashboard)/page.tsx, and editing that file triggers hot reload. Deploying to Vercel is straightforward given the Next.js setup.

FAQ

Is nextjs-dashboard free?

Yes, the project is open-source and available on GitHub, and it uses free, open-source libraries like Next.js, React Bootstrap, and CoreUI.

What Next.js version does it use?

The repository was bootstrapped with create-next-app and uses the App Router, which is available in Next.js 13 and later. The readme links to the Next.js canary branch for the create-next-app source.

Does it include a backend or database?

No, the boilerplate is frontend-only. It comes with UI pages and a sample data page, but no backend or database integration is mentioned in the repository.

Can I use it with npm instead of pnpm?

The getting started instructions specify pnpm (pnpm install, pnpm run dev), but since it's a standard Next.js project, npm or yarn would likely work after adjusting the commands.