Next-Plate

🦸‍♀️ Um super modelo de projeto para Next.js com pacote de ferramentas incríveis

🌎 Traduções

🚀 Demonstração →

Faça deploy da sua própria cópia deste modelo com apenas alguns cliques!

📖 Introdução

Este projeto é um modelo completo que você precisa para o seus próximos projetos de React, com todas as boas práticas da JAMStack.

Este modelo possui muitas pastas, exemplos de código e configurações. Sinta-se livre para editá-las ou excluí-las, incluindo este README!

Customize e divirta-se!

🌟 Recursos

Este projeto apresenta todas as ferramentas e boas práticas mais recentes em desenvolvimento web!

Framework

⚛️ Next.js – Um framework React para renderizações híbridas e de servidor

Requisição de Dados

✳️ React Query – Hooks para buscar, armazenar e atualizar dados assíncronos em cache no React
❇️ SWR (alternativa para o React Query) – Uma biblioteca de React Hooks para busca de dados
🔄 Axios – Cliente HTTP baseado em Promise para o navegador e Node.js

Gerenciamento de Estado e Hooks

🐻 Zustand – Uma solução de gerenciamento de estado de bearbones pequena, rápida e escalável usando princípios de fluxo simplificados
👍 react-use – Coleção essencial de React Hooks

Design System e Estilização

🎨 Chakra-UI – Uma biblioteca de componentes simples, modular e acessível que fornece os blocos de construção para construir seus aplicativos React
🎞️ Framer Motion – Uma biblioteca de animações pronta para produção para React
✨ React Icons – Uma coleção de ícones populares para projetos React

Validação de Formulários

📋 React Hook Form – Formulários performáticos, flexíveis e extensíveis com validação fácil de usar
🚨 Yup – Um construtor de schema para análise e validação de valor em tempo de execução

Testes

🃏 Jest – Um poderoso Framework de Testes em JavaScript com um foco na simplicidade
🐙 Testing Library – Utilitários de teste simples e completos que incentivam boas práticas de teste

Padrões de Projeto

⛔ ESLint – Encontre e corrija problemas em seus códigos JavaScript
🎀 Prettier – Um formatador opinativo de código, com suporte a várias linguagens e editores de código
🐺 Husky – Git Hooks nativo e moderno de forma fácil
💩 lint-staged – Execute linters em arquivos git e não deixe 💩 entrar em sua base de código
📓 commitlint – Ajuda sua equipe a aderir a uma convenção de commit
🏷️ Standard Version – Um utilitário para versionamento usando geração semver e CHANGELOG alimentado por Conventional Commits

Análises

🕵🏻‍♂️ why-did-you-render (opcional) – Te notifica sobre re-renderizações potencialmente evitáveis

Plugins Adicionais

🗃️ next-compose-plugins – Fornece uma API mais limpa para ativar e configurar plugins para Next.js
📱 next-pwa – Um plugin de PWA para Next.js
📈 next-seo – Um plugin que facilita o gerenciamento do SEO de seus projetos em Next.js
🤖 next-sitemap – Gerador de sitemap para Next.js
🎉 Partytown – Realoque scripts de terceiros com uso intensivo de recursos do thread principal para um web worker

▶️ Começando

📙 Criando um Novo Repositório no GitHub

Clique no botão "Use this template" ("Usar este modelo/template")
Configure o seu novo repositório e clique no botão "Create repository from template" ("Criar repositório a partir do modelo/template")
Agora você consegue clonar o repositório criado para a sua máquina local:

$ git clone https://github.com/<SEU-LOGIN-DO-GITHUB>/<NOME-DO-SEU-REPOSITORIO-GERADO>.git

🛠️ Instalação

Antes de você poder começar a desenvolver sua super aplicação, você precisa instalar todas as dependências do projeto.

Entre na raiz do projeto:

$ cd <NOME-DO-SEU-REPOSITORIO-GERADO>

Para os próximos passos, escolha um gerenciador de pacotes de sua preferência e altere os comandos contidos nos scripts package.json. Consulte a documentação deles para obter mais informações:

PNPM

NPM

Yarn

Instale as dependências do projeto:

# PNPM
$ pnpm install
# NPM
$ npm install
# Yarn
$ yarn install

⌨️ Desenvolvimento

Depois que todas as dependências foram instaladas corretamente, você pode iniciar o servidor local de desenvolvimento:

# PNPM
$ pnpm run dev
# NPM
$ npm run dev
# Yarn
$ yarn dev

Agora é só codar!

🖥️ Produção

Após aplicar as alterações, você pode gerar um pacote para testar e/ou enviar para o seu ambiente de produção.

Gere o pacote de produção:

# PNPM
$ pnpm run build
# NPM
$ npm run build
# Yarn
$ yarn build

E em seguida rode o pacote:

# PNPM
$ pnpm start
# NPM
$ npm start
# Yarn
$ yarn start

Ver mais comandos para você usar

Lint

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

Lint e Correção

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

Testar

# PNPM
$ pnpm run test # ou pnpm run test:watch
# NPM
$ npm run test # ou npm run test:watch
# Yarn
$ yarn test # ou yarn test:watch

Verificação de Tipagem

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

Formatação

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

Ferramenta de atualização interativa

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

Atualizar Todas as Dependências

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

Lançar como Versão Principal

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

Lançar como Versão Secundária

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

Lançar como Versão de Patch

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

Publicar Versão

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

Obter Atualizações Remotas e Manter as Alterações Atuais

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

