Next.js Template mit TanStack

Ein modernes, sicheres Next.js Template mit TanStack-Bibliotheken, TypeScript und sicheren Coding-Praktiken.

🚀 Features

TanStack Integration

TanStack Query: Datenabfrage, Caching und Synchronisation
TanStack Form: Typsichere Formular-Validierung mit Zod
TanStack Table: Leistungsstarke Datentabellen mit Sortierung und Paginierung

Sicherheit & Best Practices

TypeScript Strict Mode: Vollständige Typisierung mit strengen Konfigurationen
Zod Schema Validation: Runtime-Validierung aller Eingaben
Content Security Policy: Schutz vor XSS und Code-Injection
Security Headers: Umfassende Sicherheitsheader
ESLint Security Plugin: Automatische Erkennung von Sicherheitslücken

Development Experience

Prettier: Automatische Code-Formatierung
ESLint: Strenge Linting-Regeln
TypeScript: Modernste TypeScript-Konfiguration
Tailwind CSS: Utility-first CSS Framework
shadcn/ui: Hochwertige UI-Komponenten

📦 Installation

# Repository klonen
git clone <repository-url>
cd nextjs-template

# Abhängigkeiten installieren
npm install

# Development Server starten
npm run dev

🛠️ Scripts

npm run dev        # Development Server mit Turbopack
npm run build      # Production Build
npm run start      # Production Server
npm run lint       # ESLint ausführen
npm run typecheck  # TypeScript Check
npm run format     # Code formatieren

🏗️ Projektstruktur

src/
├── app/                 # Next.js App Router
│   ├── api/            # API Routes
│   ├── globals.css     # Globale Styles
│   ├── layout.tsx      # Root Layout
│   ├── page.tsx        # Homepage
│   └── providers.tsx   # React Context Providers
├── components/
│   ├── examples/       # Beispiel-Komponenten
│   ├── providers/      # Provider-Komponenten
│   ├── ui/            # shadcn/ui Komponenten
│   └── core/          # Core-Komponenten
├── hooks/             # Custom React Hooks
├── lib/               # Utilities und Konfiguration
│   ├── constants.ts   # App-Konstanten
│   ├── schemas.ts     # Zod Schemas
│   └── utils.ts       # Utility Functions

🔒 Sicherheits-Features

TypeScript Konfiguration

strict: true
noImplicitAny: true
noUncheckedIndexedAccess: true
exactOptionalPropertyTypes: true

Content Security Policy

Strict CSP mit Nonce-based Script Loading
Blockierung von unsafe-inline und unsafe-eval
Schutz vor XSS-Angriffen

Security Headers

X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Strict-Transport-Security

Zod Schema Validation

// Beispiel Schema
const userSchema = z.object({
  id: z.string().min(1),
  name: z.string().min(2).max(50),
  email: z.string().email(),
});

📚 TanStack Beispiele

TanStack Query

// Custom Hook für Benutzer
export function useUsers() {
  return useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
    staleTime: 5 * 60 * 1000,
  });
}

TanStack Form

// Formular mit Zod Validation
const form = useForm({
  defaultValues: { name: "", email: "" },
  validatorAdapter: zodValidator,
  onSubmit: async ({ value }) => {
    // Submit Logic
  },
});

TanStack Table

// Sortierbare Tabelle
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
});

🎨 Styling

Das Template verwendet Tailwind CSS mit einem angepassten Design-System:

Theme-Konfiguration

Dark/Light Mode Support
Responsive Design
Accessibility-optimierte Farben
Custom CSS Variables

shadcn/ui Komponenten

Button, Card, Input, Textarea
Form-Komponenten
Layout-Komponenten

🧪 API-Beispiele

Sichere API Routes

// /api/users/route.ts
export async function GET(request: NextRequest) {
  try {
    const validatedData = userSchema.array().parse(data);
    return NextResponse.json(validatedData);
  } catch (error) {
    return NextResponse.json(
      { error: "Validation Error" },
      { status: 400 }
    );
  }
}

🔧 Konfiguration

Environment Variables

NODE_ENV=development
NEXT_PUBLIC_APP_URL=http://localhost:3000

VS Code Extensions (Empfohlen)

TypeScript Importer
ESLint
Prettier
Tailwind CSS IntelliSense
Error Lens

🚀 Deployment

Vercel (Empfohlen)

npm run build
vercel --prod

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

📝 Lizenz

MIT License - siehe LICENSE für Details.

🤝 Beitragen

Fork das Repository
Erstelle einen Feature Branch (git checkout -b feature/amazing-feature)
Committe deine Änderungen (git commit -m 'Add amazing feature')
Push zum Branch (git push origin feature/amazing-feature)
Öffne eine Pull Request

📞 Support

Bei Fragen oder Problemen öffne bitte ein Issue im Repository.

Gebaut mit ❤️ und modernsten Web-Technologien

FilesExpand file tree

README.md

Latest commit

History