Kapitel 9: Styling-Lösungen

📖 Lernziele

In diesem Kapitel lernen Sie:

✅ Globale CSS und Modul-CSS verwenden
✅ CSS-Module einsetzen (empfohlen)
✅ CSS-Präprozessoren (SCSS, Less) konfigurieren
✅ Tailwind CSS integrieren (sehr beliebt)
✅ UI-Bibliotheken (Ant Design, Material UI) verwenden
✅ Styled Components mit Next.js kombinieren

9.1 Grundlegendes Styling

🎯 Globales CSS

Datei: app/globals.css

css

/* Globale Stile */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1 {
  color: #333;
}

Verwendung in app/layout.js:

jsx

import './globals.css'; // ⚠️ Muss in layout.js importiert werden!

export default function RootLayout({ children }) {
  return (
    <html lang="de">
      <body>{children}</body>
    </html>
  );
}

🎯 Inline-Styles

jsx

export default function HomePage() {
  return (
    <div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
      <h1 style={{ color: 'blue' }}>Titel</h1>
    </div>
  );
}

Nachteil: Kein CSS-Hover, Media-Queries oder Pseudo-Selektoren.

9.2 CSS-Module (Empfohlen)

🎯 Was sind CSS-Module?

CSS-Module kapseln CSS pro Komponente (keine Namenskonflikte!).

📝 Beispiel: CSS-Modul erstellen

Datei: components/Button.module.css

css

/* Automatische Namensgenerierung: Button_button__abc123 */
.button {
  background: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background: darkblue;
}

.danger {
  background: red;
}

📝 Verwendung in Komponente

Datei: components/Button.js

jsx

import styles from './Button.module.css';

export default function Button({ children, variant = 'primary' }) {
  return (
    <button 
      className={`${styles.button} ${variant === 'danger' ? styles.danger : ''}`}
    >
      {children}
    </button>
  );
}

✅ Vorteile von CSS-Modulen

Vorteil	Erklärung
Keine Konflikte	Klassennamen werden eindeutig generiert
Lokal begrenzt	Stile wirken nur auf eigene Komponente
Einfach	Keine zusätzliche Konfiguration nötig

9.3 CSS-Präprozessoren (SCSS, Less)

🎯 SCSS konfigurieren

Installation:

bash

pnpm add -D sass

Verwendung: Einfach .scss oder .sass Dateien erstellen!

Datei: components/Card.scss

scss

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  
  .title {
    font-size: 1.5rem;
    color: #333;
  }
  
  .content {
    margin-top: 10px;
  }
}

Komponente:

jsx

import styles from './Card.scss';

export default function Card() {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>Titel</h2>
      <p className={styles.content}>Inhalt...</p>
    </div>
  );
}

🎯 Less konfigurieren

Installation:

bash

pnpm add -D less

Next.js Config (next.config.js):

javascript

const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader',
      ],
    });
    return config;
  },
};

module.exports = nextConfig;

9.4 Tailwind CSS (Sehr beliebt!)

🎯 Tailwind CSS installieren

Schritt 1: Installation

bash

pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Schritt 2: tailwind.config.js konfigurieren

javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Schritt 3: app/globals.css erstellen

css

@tailwind base;
@tailwind components;
@tailwind utilities;

📝 Tailwind verwenden

jsx

export default function HomePage() {
  return (
    <main className="p-8 max-w-4xl mx-auto">
      <h1 className="text-4xl font-bold text-blue-600 mb-4">
        Willkommen bei Next.js
      </h1>
      <p className="text-gray-700 mb-6">
        Dies ist eine mit Tailwind gestylte Seite.
      </p>
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Klick mich
      </button>
    </main>
  );
}

✅ Tailwind Vorteile

⚡ Schnelle Entwicklung (kein CSS-Datei-Wechsel)
🎨 Responsive Design einfach (md:, lg: Präfixe)
📦 Kleine Bundle-Größe (nur verwendete Klassen)

9.5 UI-Bibliotheken integrieren

🎯 Ant Design (antd)

Installation:

bash

pnpm add antd

Verwendung:

jsx

import { Button, DatePicker, Card } from 'antd';

export default function HomePage() {
  return (
    <Card title="Ant Design Beispiel">
      <Button type="primary">Primary Button</Button>
      <DatePicker style={{ marginTop: 16 }} />
    </Card>
  );
}

🎯 Material UI (MUI)

Installation:

bash

pnpm add @mui/material @emotion/react @emotion/styled

Verwendung:

