next-plate - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #typescript #llm #golang #machine-learning #macos #java #awesome #awesome-list #pytorch #security #openai #open-source

next-plate

(★ 118)

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

File Explorer

Download Latest Version (.zip)

- - issue_template.md
- FUNDING.yml
- PULL_REQUEST_TEMPLATE.md
- commit-msg
- pre-commit
- extensions.json
- launch.json
- favicon.ico
- site.webmanifest
- - index.tsx
- - useFetch.ts
- - IUser.ts
- - _app.tsx
  - _document.tsx
  - index.tsx
- - babel.config.js
  - wdyr.ts
- - user.ts
- - bgImages.ts
  - theme.ts
- - .gitkeep
.commitlintrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmrc
.prettierignore
.prettierrc
.versionrc
CHANGELOG.md
jest.config.js
jest.setup.js
LICENSE
next-env.d.ts
next-seo.config.js
next-sitemap.config.js
next.config.js
package.json
pnpm-lock.yaml
README.md
renovate.json
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/gustavomorinaga/next-plate

Downloads the entire project code from GitHub to your computer.

cd next-plate

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ pnpm install

Downloads and installs the libraries listed in package.json.

$ npm install

Downloads and installs the libraries listed in package.json.

$ yarn install

Downloads and installs the libraries listed in package.json.

$ pnpm run dev

Starts the development/run server.

$ npm run dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

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

---

<p align="center">
 <a href="https://sonarcloud.io/summary/new_code?id=gmatthewsfeuer_next-plate">
   <img src="https://sonarcloud.io/api/project_badges/measure?project=gmatthewsfeuer_next-plate&metric=bugs" alt="Bugs" title="Bugs" />
   <img src="https://sonarcloud.io/api/project_badges/measure?project=gmatthewsfeuer_next-plate&metric=sqale_rating" alt="Maintainability Rating" title="Maintainability Rating" />
   <img src="https://sonarcloud.io/api/project_badges/measure?project=gmatthewsfeuer_next-plate&metric=alert_status" alt="Quality Gate Status" title="Quality Gate Status" />
   <img src="https://sonarcloud.io/api/project_badges/measure?project=gmatthewsfeuer_next-plate&metric=reliability_rating" alt="Reliability Rating" title="Reliability Rating" />
   <img src="https://sonarcloud.io/api/project_badges/measure?project=gmatthewsfeuer_next-plate&metric=security_rating" alt="Security Rating" title="Security Rating" />
   <img src="https://sonarcloud.io/api/project_badges/measure?project=gmatthewsfeuer_next-plate&metric=vulnerabilities" alt="Vulnerabilities" title="Vulnerabilities" />
 </a>
 <a href="https://app.renovatebot.com/dashboard">
   <img src="https://camo.githubusercontent.com/360c8015d9ce49450a3af7d9782f7035ef677763b800bea727b90c37f873433e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f72656e6f766174652d656e61626c65642d2532333141314636433f6c6f676f3d72656e6f76617465626f74" alt="Renovate" />
 </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!

<div>
 <a href="https://vercel.com/import/project?template=https://github.com/gmatthewsfeuer/next-plate" title="Deploy to Vercel">
  <img src="https://vercel.com/button" alt="Deploy to Vercel" />
 </a>
 <a href="https://app.netlify.com/start/deploy?repository=https://github.com/gmatthewsfeuer/next-plate" title="Deploy to Netlify">
  <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
 </a>
 <a href="https://stackblitz.com/fork/github/gmatthewsfeuer/next-plate" title="Open in StackBlitz">
  <img
    src="https://developer.stackblitz.com/img/open_in_stackblitz.svg"
    alt="Open in StackBlitz"
  />
 </a>
</div>

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

<h4>Lint</h4>

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

<h4>Lint and Fix</h4>

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

<h4>Test</h4>

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

<details>
 <summary>SWR</summary>

<h4>Swap to SWR</h4>

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.

<details>
 <summary>View file tree</summary>

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