ts nextjs tailwind starter

Next.js + Tailwind CSS + TypeScript Starter e Boilerplate

? TS-NEXTJS-TAILWIND-Starter

Next.js + Tailwind CSS + TypeScript Starter embalado com recursos de desenvolvimento úteis.

Feito por Theodorus Clarence

Características

Este repositório é? Bateria com:

• ⚡️ Next.js 14 com roteador de aplicativos
• ⚛️ React 18
• TypeScript
• ? Tailwind CSS 3 - configurado com variáveis CSS para estender a cor primária
• ? Componentes pré-criados-componentes que se adaptarão automaticamente com a cor da sua marca, verifique aqui a demonstração
• ? JEST - Configurado para testes de unidade
• ? Alias de importação e caminho absoluto - componentes de importação usando @/ prefix
• ? Eslint - Encontre e corrija problemas em seu código, também classificará suas importações automaticamente
• ? Mais bonito - formate seu código de forma consistente
• ? Husky & fiagados - Execute scripts em seus arquivos encenados antes de serem comprometidos
• ? Comitê convencional fia
• ⏰ Release, por favor-gerar seu changelog ativando o release-please fluxo de trabalho
• ? Ações do Github - fie seu código no PR
• ? Filial e edição automática Autolink - A filial será criada automaticamente no problema Atribuir e vinculado automaticamente no PR
• Trechos - uma coleção de trechos úteis
• ? Função do Helper Open GRAPS - Awesome Open Graph gerado usando OG, bifurá -lo e implantar!
• ? Mapa do site - gerar automaticamente Sitemap.xml
• ? Pacote de expansão - instale facilmente bibliotecas comuns, componentes adicionais e configurações.

Veja os detalhes do recurso e o Changelog? para mais.

Você também pode verificar todos os detalhes e demos na minha postagem no blog:

• Iniciante de um balcão para maximizar a eficiência nos Projetos Next.JS & Tailwind CSS

Começando

1. Clone este modelo usando uma das três maneiras

1. Use este repositório como modelo

   Divulgação: Ao usar este repositório como modelo, haverá uma atribuição no seu repositório.

   Agradeço se o fizer, então esse modelo também pode ser conhecido pelos outros?

   

2. Usando create-next-app

   pnpm create next-app  -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm

   Se você ainda deseja usar o diretório de páginas ( não é mantido ativamente ), você pode usar este comando

   npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name

3. Usando degit

   npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME

4. Implantar para vercel

2. Instale dependências

É incentivado a usar o PNPM para que os ganchos Husky possam funcionar corretamente.

pnpm install

3. Execute o servidor de desenvolvimento

Você pode iniciar o servidor usando este comando:

pnpm dev

Abra http: // localhost: 3000 com seu navegador para ver o resultado. Você pode começar a editar a página modificando src/pages/index.tsx .

4. Altere os padrões

Há algumas coisas que você precisa mudar, incluindo título, URLs, favicons, etc.

Encontre todos os comentários com! StarterConf e siga o guia.

Não se esqueça de mudar o nome do pacote em package.json

5. Convenção de mensagem de comprometimento

Este iniciador está usando commits convencionais, é obrigatório usá -lo para cometer alterações.

Projetos usando TS-NEXTJS-Tailwind-Starter

• Theodorusclarence.com (fonte)
• Notiolink (fonte)
• NEXTJS + MATERIA UI + TypeScript

Você está usando este iniciante? Adicione sua página (e repositório) ao final da lista por meio de uma solicitação de tração. ?

Pacote de expansão?

Este motor de partida agora está equipado com um pacote de expansão.

Você pode adicionar facilmente expansão, como o react gancho de componentes + componentes, livro de histórias e muito mais apenas usando uma única linha de comando.

CleanShot.2021-12-04.at.18.54.07-trimd.mp4

Confira o repositório de pacote de expansão para os comandos

Atualização do roteador de aplicativos

Devido à atualização do roteador de aplicativos, o pacote de expansão está atualmente desatualizado . Será atualizado no futuro. Você ainda pode usá -los por copiar e colar os arquivos.