next kickstart

Kickstart suivant

Fonctionnalité emballée Next.js. Configuration zéro. Edge prêt.

Certaines fonctionnalités dépendent des variables d'environnement (indiquées dans la liste des fonctionnalités avec) et nécessitent donc l'activation. Ils sont désactivés par défaut afin que l'application s'exécute sans aucune configuration. Ils peuvent être activés en démontant toutes les lignes sous où @enable {feature} apparaît.

Caractéristiques

Afficher les branches du référentiel pour d'autres ensembles de fonctionnalités (par exemple BUN)

Cœur

• TypeScript - configuré pour maximiser la sécurité du type
• T3 Env - Validation variable de l'environnement
• TRPC - Créez des API de type de bout en bout qui fonctionnent à la fois dans les composants du client et du serveur
• ⚡ WebSockets - Communication en temps réel (à l'aide de Pusher, mais peut être échangé pour des alternatives)
  • ? s'intègre à TRPC pour les événements de type type de type
• ? Arrosage - Orm avec une sécurité de type maximal
• Lucia Auth - Authentification flexible et sécurisée
  • ? s'intègre à la bruine pour stocker les données AUTH

Développement

• ? Eslint - Normes de code cohérentes
• Plus joli - style de code cohérent
• ? Tailwind CSS - Utilitaire-First CSS Framework
• ? shadcn / ui - Composants construits avec Radix UI et CSS à vent arrière
• MDX - Utilisez Markdown avec des composants
• ? Importations absolues - Imports de modules plus faciles et plus propres
• VS Code Configurations - Configurations pour un débogage facile

Essai

• ? Framework de tests flexibles VITE
• ? React Testing Library - Test des composants maintenables
  • ? s'intègre à Virest comme votre cadre de test
• ? Playwright - tests de bout en bout dans plusieurs environnements

Déploiement

• Bundle Analyzer - Analyser les tailles de faisceau dans chaque environnement avec pnpm run build:analyze
• ? Next-PWA - Faites votre site Web en tant qu'application Web progressive (PWA)
• ? Docker - (local et production) docker-compose et dockerfiles pour courir n'importe où
• Actions GitHub - CI / CD robuste

? Commencer

Option 1: cloner et déployer avec Vercel

? Option 2: clone et exécuter localement

1. Fork ce référentiel (décochez 'Copier la branche main uniquement «Si vous êtes intéressé par d'autres branches / ensembles de fonctionnalités)
2. Clone votre nouveau référentiel
3. Installez les dépendances et exécutez le serveur de développement

• avec PNPM

  pnpm install
  pnpm run dev

• ou avec Docker

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

Configuration

Docker

• .dockerignore
• docker/ - dockerfile et docker-compose.yml pour le développement et la production

Bruine

(nécessite l'activation)

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

Eslint

• .eslintrc.json

Actions github

• .github/workflows/ci.yml - Type-Checking and Linting (par conséquent, ces erreurs sont ignorées dans next.config.mjs )

Lucia Auth

(nécessite l'activation)

• src/app/api/auth
• src/app/auth
• src/components/auth.tsx
• src/db/schemas/auth.ts) stocker les données Auth dans la base de données
• src/lib/auth.ts
• types/lucia.d.ts

Exemples

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

Mdx

• mdx-components.tsx

pwa suivant

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

Dramaturge

• e2e/
• playwright.config.ts

Plus joli

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

Bibliothèque de tests React

• 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 - Configurer les variables d'environnement
• next.config.mjs - Les variables d'environnement sont validées au moment de la construction

CSS du vent arrière

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

trpc

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

Exemples

• src/app/examples/client-component/page.tsx - Utiliser dans un composant client
• src/app/examples/server-component/page.tsx - Utiliser dans un composant de serveur

Manuscrit

• tsconfig.json - Toutes les modifications de Create-next-App sont expliquées avec des commentaires
• types/reset.d.ts - Utilisation de TS-Réinitialisation pour augmenter la sécurité de type

Le plus vide

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

VS Code

• .vscode/extensions.json - Extensions d'espace de travail recommandées
• .vscode/launch.json - Configurations de débogage
• .vscode/settings.json - Utilisez le projet TypeScript version

Websockets avec poussoir

(nécessite l'activation)

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

Exemples

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