next kickstart

Siguiente patada

Característica Empacada Next.js Boilerplate. Configuración cero. Borde listo.

Algunas características dependen de las variables de entorno (indicadas en la lista de características con) y, por lo tanto, requieren habilitar. Están deshabilitados de forma predeterminada para que la aplicación se ejecute sin ninguna configuración. Se pueden habilitar sin comentarse todas las líneas en donde aparece @enable {feature} .

Características

Vea las ramas del repositorio para otros conjuntos de características (por ejemplo, BUN)

Centro

• TypeScript : configurado para maximizar el tipo de seguridad
• T3 Env - Validación variable de entorno
• TRPC : cree API seguras de tipo de extremo a extremo que funcionen en los componentes del cliente y del servidor
• ⚡ WebSockets : comunicación en tiempo real (usando Pusher, pero se puede cambiar por alternativas)
  • ? Se integra con TRPC para eventos de tipo de extremo a extremo
• ? Llovizna - ORM con máxima seguridad de tipo
• Auth Lucia - Autenticación flexible y segura
  • ? Se integra con llovizna para almacenar datos de autores

Desarrollo

• ? Eslint : estándares de código consistentes
• Más bonito - estilo de código constante
• ? Tailwind CSS - Marco CSS de utilidad de utilidad
• ? Shadcn/UI - Componentes construidos con Radix UI y CSS de viento de cola
• MDX : use Markdown con componentes
• ? Importaciones absolutas : importaciones de módulos más fáciles y limpios
• VS Configuraciones de código : configuraciones para una fácil depuración

Pruebas

• ? Vitest - Marco de pruebas flexibles
• ? Biblioteca de prueba React : prueba de componentes mantenibles
  • ? Se integra con Vitest como marco de prueba
• ? Dramaturgo : pruebas de extremo a extremo en múltiples entornos

Despliegue

• Analizador de paquetes : analice los tamaños de paquete en cada entorno con pnpm run build:analyze
• ? Next -PWA : haga su sitio web como una aplicación web progresiva (PWA)
• ? Docker - (local y de producción) Docker -Compose y Dockerfiles para correr en cualquier lugar
• Acciones de Github - Robust CI/CD

? Empezando

Opción 1: clon e implementar con VERCEL

? Opción 2: clon y ejecutar localmente

1. Bifurca este repositorio (desmarque 'Copie solo la rama main si está interesado en otras ramas / conjuntos de características)
2. Clone su nuevo repositorio
3. Instalar dependencias y ejecutar el servidor de desarrollo

• con PNPM

  pnpm install
  pnpm run dev

• o con Docker

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

Configuración

Estibador

• .dockerignore
• docker/ - Dockerfile y Docker -Compose.yml para el desarrollo y la producción

Llovizna

(requiere habilitar)

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

Eslint

• .eslintrc.json

Acciones de Github

• .github/workflows/ci.yml - verificación de tipo y pelusa (por lo tanto, estos errores se ignoran en next.config.mjs )

Auth Lucia

(requiere habilitar)

• src/app/api/auth
• src/app/auth
• src/components/auth.tsx
• src/db/schemas/auth.ts) almacenar datos de autenticación en la base de datos
• src/lib/auth.ts
• types/lucia.d.ts

Ejemplos

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

MDX

• mdx-components.tsx

Next-PWA

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

Dramaturgo

• e2e/
• playwright.config.ts

Más bonito

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

Biblioteca de pruebas reaccionadas

• 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 variables de entorno
• next.config.mjs : las variables de entorno se validan a tiempo de compilación

CSS de viento de cola

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

TRPC

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

Ejemplos

• src/app/examples/client-component/page.tsx - use en un componente del cliente
• src/app/examples/server-component/page.tsx - use en un componente del servidor

Mecanografiado

• tsconfig.json -Todas las modificaciones de Create-Next-App se explican con comentarios
• types/reset.d.ts : usando TS-reset para aumentar la seguridad de tipo

Vitest

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

VS Código

• .vscode/extensions.json - Extensiones recomendadas del espacio de trabajo
• .vscode/launch.json - Configuraciones de depuración
• .vscode/settings.json : use la versión de typeScript del proyecto

WebSockets con empujador

(requiere habilitar)

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

Ejemplos

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