⚙️ Configurações Extras

SWR

Trocar para o SWR

Instale o SWR no projeto:

# PNPM
$ pnpm install swr
# NPM
$ npm install swr
# Yarn
$ yarn add swr

Remova todas as linhas de importação, provedores and blocos de códigos do React Query localizados em src/pages/_app.tsx e src/pages/[login].tsx.

É isso! Use a função useFetch buscar os dados na aplicação.

Quer ver uma demonstração? Descomente as linhas de importação e blocos de códigos de implementação do SWR em src/pages/[login].tsx.

Why Did You Render

Como Ativar

Coloque o arquivo babel.config.js (localizado no caminho src/scripts) na raiz do projeto e exclua o arquivo .babelrc.

Descomente a linha de importação do wdyr em pages/_app.tsx.

É isso! Agora você pode monitorar as re-renderizações do React!

Como Desinstalar

Apenas deleta os arquivos babel.config.js e wdyr.ts, remova a linha de importação wdyr em pages/_app.tsx e desinstale:

# 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

📁 Árvore de Arquivos

Veja abaixo a árvore de arquivos para entender a estrutura do modelo de projeto.

Ver a árvore de arquivos

Pastas e arquivos marcados com (**) são opcionais, você pode excluí-los.

📂 next-plate/
┣ 📂 .github/                   # Pasta do GitHub **
┣ 📂 .husky/                    # Pasta do Husky
┃ ┣ 📃 commit-msg               # Git hook do ommitlint
┃ ┗ 📃 pre-commit               # Git hook do lint-staged
┣ 📂 .vscode/                   # Workspace do VSCode **
┣ 📂 public/                    # Pasta pública
┃ ┣ 📂 static/                  # Pasta para arquivos estáticos **
┃ ┃ ┣ 📂 icons/                 # Pasta para ícones **
┃ ┃ ┣ 📂 images/                # Pasta para imagens **
┃ ┃ ┣ 📂 sounds/                # Pasta para sons **
┃ ┃ ┗ 📂 videos/                # Pasta para vídeos **
┃ ┣ 📂 docs/                    # Pasta da documentação **
┃ ┃ ┣ 📂 demo/                  # Demonstrações do projeto **
┃ ┃ ┗ 📂 translations/          # Pasta de traduções **
┃ ┣ 📃 favicon.ico              # Ícone das abas do aplicativo
┃ ┣ 📃 site.webmanifest         # Configuração do PWA
┣ 📂 src/
┃ ┣ 📂 animations/              # Animações com Framer Motion **
┃ ┣ 📂 components/              # Componentes do aplicativo
┃ ┃ ┗ 📂 Motion/                # Componentes Chakra + Framer **
┃ ┣ 📂 hooks/                   # React Hooks **
┃ ┃ ┗ 📃 useFetch.ts            # SWR fetch hook (opcional) **
┃ ┣ 📂 interfaces/              # Interfaces do TypeScript
┃ ┣ 📂 pages/                   # Páginas do aplicativo
┃ ┣ 📂 scripts/                 # Scripts adicionais **
┃ ┃ ┣ 📃 babel.config.js        # Configuração do Babel com WDYR **
┃ ┃ ┗ 📃 wdyr.ts                # Arquivo do WDYR **
┃ ┣ 📂 services/                # Serviços
┃ ┃ ┣ 📂 global/
┃ ┃ ┃ ┗ 📃 api.ts               # Configurações AXIOS
┃ ┃ ┗ 📂 users/
┃ ┃   ┣ 📃 index.ts             # Configuração React Query
┃ ┃   ┗ 📃 keys.ts              # Chaves do React Query
┃ ┣ 📂 stores/                  # Gerenciamento de estados do Zustand
┃ ┣ 📂 styles/                  # Pasta de estilos
┃ ┃ ┣ 📃 bgImages.ts            # Imagens de plano de fundo em SVG
┃ ┃ ┗ 📃 theme.ts               # Tema do Chakra-UI
┃ ┗ 📂 utils/                   # Funções úteis **
┣ 📃 .babelrc                   # Configuração padrão do Babel
┣ 📃 .editorconfig              # Configuração do editor
┣ 📃 .eslintignore              # ESLint ignore
┣ 📃 .eslintrc                  # Configuração do ESLint
┣ 📃 .gitignore                 # Git ignore
┣ 📃 .versionrc                 # Configuração de versionamento
┣ 📃 .commitlintrc              # Configuração do commitlint
┣ 📃 jest.config.js             # Configuração do Jest
┣ 📃 jest.setup.js              # Setup do Jest
┣ 📃 LICENSE                    # Licença do projeto
┣ 📃 next-env.d.ts              # Tipos do Next.js para o TypeScript
┣ 📃 next-seo.config.js         # Configuração Next-SEO
┣ 📃 next.config.js             # Configuração Next.js
┣ 📃 .prettierrc                # Configuração Prettier
┣ 📃 README.md                  # README principal
┣ 📃 renovate.json              # Configuração Renovate Bot **
┣ 📃 tsconfig.json              # Configuração TypeScript

📜 Licença

Embora você não precise, se você reutilizar este modelo para os seus projetos, eu agradeceria se você me desse o crédito e fornecesse um link para meu perfil do GitHub no rodapé do seu projeto. Obrigado!

Este projeto está licenciado sob a Licença MIT - veja a página LICENÇA para mais detalhes.

Files

README.pt-BR.md

Latest commit

History