Next-Plate

🦸‍♀️ A super template for Next.js with a pack of incredible tools

---

---

🌎 Translations

• Português Brasileiro

🚀 Demo

📖 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!

🌟 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

• ❇️ SWR – A React Hooks library for data fetching
• 🔄 Axios – Promise based HTTP client for the browser and Node.js

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
• 👓 Sass – A powerful and professional CSS extension language

Form Validation

• 📃 Formik – The world's most popular open source form library for React and React Native
• 🚨 Yup – A schema builder for runtime value parsing and validation

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

Analysis

• 🕵🏻‍♂️ why-did-you-render – 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

▶️ 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:

    $ git clone https://github.com/harunpehlivan/<name-of-your-generated-repository>.git

4. Move yourself to the root of the project

   $ cd <name-of-your-generated-repository>

5. Install all dependencies of the project

   • NPM

   $ npm install

   • Yarn

   $ yarn install

6. Run to start developing

   • NPM

   $ npm run dev

   • Yarn

   $ yarn dev

7. Make a production build to deploy the project

   • NPM

   $ npm run build

   • Yarn

   $ yarn build

8. Run the production build

   • NPM

   $ npm start

   • Yarn

   $ yarn start

👨‍💻 Good Hacking!

❤️ Thanks for your attention!