nextjs ts

NEXTJS Boilerplate

Um Boilerplate de Opinacionado para o Kickstart Projects usando NextJs

Características

• ? Próximos 13
• ⚛️ React 18
• ? Documento e aplicativo personalizados
• Segurança do tipo
• ? Escreva SCSS e Future CSS com POSTCSS + Predefinição-env
• ? SVG Sprite para ícones
• ? Fique seu código com Eslint & Stylelint
• ? Mais bonito para estilo de código consistente
• ? Biblioteca de testes de jest + para testes
• ☝️ Husky + fiagetaly para garantia de qualidade de código
• Arquivo EditorConfig para recuos consistentes
• ? Redux com react-redux e redux-thunk

Ramificações de variação

Servidor personalizado

git clone -b custom-server --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Enzima

git clone -b enzyme --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Sem redux

git clone -b no-redux --single-branch [email protected]:sanjaytwisk/nextjs-ts.git

Começando

Antes de começar a desenvolver seu aplicativo incrível, você precisa instalar as dependências do projeto. Verifique se você tem o nó (> = 10.13.0) e o NPM instalado e executado:

$ npm install

⌨️ Desenvolvimento

Depois que todas as dependências forem instaladas, você poderá iniciar o desenvolvimento. Para iniciar um servidor de desenvolvimento em http: // localhost: 3000 run:

$ npm run dev

? Produção

Para executar seu aplicativo em produção, certifique -se de executar uma construção primeiro:

$ npm run build

E, em seguida, inicie seu aplicativo com um número de porta fornecido (padrão para 3000, se não for fornecido):

$ PORT=8080 npm run start

? Estático

Você também pode exportar seu aplicativo para um site estático:

npm run export

Isso tornará as páginas HTML estáticas em ./out

? Linters

O Boilerplate fornece alguns linters para ajudá -lo a ficar de olho na consistência do código e na segurança do tipo. Existem três linters: um para CSS, um para TypeScript e outro para segurança de tipo. Você pode usar cada um deles separadamente usando os seguintes comandos:

$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types

Dica: para tirar o máximo proveito dos linters, instale os plugins correspondentes (Stylelint, TSLint) para o seu editor ou IDE

Mais bonito

Mais bonito ajuda você a fazer cumprir o estilo de código consistente (opinativo). Se possível, você pode dizer ao seu editor para formatar seu código ao salvar um arquivo. Se você não conseguir fazer isso, poderá executar mais bonito usando manualmente:

$ npm run prettier

? Testes

Você pode escrever seus testes usando brincadeiras e enzimas. Você pode executar todo o teste com o seguinte comando

$ npm run test

Se você deseja seguir o desenvolvimento orientado a testes, pode usar:

$ npm run test:dev

Módulos

TypeScript

TypeScript e Babel são pré-configurados com resolvedores de módulos personalizados. Isso significa que você pode usar importações absolutas com namespaces personalizados por padrão para os seguintes módulos:

 /* import common library */
import lib from '@common/<folder>/<lib>'
/* import component */
import Counter from '@components/counter/Counter'
/* import container */
import HomepageCounter from '@containers/counter/HomepageCounter'
/* import store files */
import { CounterAction } from '@store/counter/counterActions'

SCSS

Por padrão, o caminho ./src/common/css é configurado como um caminho incluído para o nosso carregador SCSS. Isso significa que você pode importar qualquer um dos arquivos desta pasta diretamente sem o caminho relativo ou absoluto:

 @import 'variables' ;
@import 'colors' ;