Boilerplate de Next.JS versão 14

Esse projeto é um boilerplate de Next.JS, um framework de React, feito na versão 14, com o intuito de facilitar a criação de projetos com as tecnologias mais atuais do mercado, tais como Styled-components, Storybook, TypeScript e Jest. A ideia desse boilerplate é gerar um boileplate completo com todas as tecnologias iniciais de um projeto ja configurada, a partir disso a ideia de 3 fontes de CSS nele.

Tecnologias usadas nesse projeto

Para mais informações sobre essas tecnologias, clique nela.

Iniciar o projeto

Npm

npx create-next-app -e https://github.com/Henrique0498/boilerplate_nextjs

Yarn

yarn create next-app -e https://github.com/Henrique0498/boilerplate_nextjs

Comandos

• dev: inicia aplicação no localhost:3000;
• build: compila uma build da aplicação para uma versão de produção;
• start: inicia a versão de produção que foi feita com o comando build no localhost:3000;
• generate: cria components de forma padronizada a partir dos templates que esta na pasta generators;
• storybook: inicia o storybook;
• build-storybook: compila uma build do storybook em uma versão de produção;
• test: executa o jest pra ele validar os testes.
• test:watch: executa o jest pra ele ficar monitorando os testes feitos.
• test:ci: executa o jest pra rodar todos os testes do sistema.
• prepare: executa o husk.
• lint: executa o linting integrado do Next.js para verificar e corrigir problemas de formatação e código.

Retirando partes do projeto

Styled components

Rode o comando a baixo

  npm uninstall styled-components
  # ou
  yarn remove styled-components

• No component Titles, existe a utilização de styled component, certifique-se de retiralo;
• No arquivo next.config.js remova o trecho compiler: { styledComponents: true },;
• Na pasta generators, existe a configuração para o styled component ser usado na criação de components futuros, remova o arquivo styles.ts.hbs localizada na templates;
• Na pasta generators, no arquivo plopfile.js remova o trecho { type: 'add', path: '../src/components/{{atomic}}/{{pascalCase name}}/styles.ts', templateFile: 'templates/styles.ts.hbs' }, localizado na linha 28-32;
• Na pasta templates, localidada na pasta generators, existe o arquivo Component.tsx.hbs, remova o styled-componets dele;
• Na pasta .jest, existe o arquivo setup.ts, remova import do jest-styled-components;
• Na pasta types, existe o arquivo jest-styled-components.d.ts, remova ele;
• Na pasta .storybook, no arquivo preview.ts, remova o GlobalStyles.

Sass

Rode o comando a baixo

  npm uninstall styled-components
  # ou
  yarn remove styled-components

• No arquivo layout, existe a utilização de Sass, certifique-se de retiralo;
• No arquivo next.config.js remova o trecho sassOptions: { includePaths: [path.join(__dirname, 'styles')] },;
• Na pasta generators, existe a configuração para o sass ser usado na criação de components futuros, remova o arquivo styles.scss.hbs localizada na templates;
• Na pasta generators, existe a configuração para o styled component ser usado na criação de components futuros, remova o arquivo styles.ts.hbs localizada na templates;
• Na pasta generators, no arquivo plopfile.js remova o trecho { type: 'add', path: '../src/components/{{atomic}}/{{pascalCase name}}/styles.module.scss', templateFile: 'templates/styles.scss.hbs' }, localizado na linha 33-37;
• Na pasta templates, localidada na pasta generators, existe o arquivo Component.tsx.hbs, remova o sass dele;
• Na pasta .storybook, no arquivo preview.ts, remova o estilo global do sass.

Publicar na vercel

A maneira mais facil de publicar sua aplicação Next.js é usar a plataforma vercel, a propria criadora do Next.js.

Para mais detalhes sobre como publicar, consulte a documentação do Next.js

Mais informações

Nota: para mais informações, consulte a documentação oficial do Next.js