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.
Para mais informações sobre essas tecnologias, clique nela.
npx create-next-app -e https://github.com/Henrique0498/boilerplate_nextjs
yarn create next-app -e https://github.com/Henrique0498/boilerplate_nextjs
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 comandobuild
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.
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 trechocompiler: { 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 dojest-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.
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 trechosassOptions: { 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.
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
Nota: para mais informações, consulte a documentação oficial do Next.js