ToanJacky/nextjs-dashboard

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

This is a Next.js project bootstrapped with create-next-app --typescript.

Next.JS Dashboard

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

This dashboard is built with Typescript and implement some layouts, with React Bootstrap.

Screenshot

Dashboard

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

Mobile (collapsed)	Mobile (expand)

Sample page

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

Login

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

Register

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

Getting Started

First, setup the application:

pnpm install

Then, run the development server:

pnpm run dev

Open 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 can be accessed on 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 instead of React pages.

Learn More

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

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Next.JS Rendering

Click to expand

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 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
   1. React redux
   2. Redux toolkit
2. Axios
3. React-bootstrap
4. Immer
5. react-fontawesome
   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
7. Eslint
   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

Reference

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