This is a Next.js project bootstrapped with create-next-app --typescript.
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.
https://nextjs-dashboard-olive.vercel.app
| Mobile (collapsed) | Mobile (expand) |
|---|---|
 |
 |
https://nextjs-dashboard-olive.vercel.app/pokemons
https://nextjs-dashboard-olive.vercel.app/login
https://nextjs-dashboard-olive.vercel.app/register
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.
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!
Click to expand
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.
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
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
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
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
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent