Erste Schritte mit Next.js und TypeScript

Next.js ist eines der beliebtesten Frameworks zum Erstellen von React-Anwendungen geworden. In Kombination mit TypeScript bietet es eine hervorragende Entwicklererfahrung durch Typsicherheit und moderne Werkzeuge.

Warum Next.js?

Next.js bietet von Haus aus mehrere wichtige Funktionen:

• Server-Side Rendering (SSR) – Verbesserte Performance und SEO
• Static Site Generation (SSG) – Seiten zur Build-Zeit vorerstellen
• API-Routen – Baue Backend und Frontend zusammen
• Dateibasierte Routing-Struktur – Intuitive Seitenstruktur
• Bildoptimierung – Automatische Optimierung von Bildern

Einrichten des Projekts

Um ein neues Next.js-Projekt mit TypeScript zu erstellen, führe Folgendes aus:

npx create-next-app@latest my-app --typescript
cd my-app
npm run dev

Dies erstellt eine neue Next.js-Anwendung mit TypeScript-Konfiguration und macht sie startklar.

Projektstruktur

Eine typische Projektstruktur für Next.js sieht folgendermaßen aus:

my-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── components/
├── public/
├── package.json
└── tsconfig.json

Vorteile von TypeScript

Die Verwendung von TypeScript mit Next.js bietet:

1. Typsicherheit – Fehler bereits zur Kompilierzeit erkennen
2. Bessere IDE-Unterstützung – Autovervollständigung und IntelliSense
3. Verbessertes Refactoring – Symbole sicher umbenennen
4. Dokumentation – Typen dienen als eingebaute Dokumentation

Erstellen deiner ersten Komponente

Hier ein einfaches, typisiertes Komponenten-Beispiel:

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

export const Button = ({ label, onClick, variant = 'primary' }: ButtonProps) => {
  return (
    <button 
      onClick={onClick}
      className={variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500'}
    >
      {label}
    </button>
  );
};

Fazit

Next.js und TypeScript zusammen bilden eine starke Grundlage für moderne Webanwendungen. Die Kombination bietet eine exzellente Entwicklererfahrung, Typsicherheit und gute Performance.

Viel Spaß beim Programmieren!