next kickstart

Próximo Kickstart

Recurso embalado Next.js Boilerplate. Zero configuração. Borda pronta.

Alguns recursos dependem das variáveis de ambiente (indicadas na lista de recursos com) e, portanto, requerem a habilitação. Eles são desativados por padrão para que o aplicativo seja executado sem nenhuma configuração. Eles podem ser ativados por descomentar todas as linhas em Where @enable {feature} aparece.

Características

Veja as filiais do repositório para outros conjuntos de recursos (por exemplo, BUN)

Essencial

• TypeScript - configurado para maximizar a segurança do tipo
• T3 Env - Validação da variável de ambiente
• TRPC -Crie APIs de ponta a ponta com segurança que funcionam nos componentes do cliente e do servidor
• ⚡ WebSockets - Comunicação em tempo real (usando Pusher, mas pode ser trocada por alternativas)
  • ? integra-se ao TRPC para eventos de ponta a ponta segura
• ? Regar - orm com segurança máxima
• Lucia Auth - autenticação flexível e segura
  • ? integra -se com a garoa para armazenar dados de autenticação

Desenvolvimento

• ? Eslint - padrões de código consistentes
• Mais bonito - estilo de código consistente
• ? Tailwind CSS - Utility -primeiro CSS Framework
• ? shadcn/ui - componentes construídos com a interface do usuário do Radix e o Tailwind CSS
• MDX - Use Markdown com componentes
• ? Importações absolutas - importações de módulos mais fáceis e mais limpas
• VS Configurações de código - Configurações para facilitar a depuração

Teste

• ? Vitest - estrutura de teste flexível
• ? React Testing Library - Teste de componente sustentável
  • ? integra -se ao Vitest como sua estrutura de teste
• ? Dramaturgo -testes de ponta a ponta em vários ambientes

Implantação

• Analisador de pacote - Analise os tamanhos dos pacote em cada ambiente com pnpm run build:analyze
• ? Next -PWA - faça seu site como um aplicativo da Web Progressive (PWA)
• ? Docker - (Local e Produção) Docker -Compose e Dockerfiles para correr em qualquer lugar
• Ações do GitHub - CI/CD robusto

? Começando

Opção 1: clonar e implantar com vercel

? Opção 2: clonar e executar localmente

1. FILHE este repositório (desmarque 'Copie apenas a filial main se você estiver interessado em outras filiais / conjuntos de recursos)
2. Clone seu novo repositório
3. Instale dependências e execute o servidor de desenvolvimento

• com pnpm

  pnpm install
  pnpm run dev

• ou com Docker

  docker-compose --file docker/dev/docker-compose.yml up

Configuração

Docker

• .dockerignore
• docker/ - Dockerfile e Docker-comppose.yml para desenvolvimento e produção

Regue

(requer habilitação)

• src/db/
• src/lib/db.ts
• drizzle.config.ts

Eslint

• .eslintrc.json

Ações do GitHub

• .github/workflows/ci.yml - Verificação e linhagem de tipo (portanto, esses erros são ignorados no next.config.mjs )

Lucia Auth

(requer habilitação)

• src/app/api/auth
• src/app/auth
• src/components/auth.tsx
• src/db/schemas/auth.ts) armazenar dados de autenticação no banco de dados
• src/lib/auth.ts
• types/lucia.d.ts

Exemplos

• src/app/examples/profile/page.tsx

Mdx

• mdx-components.tsx

Próximo-PWA

• public/icon-512x512.png
• public/manifest.json
• next.config.mjs

Dramaturgo

• e2e/
• playwright.config.ts

Mais bonito

• .eslintrc.json
• .prettierignore
• .prettierrc.json

React Testing Library

• src/app/page.test.tsx
• testing/setup.ts

shadcn/ui

• src/components/providers/theme-provider.tsx
• src/components/ui/
• src/components/theme-toggle.tsx
• components.json

T3 Env

• src/env.mjs - Configurar variáveis de ambiente
• next.config.mjs - As variáveis de ambiente são validadas no momento da construção

Tailwind CSS

• src/styles/globals.css
• tailwind.config.js

TRPC

• src/app/api/trpc/[trpc]/route.ts
• src/components/providers/trpc-provider.tsx
• src/trpc/

Exemplos

• src/app/examples/client-component/page.tsx - Use em um componente cliente
• src/app/examples/server-component/page.tsx - Use em um componente de servidor

TypeScript

• tsconfig.json -Todas
• types/reset.d.ts -Usando-se-reset para aumentar a segurança do tipo

Vitest

• testing/setup.ts
• vitest.config.ts

Vs código

• .vscode/extensions.json - Extensões de espaço de trabalho recomendadas
• .vscode/launch.json - Configurações de depuração
• .vscode/settings.json - Use o projeto TypeScript versão

Websockets com empurrador

(requer habilitação)

• src/hooks/useEvent.ts
• src/lib/events.ts
• src/trpc/methods.ts

Exemplos

• src/app/examples/websockets/page.tsx