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 installThen, run the development server:
pnpm run devOpen 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
- Redux
- Axios
- React-bootstrap
- Immer
- react-fontawesome
- SWR
- Eslint
- https://github.com/typescript-eslint/typescript-eslint
- https://github.com/jsx-eslint/eslint-plugin-react
- https://reactjs.org/docs/hooks-rules.html#eslint-plugin
- https://www.npmjs.com/package/eslint-config-airbnb
- https://www.npmjs.com/package/eslint-config-airbnb-typescript
- https://github.com/prettier/eslint-config-prettier