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