next kickstart

nächstes Kickstart

Feature Packed Next.js Boilerplate. Null -Setup. Rand bereit.

Einige Funktionen hängen von Umgebungsvariablen ab (in der Merkmalsliste mit) und müssen daher aktiviert werden. Sie sind standardmäßig deaktiviert, so dass die App ohne Setup ausgeführt wird. Sie können aktiviert werden, indem alle Zeilen unter @enable {feature} erscheint werden.

Merkmale

Zeigen Sie die Repository -Zweige für andere Funktionssätze an (z. B. Bun)

Kern

• TypeScript - Konfiguriert, um die Type der Type zu maximieren
• T3 Env - Umgebungsvariable Validierung
• TRPC -Erstellen Sie End-to-End-APIs-Safe-APIs, die sowohl in Client- als auch in Serverkomponenten funktionieren
• ⚡ WebSockets - Echtzeitkommunikation (mit Pusher, kann aber gegen Alternativen ausgetauscht werden)
  • ? Integriert sich in TRPC für End-to-End-Typ-Safe-Ereignisse
• ? Nieselregen - orm mit maximaler Art Sicherheit
• Lucia Auth - Flexible und sichere Authentifizierung
  • ? Integriert sich in Nieselregen, um Auth -Daten zu speichern

Entwicklung

• ? Eslint - konsistente Codestandards
• Schöner - konsistenteres Code -Styling
• ? Rückenwind -CSS - Utility -First CSS -Framework
• ? Shadcn/UI - Komponenten, die mit Radix UI und Rückenwind CSS erstellt wurden
• MDX - Markdown mit Komponenten verwenden
• ? Absolute Importe - einfachere und sauberere Modulimporte
• VS -Codekonfigurationen - Konfigurationen für einfaches Debuggen

Testen

• ? Vitest - Flexibler Testgerüst
• ? Reagieren Sie die Testbibliothek - Tests für Wartbare Komponenten
  • ? Integriert sich in Vitest als Ihr Test -Framework
• ? Dramatiker -End-to-End-Tests gegen mehrere Umgebungen

Einsatz

• Bündelanalysator - Analysieren Sie die Bündelgrößen in jeder Umgebung mit pnpm run build:analyze
• ? NEXT -PWA - Machen Sie Ihre Website als progressive Web -App (PWA)
• ? Docker - (lokale und produktion) Docker -Compose und Dockerfiles für das Laufen überall
• GitHub -Aktionen - robuster CI/CD

? Erste Schritte

Option 1: Klon und mit Vercel bereitgestellt

? Option 2: Klonen und lokal ausführen

1. Fork dieses Repository (Deaktivieren Sie die main nur wenn Sie an anderen Filialen / Feature -Sets interessiert sind)
2. Klonen Sie Ihr neues Repository
3. Installieren Sie Abhängigkeiten und führen Sie den Entwicklungsserver aus

• mit PNPM

  pnpm install
  pnpm run dev

• oder mit Docker

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

Konfiguration

Docker

• .dockerignore
• docker/ - Dockerfile und Docker -compose.yml für Entwicklung und Produktion

Nieselregen

(Erforderlich aktiviert)

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

Eslint

• .eslintrc.json

Github -Aktionen

• .github/workflows/ci.yml - Typ -Prüfung und -Lination (daher werden diese Fehler in next.config.mjs ignoriert)

Lucia Auth

(Erforderlich aktiviert)

• src/app/api/auth
• src/app/auth
• src/components/auth.tsx
• src/db/schemas/auth.ts) Auth -Daten in der Datenbank speichern
• src/lib/auth.ts
• types/lucia.d.ts

Beispiele

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

MDX

• mdx-components.tsx

NEXT-PWA

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

Dramatiker

• e2e/
• playwright.config.ts

Hübscher

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

Reagieren Sie die Testbibliothek

• 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 - Umgebungsvariablen konfigurieren
• next.config.mjs - Umgebungsvariablen werden zur Build -Time validiert

Rückenwind -CSS

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

TRPC

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

Beispiele

• src/app/examples/client-component/page.tsx - Verwenden Sie in einer Client -Komponente
• src/app/examples/server-component/page.tsx - Verwenden Sie in einer Serverkomponente

Typoskript

• tsconfig.json -Alle Modifikationen aus erstellen-next-Apps werden mit Kommentaren erklärt
• types/reset.d.ts -Verwenden von TS-Re-Reset, um die Typ-Safety zu erhöhen

Vitest

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

Vs Code

• .vscode/extensions.json - Empfohlene Arbeitsbereicherweiterungen
• .vscode/launch.json - DEBUG -Konfigurationen
• .vscode/settings.json - Verwenden Sie die Projekttypecript -Version

Websockets mit Pusher

(Erforderlich aktiviert)

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

Beispiele

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