Next-Plate

🦸‍♀️ A super template for Next.js you will fast to delivery your projects with fully SEO, hybrid SSG, SSR and bundle size if small

🚀 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

• On Demand unplug autoimport & icons

Data Fetching

• 🔄 Axios – Promise based HTTP client for the browser and Node.js

State Management

• 🐻 Rematch js – A small, fast and scalable state-management less than 2 kilobytes.

Design System and Animations

• 🎨 Tailwind Css – 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

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

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

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
• NPM
• Yarn

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

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

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) **
┃ ┣ 📂 pages/                   # App pages
┃ ┣ 📂 scripts/                 # Additional scripts **
┃ ┃ ┣ 📃 babel.config.js        # Babel config with WDYR **
┃ ┃ ┗ 📃 wdyr.ts                # WDYR file **
┃ ┣ 📂 stores/                  # 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
┣ 📃 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
┣ 📃 tsconfig.json              # TypeScript config

This project is licensed under the MIT License - see the LICENSE page for details.

---

⭐ Give a star to maintain this project!

❤️ Thanks for your attention!