nextjs-dashboard - GitLite

KO | EN

gitlite — search

#javascript #react #ai #llm #golang #go #android #machine-learning #macos #nodejs #windows #kubernetes #awesome-list #security

nextjs-dashboard

(★ 684)

A Next.JS boilerplate with the famous Open Source Boostrap Admin Template, CoreUI.

File Explorer

Download Latest Version (.zip)

- - ci.yml
- FUNDING.yml
- - login.cy.ts
- - example.json
- - commands.ts
  - e2e.ts
- ads.txt
- favicon.ico
- vercel.svg
- - layout.tsx
- - use-computed-style.ts
- - config.ts
  - dictionary-hook.ts
  - dictionary.ts
  - DictionaryProvider.tsx
- - egg-group.ts
  - pokemon.ts
  - resource.ts
  - type.ts
- - _custom.scss
  - globals.scss
- - enum.ts
  - theme.ts
- - next.d.ts
- - server-fetch.ts
- - zod.ts
- middleware.ts
.env.development
.env.production
.eslintrc.json
.gitignore
cypress.config.ts
LICENSE
next.config.js
package.json
pnpm-lock.yaml
README.md
tsconfig.json

🚀 Installation Guide

1. Get the code

git clone https://github.com/kitloong/nextjs-dashboard

Downloads the entire project code from GitHub to your computer.

cd nextjs-dashboard

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm install

Downloads and installs the libraries listed in package.json.

pnpm run dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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 [React Bootstrap](https://react-bootstrap.github.io/), using the App Router.

![Powered by Vercel](https://images.ctfassets.net/e5382hct74si/78Olo8EZRdUlcDUFQvnzG7/fa4cdb6dc04c40fceac194134788a0e2/1618983297-powered-by-vercel.svg)

## Screenshot

### Dashboard

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

| Light                                                                                                                                                       | Dark                                                                                                                                                       |
|-------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
| [<img alt="Dashboard" width="400" src="https://raw.githubusercontent.com/kitloong/screenshot/main/light.png" />](https://nextjs-dashboard-olive.vercel.app) | [<img alt="Dashboard" width="400" src="https://raw.githubusercontent.com/kitloong/screenshot/main/dark.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

#### Multilingual

| English                                                                                                                                                           | 日本語                                                                                                                                                               |
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| [<img alt="Sample page" width="400" src="https://raw.githubusercontent.com/kitloong/screenshot/main/en.png">](https://nextjs-dashboard-olive.vercel.app/pokemons) | [<img alt="Sample page" width="400" src="https://raw.githubusercontent.com/kitloong/screenshot/main/ja.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 `app/(dashboard)/page.tsx`. The page auto-updates as you edit the file.

## 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!

## Reference

1. https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/