Next Plate Save
🦸♀️ A super template for Next.js with a pack of incredible tools
Next-Plate
🦸♀️ A super template for Next.js with a pack of incredible tools
🌎 Translations
🚀 Demo →
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.
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 →
🌟 Features
This project features all the latest tools and good practices in web development!
Framework
- ⚛️ Next.js – A complete React framework for hybrid and server rendering
Data Fetching
- ✳️ React Query – Hooks for fetching, caching and updating asynchronous data in React
- ❇️ SWR (alternative for React Query) – A React Hooks library for data fetching
- 🔄 Axios – Promise based HTTP client for the browser and Node.js
State Management and Hooks
- 🐻 Zustand – A small, fast and scalable bearbones state-management solution using simplified flux principles
- 👍 react-use – Collection of essential React Hooks
Design System and Animations
- 🎨 Chakra-UI – A simple, modular and accessible component library that gives you the building blocks to build your React applications
- 🎞️ Framer Motion – A production-ready motion library for React
- ✨ React Icons – A collection of popular icons to React projects
Form Validation
- 📋 React Hook Form – Performant, flexible and extensible forms with easy-to-use validation
- 🚨 Yup – A schema builder for runtime value parsing and validation
Tests
- 🃏 Jest – A delightful JavaScript Testing Framework with a focus on simplicity
- 🐙 Testing Library – Simple and complete testing utilities that encourage good testing practices
Design Patterns
- ⛔ ESLint – Find and fix problems in your JavaScript code
- 🎀 Prettier – An opinionated code formatter, supporting multiple languages and code editors
- 🐺 Husky – Modern native Git hooks made easy
- 💩 lint-staged – Run linters against staged git files and don't let 💩 slip into your code base
- 📓 commitlint – Helps your team adhering to a commit convention
- 🏷️ Standard Version – A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits
Analysis
- 🕵🏻♂️ why-did-you-render (optional) – Notify you about potentially avoidable re-renders
Additional Plugins
- 🗃️ next-compose-plugins – Provides a cleaner API for enabling and configuring plugins for Next.js
- 📱 next-pwa – A PWA plugin for Next.js
- 📈 next-seo – A plugin that makes managing your SEO easier in Next.js projects
- 🤖 next-sitemap – Sitemap generator for Next.js
- 🎉 Partytown – Relocate resource intensive third-party scripts off of the main thread and into a web worker
▶️ Getting Started
📙 Creating a New Repository on GitHub
- Click on "Use this template" button
- Configure your new repository and click on "Create repository from template" button
- Now you can clone the generated repository to your local machine:
$ git clone https://github.com/<YOUR-GITHUB-LOGIN>/<NAME-OF-YOUR-GENERATED-REPOSITORY>.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:
$ cd <NAME-OF-YOUR-GENERATED-REPOSITORY>
For the next steps, choose a package manager of your choice and change the commands contained in the
package.jsonscripts. See their documentation for more information:
Install all dependencies of the project:
# PNPM
$ pnpm install
# NPM
$ npm install
# Yarn
$ yarn install
⌨️ Development
Once all dependencies have been installed, you can run the local development server:
# 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:
# PNPM
$ pnpm run build
# NPM
$ npm run build
# Yarn
$ yarn build
And then run the build:
# PNPM
$ pnpm start
# NPM
$ npm start
# Yarn
$ yarn start
View more commands you can use
Lint
# PNPM
$ pnpm run lint
# NPM
$ npm run lint
# Yarn
$ yarn lint
Lint and Fix
# PNPM
$ pnpm run lint:fix
# NPM
$ npm run lint:fix
# Yarn
$ yarn lint:fix
Test
# 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
# PNPM
$ pnpm run type-check
# NPM
$ npm run type-check
# Yarn
$ yarn type-check
Format
# PNPM
$ pnpm run format
# NPM
$ npm run format
# Yarn
$ yarn format
Interactive Update Tool
# PNPM
$ pnpm run up
# NPM
$ npm run up
# Yarn
$ yarn up
Update All Dependencies
# PNPM
$ pnpm run up-latest
# NPM
$ npm run up-latest
# Yarn
$ yarn up-latest
Release As Major Version
# PNPM
$ pnpm run release-as-major
# NPM
$ npm run release-as-major
# Yarn
$ yarn release-as-major
Release As Minor Version
# PNPM
$ pnpm run release-as-minor
# NPM
$ npm run release-as-minor
# Yarn
$ yarn release-as-minor
Release As Patch Version
# PNPM
$ pnpm run release-as-patch
# NPM
$ npm run release-as-patch
# Yarn
$ yarn release-as-patch
Publish Release
# PNPM
$ pnpm run push-release
# NPM
$ npm run push-release
# Yarn
$ yarn push-release
Get Updates From Remote and Maintain Current Changes
# PNPM
$ pnpm run pull
# NPM
$ npm run pull
# Yarn
$ yarn pull
⚙️ Extra Configurations
SWR
Swap to SWR
Install the SWR on the project:
# 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:
# 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.
📂 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 page for details.
⭐ Give a star to maintain this project!
❤️ Thanks for your attention!
👨💻 Good Hacking!
Open Source Agenda Badge