jsx

import { Button, Card, CardContent, Typography } from '@mui/material';

export default function HomePage() {
  return (
    <Card>
      <CardContent>
        <Typography variant="h5">Material UI</Typography>
        <Button variant="contained" color="primary">
          Klick
        </Button>
      </CardContent>
    </Card>
  );
}

9.6 Styled Components

🎯 Installation & Konfiguration

Installation:

bash

pnpm add styled-components

Next.js Config (next.config.js):

javascript

const nextConfig = {
  compiler: {
    styledComponents: true, // Styled Components aktivieren
  },
};

module.exports = nextConfig;

📝 Verwendung

Komponente:

jsx

import styled from 'styled-components';

const Container = styled.div`
  padding: 20px;
  background: #f5f5f5;
`;

const Title = styled.h1`
  color: ${props => props.primary ? 'blue' : 'black'};
  font-size: 2rem;
`;

export default function HomePage() {
  return (
    <Container>
      <Title primary>Gestylter Titel</Title>
    </Container>
  );
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

Methode	Empfehlung	Besonderheit
CSS-Module	✅ Empfohlen	Keine Namenskonflikte
Tailwind CSS	⭐ Sehr beliebt	Schnelle Entwicklung
SCSS/Less	⭐ Fortgeschrittene	Nesting, Variablen
UI-Bibliotheken	✅ Für Enterprise	Fertige Komponenten
Styled Components	⭐ CSS-in-JS	Dynamische Stile

✅ Nächste Schritte

✅ Übung: Erstellen Sie eine Seite mit Tailwind CSS
✅ Übung: Verwenden Sie CSS-Module für eine Komponente
✅ Weiter geht's: Kapitel 10 - API-Routen entwickeln

🎯 Selbsttest

Frage 1: Was ist der Vorteil von CSS-Modulen?

Antwort anzeigen

Keine Namenskonflikte, da Klassennamen eindeutig generiert werden.

Frage 2: Wie aktiviert man Tailwind CSS in Next.js?

Antwort anzeigen

Installieren Sie `tailwindcss`, konfigurieren Sie `tailwind.config.js`, und importieren Sie die Direktiven in `globals.css`.

Frage 3: Welche UI-Bibliothek ist für Enterprise-Projekte beliebt?

Antwort anzeigen

Ant Design (antd) oder Material UI (MUI).

🚀 Weiter zu Kapitel 10: API-Routen entwickeln

Kapitel 9: Styling-Lösungen ​

📖 Lernziele ​

9.1 Grundlegendes Styling ​

🎯 Globales CSS ​

🎯 Inline-Styles ​

9.2 CSS-Module (Empfohlen) ​

🎯 Was sind CSS-Module? ​

📝 Beispiel: CSS-Modul erstellen ​

📝 Verwendung in Komponente ​

✅ Vorteile von CSS-Modulen ​

9.3 CSS-Präprozessoren (SCSS, Less) ​

🎯 SCSS konfigurieren ​

🎯 Less konfigurieren ​

9.4 Tailwind CSS (Sehr beliebt!) ​

🎯 Tailwind CSS installieren ​

📝 Tailwind verwenden ​

✅ Tailwind Vorteile ​

9.5 UI-Bibliotheken integrieren ​

🎯 Ant Design (antd) ​

🎯 Material UI (MUI) ​

9.6 Styled Components ​

🎯 Installation & Konfiguration ​

📝 Verwendung ​

📝 Zusammenfassung ​

✅ Nächste Schritte ​

🎯 Selbsttest ​

Kapitel 9: Styling-Lösungen

📖 Lernziele

9.1 Grundlegendes Styling

🎯 Globales CSS

🎯 Inline-Styles

9.2 CSS-Module (Empfohlen)

🎯 Was sind CSS-Module?

📝 Beispiel: CSS-Modul erstellen

📝 Verwendung in Komponente

✅ Vorteile von CSS-Modulen

9.3 CSS-Präprozessoren (SCSS, Less)

🎯 SCSS konfigurieren

🎯 Less konfigurieren

9.4 Tailwind CSS (Sehr beliebt!)

🎯 Tailwind CSS installieren

📝 Tailwind verwenden

✅ Tailwind Vorteile

9.5 UI-Bibliotheken integrieren

🎯 Ant Design (antd)

🎯 Material UI (MUI)

9.6 Styled Components

🎯 Installation & Konfiguration

📝 Verwendung

📝 Zusammenfassung

✅ Nächste Schritte

🎯 Selbsttest