Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gustavomorinaga/next-plate
🦸♀️ A super template for Next.js with a pack of incredible tools
https://github.com/gustavomorinaga/next-plate
axios chakra-ui commitlint eslint framer-motion gustavomorinaga husky lint-staged nextjs prettier pwa react-hook-form react-icons react-query ready-to-use template typescript yup zustand
Last synced: 6 days ago
JSON representation
🦸♀️ A super template for Next.js with a pack of incredible tools
- Host: GitHub
- URL: https://github.com/gustavomorinaga/next-plate
- Owner: gustavomorinaga
- License: mit
- Created: 2022-01-18T03:24:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-23T04:56:26.000Z (14 days ago)
- Last Synced: 2024-10-24T19:52:33.479Z (12 days ago)
- Topics: axios, chakra-ui, commitlint, eslint, framer-motion, gustavomorinaga, husky, lint-staged, nextjs, prettier, pwa, react-hook-form, react-icons, react-query, ready-to-use, template, typescript, yup, zustand
- Language: TypeScript
- Homepage: https://next-plate.vercel.app
- Size: 6.38 MB
- Stars: 112
- Watchers: 3
- Forks: 12
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - gustavomorinaga/next-plate - 🦸♀️ A super template for Next.js with a pack of incredible tools (TypeScript)
README
Next-Plate
🦸♀️ A super template for Next.js with a pack of incredible tools
---
---
---
## 🌎 Translations
[
](./public/docs/translations/README.en-US.md)
[
](./public/docs/translations/README.pt-BR.md)
[
](./public/docs/translations/README.ko-KR.md)
## 🚀 [Demo →](https://next-plate.vercel.app)
Deploy your own copy of this template in just a few clicks!
## 📖 Introduction
This is a **complete template** with all you need for your **next React projects** and all the **best practices** of **[JAMStack](https://jamstack.org)**.
This template have a bunch of folders, code examples and configurations. Feel free to edit or remove them, including this README!
**Customize and enjoy!**
## 📚 [Documentation →](https://next-plate.vercel.app/docs)
## 🌟 Features
This project features all the latest tools and good practices in web development!
### Framework
- ⚛️ **[Next.js](https://nextjs.org)** – A complete React framework for hybrid and server rendering
### Data Fetching
- ✳️ **[React Query](https://tanstack.com/query)** – Hooks for fetching, caching and updating asynchronous data in React
- ❇️ **[SWR](https://swr.vercel.app)** (alternative for React Query) – A React Hooks library for data fetching
- 🔄 **[Axios](https://github.com/axios/axios)** – Promise based HTTP client for the browser and Node.js
### State Management and Hooks
- 🐻 **[Zustand](https://zustand-demo.pmnd.rs)** – A small, fast and scalable bearbones state-management solution using simplified flux principles
- 👍 **[react-use](https://github.com/streamich/react-use)** – Collection of essential React Hooks
### Design System and Animations
- 🎨 **[Chakra-UI](https://chakra-ui.com)** – A simple, modular and accessible component library that gives you the building blocks to build your React applications
- 🎞️ **[Framer Motion](https://www.framer.com/motion)** – A production-ready motion library for React
- ✨ **[React Icons](https://react-icons.github.io/react-icons)** – A collection of popular icons to React projects
### Form Validation
- 📋 **[React Hook Form](https://react-hook-form.com)** – Performant, flexible and extensible forms with easy-to-use validation
- 🚨 **[Yup](https://github.com/jquense/yup)** – A schema builder for runtime value parsing and validation
### Tests
- 🃏 **[Jest](https://jestjs.io)** – A delightful JavaScript Testing Framework with a focus on simplicity
- 🐙 **[Testing Library](https://testing-library.com)** – Simple and complete testing utilities that encourage good testing practices
### Design Patterns
- ⛔ **[ESLint](https://eslint.org)** – Find and fix problems in your JavaScript code
- 🎀 **[Prettier](https://prettier.io)** – An opinionated code formatter, supporting multiple languages and code editors
- 🐺 **[Husky](https://github.com/typicode/husky)** – Modern native Git hooks made easy
- 💩 **[lint-staged](https://github.com/okonet/lint-staged)** – Run linters against staged git files and don't let 💩 slip into your code base
- 📓 **[commitlint](https://commitlint.js.org)** – Helps your team adhering to a commit convention
- 🏷️ **[Standard Version](https://github.com/conventional-changelog/standard-version)** – A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits
### Analysis
- 🕵🏻♂️ **[why-did-you-render](https://github.com/welldone-software/why-did-you-render)** (optional) – Notify you about potentially avoidable re-renders
### Additional Plugins
- 🗃️ **[next-compose-plugins](https://github.com/cyrilwanner/next-compose-plugins)** – Provides a cleaner API for enabling and configuring plugins for Next.js
- 📱 **[next-pwa](https://github.com/shadowwalker/next-pwa)** – A PWA plugin for Next.js
- 📈 **[next-seo](https://github.com/garmeeh/next-seo)** – A plugin that makes managing your SEO easier in Next.js projects
- 🤖 **[next-sitemap](https://github.com/iamvishnusankar/next-sitemap)** – Sitemap generator for Next.js
- 🎉 **[Partytown](https://partytown.builder.io/)** – Relocate resource intensive third-party scripts off of the main thread and into a web worker
## ▶️ Getting Started
### 📙 Creating a New Repository on GitHub
1. Click on "**Use this template**" button
2. Configure your new repository and click on "**Create repository from template**" button
3. Now you can clone the generated repository to your local machine:
```bash
$ git clone https://github.com//.git
```
### 🛠️ Installation
Before you can start developing your super application, you need to install the project's dependencies.
Move yourself to the root of the project:
```bash
$ cd
```
> For the next steps, choose a package manager of your choice and change the commands contained in the `package.json` scripts. See their documentation for more information:
>
> - [PNPM](https://pnpm.io/pt/cli/add)
> - [NPM](https://docs.npmjs.com/cli/v6/commands)
> - [Yarn](https://classic.yarnpkg.com/en/docs/cli)
Install all dependencies of the project:
```bash
# PNPM
$ pnpm install
# NPM
$ npm install
# Yarn
$ yarn install
```
### ⌨️ Development
Once all dependencies have been installed, you can run the local development server:
```bash
# PNPM
$ pnpm run dev
# NPM
$ npm run dev
# Yarn
$ yarn dev
```
Now just code!
### 🖥️ Production
After applying the changes, you can generate a build to test and/or deploy to your production environment.
Make a production build:
```bash
# PNPM
$ pnpm run build
# NPM
$ npm run build
# Yarn
$ yarn build
```
And then run the build:
```bash
# PNPM
$ pnpm start
# NPM
$ npm start
# Yarn
$ yarn start
```
View more commands you can use
Lint
```bash
# PNPM
$ pnpm run lint
# NPM
$ npm run lint
# Yarn
$ yarn lint
```
Lint and Fix
```bash
# PNPM
$ pnpm run lint:fix
# NPM
$ npm run lint:fix
# Yarn
$ yarn lint:fix
```
Test
```bash
# PNPM
$ pnpm run test # or pnpm run test:watch
# NPM
$ npm run test # or npm run test:watch
# Yarn
$ yarn test # or yarn test:watch
```
Type Checking
```bash
# PNPM
$ pnpm run type-check
# NPM
$ npm run type-check
# Yarn
$ yarn type-check
```
Format
```bash
# PNPM
$ pnpm run format
# NPM
$ npm run format
# Yarn
$ yarn format
```
Interactive Update Tool
```bash
# PNPM
$ pnpm run up
# NPM
$ npm run up
# Yarn
$ yarn up
```
Update All Dependencies
```bash
# PNPM
$ pnpm run up-latest
# NPM
$ npm run up-latest
# Yarn
$ yarn up-latest
```
Release As Major Version
```bash
# PNPM
$ pnpm run release-as-major
# NPM
$ npm run release-as-major
# Yarn
$ yarn release-as-major
```
Release As Minor Version
```bash
# PNPM
$ pnpm run release-as-minor
# NPM
$ npm run release-as-minor
# Yarn
$ yarn release-as-minor
```
Release As Patch Version
```bash
# PNPM
$ pnpm run release-as-patch
# NPM
$ npm run release-as-patch
# Yarn
$ yarn release-as-patch
```
Publish Release
```bash
# PNPM
$ pnpm run push-release
# NPM
$ npm run push-release
# Yarn
$ yarn push-release
```
Get Updates From Remote and Maintain Current Changes
```bash
# PNPM
$ pnpm run pull
# NPM
$ npm run pull
# Yarn
$ yarn pull
```
### ⚙️ Extra Configurations
SWR
Swap to SWR
Install the SWR on the project:
```bash
# PNPM
$ pnpm install swr
# NPM
$ npm install swr
# Yarn
$ yarn add swr
```
Remove all import lines, providers and code blocks of React Query located in `src/pages/_app.tsx` and `src/pages/[login].tsx`.
That's it! Use the `useFetch` function to fetch your data in the application.
Wanna see a demo? Uncomment all import lines and code blocks of SWR implementation on `src/pages/[login].tsx`.
Why Did You Render
How to Activate
Put the `babel.config.js` file (located in the path `src/scripts`) in the project root and delete `.babelrc` file.
Uncomment the `wdyr` import line on `pages/_app.tsx`.
That's it! Now you can monitore React re-renders!
How to Uninstall
Just delete the `babel.config.js` and `wdyr.ts` files, remove `wdyr` import line on `pages/_app.tsx` and uninstall it:
```bash
# PNPM
$ pnpm uninstall @welldone-software/why-did-you-render
# NPM
$ npm uninstall @welldone-software/why-did-you-render
# Yarn
$ yarn remove @welldone-software/why-did-you-render
```
## 📁 File Tree
See below the file tree to understand the project structure.
View file tree
> Folders and files marked with (`**`) are optional, so you can delete then.
```txt
📂 next-plate/
┣ 📂 .github/ # GitHub's folder configs **
┣ 📂 .husky/ # Husky's folder
┃ ┣ 📃 commit-msg # Commitlint git hook
┃ ┗ 📃 pre-commit # Lint-staged git hook
┣ 📂 .vscode/ # VSCode's workspace **
┣ 📂 public/ # Public folder
┃ ┣ 📂 static/ # Static files folder **
┃ ┃ ┣ 📂 icons/ # Icons folder **
┃ ┃ ┣ 📂 images/ # Images folder **
┃ ┃ ┣ 📂 sounds/ # Sounds folder **
┃ ┃ ┗ 📂 videos/ # Videos folder **
┃ ┣ 📂 docs/ # Documentation folder **
┃ ┃ ┣ 📂 demo/ # Demonstrations project **
┃ ┃ ┗ 📂 translations/ # Translations folder **
┃ ┣ 📃 favicon.ico # Icon tab browser
┃ ┣ 📃 site.webmanifest # PWA config
┣ 📂 src/
┃ ┣ 📂 animations/ # Framer Motion Animations **
┃ ┣ 📂 components/ # App Components
┃ ┃ ┗ 📂 Motion/ # Chakra + Framer components **
┃ ┣ 📂 hooks/ # React Hooks **
┃ ┃ ┗ 📃 useFetch.ts # SWR fetch hook (optional) **
┃ ┣ 📂 interfaces/ # TypeScript Interfaces
┃ ┣ 📂 pages/ # App pages
┃ ┣ 📂 scripts/ # Additional scripts **
┃ ┃ ┣ 📃 babel.config.js # Babel config with WDYR **
┃ ┃ ┗ 📃 wdyr.ts # WDYR file **
┃ ┣ 📂 services/ # Services
┃ ┃ ┣ 📂 global/
┃ ┃ ┃ ┗ 📃 api.ts # AXIOS config
┃ ┃ ┗ 📂 users/
┃ ┃ ┣ 📃 index.ts # React Query Configuration
┃ ┃ ┗ 📃 keys.ts # React Query Key
┃ ┣ 📂 stores/ # Zustand stores
┃ ┣ 📂 styles/ # Styles folder
┃ ┃ ┣ 📃 bgImages.ts # SVG background images **
┃ ┃ ┗ 📃 theme.ts # Chakra-UI theme
┃ ┗ 📂 utils/ # Useful functions **
┣ 📃 .babelrc # Default Babel config
┣ 📃 .editorconfig # Editor config
┣ 📃 .eslintignore # ESLint ignore
┣ 📃 .eslintrc # ESLint config
┣ 📃 .gitignore # Git ignore
┣ 📃 .versionrc # Versioning config
┣ 📃 .commitlintrc # Commitlint config
┣ 📃 jest.config.js # Jest config
┣ 📃 jest.setup.js # Jest setup
┣ 📃 LICENSE # License of the project
┣ 📃 next-env.d.ts # Next.js types to TypeScript
┣ 📃 next-seo.config.js # Next-SEO config
┣ 📃 next-sitemap.config.js # Next-Sitemap config
┣ 📃 next.config.js # Next.js config
┣ 📃 .prettierrc # Prettier config
┣ 📃 README.md # Main README
┣ 📃 renovate.json # Renovate Bot config **
┣ 📃 tsconfig.json # TypeScript config
```
## 📜 License
Although you don't have to, if you reuse this template for your projects I would appreciate it if you would **credit me and provide a link to my GitHub profile in the footer of your project**. Thanks!
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) page for details.
---
### ⭐ Give a star to maintain this project!
### ❤️ Thanks for your attention!
### 👨💻 Good Hacking!
---
[](https://www.buymeacoffee.com/gmatthewsfeuer)