Next.jsReactAdmin dashboard

nextjs-scaffolding-template — Next.js Admin dashboard Template

By mail4metablocks

A Next.js and TypeScript admin scaffold built with CoreUI and React Bootstrap, featuring dashboard, login, registration, and sample data pages.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided previewTop of page

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Admin scaffold built with Next.js and TypeScript

02

Dashboard layout based on CoreUI and React Bootstrap

03

Includes login, registration, and sample data pages

04

Integrates Redux, Redux Toolkit, Axios, Immer, and SWR

05

Uses ESLint, typescript-eslint, airbnb, and prettier configuration

06

MIT licensed, free to use, modify, use commercially, and distribute

Template Details

This template was initialized with create-next-app --typescript and is a Next.js admin scaffold. The UI layer uses React Bootstrap and the open-source Bootstrap admin theme CoreUI, and already implements a dashboard, login, registration, and a sample data page (Pokemons). The project is written in TypeScript and includes dependencies such as Redux, Redux Toolkit, Axios, Immer, SWR, Font Awesome, and ESLint.

The README explains Next.js concepts including pre-rendering, SSR, SSG, CSR, and ISR, and provides documentation links for getServerSideProps, getStaticProps, and revalidate, but it does not state whether the template itself has configured these data-fetching methods. The sample page and the login and registration pages are static demos; no real authentication, data source, or backend API is mentioned.

The template is released under the MIT license, and this version of the code may be used, modified, used commercially, and distributed for free, provided the copyright notice and license notice are retained when distributing. Third-party assets such as demo images, fonts, and icons must be checked separately for licensing; external services such as domains, hosting, and databases may incur costs.

Next.jsReactAdmin

Is it right for your project?

Use Cases

  • Quickly starting a Next.js admin interface prototype
  • Building a dashboard on top of React Bootstrap and CoreUI
  • Needing login and registration pages as a starting point for an admin entry
  • Needing a reference project for Next.js pre-rendering and data-fetching approaches

Suitable For

  • Frontend developers familiar with Next.js and TypeScript
  • Projects that need a basic admin interface structure
  • Teams that accept a Bootstrap-style data interface
  • Developers who want to use and modify the code under the MIT license

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Install dependencies with pnpm install

  2. 2

    Start the development server with pnpm run dev; the default address is http://localhost:3000

  3. 3

    The page entry is pages/index.tsx, and API routes are in the pages/api directory

  4. 4

    The login, registration, and sample pages are static demos and do not include real authentication or data APIs

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version in the public repository under the MIT license; the free scope is this version of the code and does not mean external services or third-party assets are free.

Must comply with when using

  • This version of the code may be used, modified, used commercially, and distributed for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • The interface is built on the CoreUI open-source Bootstrap admin theme; CoreUI itself has separate open-source and commercial versions, and using its branding, assets, or Pro version requires complying with CoreUI's license terms, which are unrelated to the template's MIT code license.
  • The project uses the Font Awesome icon library; the free and Pro versions of Font Awesome have different licenses, and using Pro icons or brand icons requires a separate purchase or compliance with their license; the template's MIT license does not cover these icon assets.
  • The demo site in the README is hosted on Vercel; when deploying yourself, external services such as domains, hosting, and databases may incur costs that you must evaluate yourself.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

A Next.JS boilerplate with the famous Open Source Boostrap Admin Template, [CoreUI](https://coreui.io/).

Original README

[react-fontawesome](https://fontawesome.com/docs/web/use-with/react/)

Original README

https://nextjs-dashboard-olive.vercel.app

Original README
https://github.com/mail4metablocks/nextjs-scaffolding-template/blob/main/LICENSEhttps://github.com/mail4metablocks/nextjs-scaffolding-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 61 / 100
Technologies
Next.js · React
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2022-12-25
Screenshot last checked
2026-10-02

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 46845a9673b60c1382455e95d46b7353688753e04232262cc3ce21baa5f8dbb9

2026-10-02T17:03:03.342Z

Source file / repository
# nextjs-scaffolding-template

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app --typescript`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Next.JS Dashboard

A Next.JS boilerplate with the famous Open Source Boostrap Admin Template, [CoreUI](https://coreui.io/).

This dashboard is built with `Typescript` and implement some layouts, with [React Bootstrap](https://react-bootstrap.github.io/).

## Screenshot

### Dashboard

https://nextjs-dashboard-olive.vercel.app

[<img alt="Dashboard" width="400" src="https://user-images.githubusercontent.com/7660346/180629352-f92216e3-7cf4-4fba-92fa-089dd96b4478.png" />](https://nextjs-dashboard-olive.vercel.app)

| Mobile (collapsed)                                                                                                                                                                           | Mobile (expand)                                                                                                                                                                              |
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| [<img alt="Dashboard" height="278" src="https://user-images.githubusercontent.com/7660346/190973509-f681c230-54ba-4ee5-bd8c-7929ef24b6aa.png" />](https://nextjs-dashboard-olive.vercel.app) | [<img alt="Dashboard" height="278" src="https://user-images.githubusercontent.com/7660346/190973862-29c311ab-8867-4399-ad4d-01f2d073d7a2.png" />](https://nextjs-dashboard-olive.vercel.app) |

### Sample page

https://nextjs-dashboard-olive.vercel.app/pokemons

[<img alt="Sample page" width="400" src="https://user-images.githubusercontent.com/7660346/183112188-75ffbd15-e7ef-455f-994b-945df16e5846.png">](https://nextjs-dashboard-olive.vercel.app/pokemons)

### Login

https://nextjs-dashboard-olive.vercel.app/login

[<img alt="Login" width="400" src="https://user-images.githubusercontent.com/7660346/180629556-539b6157-b34f-4ecc-aed9-b34f94d5d2ef.png" />](https://nextjs-dashboard-olive.vercel.app/login)

### Register

https://nextjs-dashboard-olive.vercel.app/register

[<img alt="Register" width="400" src="https://user-images.githubusercontent.com/7660346/180629498-1b23eb9a-cfd4-4909-8c02-58eaf6b06ff5.png" />](https://nextjs-dashboard-olive.vercel.app/register)

## Getting Started

First, setup the application:

```bash
pnpm install
```

Then, run the development server:

```bash
pnpm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Next.JS Rendering

### Pre-rendering

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.

### SSR: Server-side rendering

Next.js will pre-render this page on **each request** using the data returned by `getServerSideProps`.

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

### SSG: Static-site generation

Next.js will pre-render this page at **build time** using the props returned by `getStaticProps`.

* In development (next dev), getStaticProps will be called on every request.

https://nextjs.org/docs/basic-features/data-fetching/get-static-props

### CSR: Client-side rendering

If done at the page level, the data is fetched at runtime, and the content of the page is updated as the data changes. When used at the component level, the data is fetched at the time of the component mount, and the content of the component is updated as the data changes.

It is **highly recommended** to use [SWR](https://swr.vercel.app/) if you are fetching data on the client-side. It handles caching, revalidation, focus tracking, refetching on intervals, and more.

https://nextjs.org/docs/basic-features/data-fetching/client-side

### ISR: Incremental Static Regeneration

Next.js allows you to create or update static pages **after you’ve built** your site.

To use ISR, add the `revalidate` prop to `getStaticProps`.

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

## Installed Packages

1. [Redux](https://redux.js.org/tutorials/fundamentals/part-1-overview)
   1. [React redux](https://react-redux.js.org/introduction/getting-started)
   2. [Redux toolkit](https://redux-toolkit.js.org/tutorials/quick-start)
2. [Axios](https://github.com/axios/axios)
3. [React-bootstrap](https://react-bootstrap.github.io/)
4. [Immer](https://github.com/immerjs/immer)
5. [react-fontawesome](https://fontawesome.com/docs/web/use-with/react/)
   1. https://fontawesome.com/docs/web/use-with/react/use-with#next-js
   2. https://fontawesome.com/docs/web/use-with/react/add-icons#dynamic-icon-importing
6. [SWR](https://swr.vercel.app/)
7. [Eslint](https://eslint.org/)
   1. https://github.com/typescript-eslint/typescript-eslint
   2. https://github.com/jsx-eslint/eslint-plugin-react
   3. https://reactjs.org/docs/hooks-rules.html#eslint-plugin
   4. https://www.npmjs.com/package/eslint-config-airbnb
   5. https://www.npmjs.com/package/eslint-config-airbnb-typescript
   6. https://github.com/prettier/eslint-config-prettier
8. https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

next-shadcn-dashboard-starter

next-shadcn-dashboard-starter

An MIT-licensed admin dashboard starter built with Next.js 16, shadcn/ui, Tailwind CSS v4, and TypeScript.

Next.js · Admin dashboard

Studio Admin · Radix UI

Studio Admin · Radix UI

Studio Admin is an admin dashboard template built with Next.js 16, TypeScript, Tailwind CSS v4, and Shadcn UI.

Next.js · Admin dashboard

free-nextjs-admin-dashboard

free-nextjs-admin-dashboard

A free, open-source admin dashboard template built on Next.js 16, React 19, TypeScript, and Tailwind CSS v4. It provides a collapsible sidebar, charts, tables, authentication forms, modals, dropdowns, and dark mode, with internationalization and RTL support since version 2.4.0.

Next.js · Admin dashboard

materio-mui-nextjs-admin-template-free

materio-mui-nextjs-admin-template-free

Materio Free is a Next.js admin dashboard template based on App Router and MUI, integrating Tailwind CSS and available in TypeScript and JavaScript versions.

Next.js · Admin dashboard

nextjs-postgres-nextauth-tailwindcss-template

nextjs-postgres-nextauth-tailwindcss-template

A Vercel-maintained Next.js App Router admin dashboard starter with Auth.js GitHub OAuth, Postgres, Tailwind CSS, and Shadcn UI, plus a sample products table, seed endpoint, and CRUD interface.

Next.js · Admin dashboard

shadcn-dashboard-landing-template

shadcn-dashboard-landing-template

An open-source admin dashboard and marketing landing page template built on shadcn/ui and Tailwind CSS, with both Vite + React and Next.js versions in one repository.

Next.js · Admin dashboard