next-plate

KO | EN

gitlite — search

#python #javascript #machine-learning #hacktoberfest #deep-learning #go #golang #python3 #game-development #nodejs #docker #pytorch

★ 118 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">
  Next-Plate
</h1>

<p align="center">
  <img src="./public/static/images/banner.jpg" alt="Next-Plate Banner" width="512px" />
</p>
<h3 align="center">
  🦸‍♀️ A super template for Next.js with a pack of incredible tools
</h3>

---

<p align="center">
  <a href="./LICENSE" title="Show the MIT License">
    <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge" alt="License MIT">
  </a>
  <br>
  <img src="https://forthebadge.com/images/badges/open-source.svg" alt="Open Source" />
  <img src="https://forthebadge.com/images/badges/made-with-typescript.svg" alt="Made with TypeScript" />
  <img src="https://forthebadge.com/images/badges/built-with-love.svg" alt="Built with Love" />
  <br>
  <a href="https://vercel.com" title="Open Vercel Website">
    <img src="./public/static/images/powered-by-vercel.svg" width="175" alt="Powered by Vercel" />
  </a>
</p>

---

<div align="center">
  <img src="./public/docs/demo/demo_desktop.gif" title="Desktop Version" alt="Demo Desktop" width="655px">
  <img src="./public/docs/demo/demo_mobile.gif" title="Mobile Version" alt="Demo Mobile" height="303px">
</div>

---

## 🌎 Translations

<kbd>[<img title="English" alt="English" src="https://flagicons.lipis.dev/flags/4x3/us.svg" width="22">](./public/docs/translations/README.en-US.md)</kbd>
<kbd>[<img title="Português Brasileiro" alt="Português Brasileiro" src="https://flagicons.lipis.dev/flags/4x3/br.svg" width="22">](./public/docs/translations/README.pt-BR.md)</kbd>
<kbd>[<img title="Korean" alt="Korean" src="https://flagicons.lipis.dev/flags/4x3/kr.svg" width="22">](./public/docs/translations/README.ko-KR.md)</kbd>

## 🚀 [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/<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:

```bash
$ 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.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
```

<details>
 <summary>View more commands you can use</summary>

```bash
# PNPM
$ pnpm run lint
# NPM
$ npm run lint
# Yarn
$ yarn lint
```

```bash
# PNPM
$ pnpm run lint:fix
# NPM
$ npm run lint:fix
# Yarn
$ yarn lint:fix
```

```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
```

<h4>Type Checking</h4>

```bash
# PNPM
$ pnpm run type-check
# NPM
$ npm run type-check
# Yarn
$ yarn type-check
```

<h4>Format</h4>

```bash
# PNPM
$ pnpm run format
# NPM
$ npm run format
# Yarn
$ yarn format
```

<h4>Interactive Update Tool</h4>

```bash
# PNPM
$ pnpm run up
# NPM
$ npm run up
# Yarn
$ yarn up
```

<h4>Update All Dependencies</h4>

```bash
# PNPM
$ pnpm run up-latest
# NPM
$ npm run up-latest
# Yarn
$ yarn up-latest
```

<h4>Release As Major Version</h4>

```bash
# PNPM
$ pnpm run release-as-major
# NPM
$ npm run release-as-major
# Yarn
$ yarn release-as-major
```

<h4>Release As Minor Version</h4>

```bash
# PNPM
$ pnpm run release-as-minor
# NPM
$ npm run release-as-minor
# Yarn
$ yarn release-as-minor
```

<h4>Release As Patch Version</h4>

```bash
# PNPM
$ pnpm run release-as-patch
# NPM
$ npm run release-as-patch
# Yarn
$ yarn release-as-patch
```

<h4>Publish Release</h4>

```bash
# PNPM
$ pnpm run push-release
# NPM
$ npm run push-release
# Yarn
$ yarn push-release
```

<h4>Get Updates From Remote and Maintain Current Changes</h4>

```bash
# PNPM
$ pnpm run pull
# NPM
$ npm run pull
# Yarn
$ yarn pull
```

</details>

### ⚙️ Extra Configurations

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`.

</details>

<details>
 <summary>Why Did You Render</summary>

<h4>How to Activate</h4>

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!

<h4>How to Uninstall</h4>

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
```

</details>

## 📁 File Tree

See below the file tree to understand the project structure.

> 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
```

</details>

## 📜 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!

---

[!["Buy Me A Coffee"](https://cdn.buymeacoffee.com/buttons/default-red.png)](https://www.buymeacoffee.com/gmatthewsfeuer)

next-plate

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README