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
-
🐻 Zustand – A small, fast and scalable bearbones state-management solution using simplified flux principles
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
▶️
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>
Install all dependencies of the project:
$ npm install
# or
$ yarn install
⌨️
Development
Once all dependencies have been installed, you can run the local development server:
$ npm run dev
# or
$ 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:
$ npm run build
# or
$ yarn build
And then run the build:
$ npm start
# or
$ yarn start
View more commands you can use
Lint
$ npm run lint
# or
$ yarn lint
Lint and Fix
$ npm run lint:fix
# or
$ yarn lint:fix
Test
$ npm run test # or npm run test:watch
# or
$ yarn test # or yarn test:watch
Type Checking
$ npm run type-check
# or
$ yarn type-check
Format
$ npm run format
# or
$ yarn format
Interactive Update Tool
$ npm run up
# or
$ yarn up
Update All Dependencies
$ npm run up-latest
# or
$ yarn up-latest
Release As Major Version
$ npm run release-as-major
# or
$ yarn release-as-major
Release As Minor Version
$ npm run release-as-minor
# or
$ yarn release-as-minor
Release As Patch Version
$ npm run release-as-patch
# or
$ yarn release-as-patch
Publish Release
$ npm run push-release
# or
$ yarn push-release
Get Updates From Remote and Maintain Current Changes
$ npm run pull
# or
$ yarn pull
⚙️
Extra Configurations
SWR
Swap to SWR
Install the SWR on the project:
$ npm install swr
# or
$ 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:
$ npm uninstall @welldone-software/why-did-you-render
# or
$ 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.
4 May 3, 2022
14 Jan 3, 2023
113 Dec 6, 2022
22 Dec 15, 2022
13 Nov 23, 2022
10 May 14, 2022
8 Mar 31, 2022
4 Aug 15, 2022
14 Dec 1, 2022
10 Dec 14, 2022
123 Jan 4, 2023
15 Dec 23, 2022
7 Oct 21, 2022
30 May 21, 2022
4 Dec 28, 2022
10 Oct 16, 2022
2.3k Jan 3, 2023
103 Jan 3, 2023
12 Jul 14, 2022