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//.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
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:
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.