Next.js Expert Skill für OpenClaw

OpenClaw Next.js Expert Skill Übersicht

Der Next.js Expert Skill verleiht Ihrem OpenClaw-Agenten tiefgehendes Wissen über das Next.js-Framework — einschließlich App Router, React Server Components, Server Actions, Middleware, Caching-Strategien und Produktions-Deployment-Muster. Anstatt Dokumentation oder Stack Overflow zu durchsuchen, fragen Sie OpenClaw direkt und erhalten präzise, aktuelle Anleitungen, die auf Ihr Projekt zugeschnitten sind.

Dieser Skill ist ideal für Entwickler, die moderne Full-Stack-React-Anwendungen mit Next.js 13+ erstellen. Ob Sie vom Pages Router migrieren, komplexe Datenabrufmuster implementieren oder Ihre Anwendung für optimale Leistung optimieren — der OpenClaw Next.js Expert Skill liefert kontextbezogene Antworten, die auf aktuellen Best Practices basieren.

Typischer Arbeitsablauf:

1. Stellen Sie OpenClaw eine Frage zur Next.js-Architektur oder beschreiben Sie ein Problem, mit dem Sie konfrontiert sind.
2. Der Agent analysiert Ihre Frage anhand seines Wissens über Next.js-Konventionen und -Muster.
3. Sie erhalten eine detaillierte Erklärung mit Codebeispielen, Empfehlungen zur Dateistruktur und Links zur relevanten Next.js-Dokumentation — ohne Tab-Wechsel.

Voraussetzungen für den Next.js Expert Skill

Stellen Sie vor der Installation des Next.js Expert Skills sicher, dass Sie Folgendes haben:

• OpenClaw installiert und laufend (v1.0+)
• Node.js 18.17+ installiert — Node.js herunterladen
• Ein Next.js-Projekt (13+ empfohlen für App Router-Funktionen)
• clawhub CLI installiert für die Skill-Verwaltung

Überprüfen Sie Ihre Einrichtung:

# OpenClaw-Version prüfen
openclaw --version

# Node.js-Version prüfen
node --version

# Prüfen, ob ein Next.js-Projekt vorhanden ist
npx next --version

So Installieren Sie den Next.js Expert Skill

Installieren Sie den Next.js Expert Skill mit einem einzigen Befehl:

npx clawhub@latest install nextjs-expert

Um die Installation zu überprüfen:

clawhub list

Sie sollten nextjs-expert in der Liste der installierten Skills sehen. Sie können den Skill auch vor der Installation mit clawhub inspect nextjs-expert untersuchen.

Next.js Expert Skill Konfiguration

Der Next.js Expert Skill ist ein wissensbasierter Skill, der keine API-Schlüssel oder externe Dienstauthentifizierung erfordert. Er funktioniert sofort nach der Installation.

Optionaler Projektkontext

Für die besten Ergebnisse stellen Sie sicher, dass Ihr OpenClaw-Agent Zugriff auf Ihr Projektverzeichnis hat. Der Skill kann Ihren bestehenden Code analysieren, um gezieltere Ratschläge zu geben:

# Zum Stammverzeichnis Ihres Next.js-Projekts navigieren
cd /path/to/your-nextjs-app

# OpenClaw im Projektverzeichnis starten
openclaw

Wenn OpenClaw Zugriff auf Ihre next.config.js, tsconfig.json und die app/-Verzeichnisstruktur hat, kann der Next.js Expert Skill Empfehlungen geben, die zu Ihrem spezifischen Setup passen — einschließlich Ihrer Routing-Struktur, Middleware-Konfiguration und installierten Pakete.

Aktuell bleiben

Der Skill deckt Next.js 13 bis zu den neuesten Versionen ab. Um sicherzustellen, dass Sie die aktuellste Anleitung haben:

# Den Skill auf die neueste Version aktualisieren
npx clawhub@latest install nextjs-expert

Next.js Expert Skill Anwendungsbeispiele

1. Entscheidungen zur App Router-Architektur

Du: "Soll ich ein Layout oder ein Template für meinen Dashboard-Bereich verwenden? Ich möchte, dass die Seitenleiste bestehen bleibt, aber der Hauptinhalt bei der Navigation neu gerendert wird."

Der Agent erklärt den Unterschied zwischen layout.tsx (bleibt bei Navigationen bestehen, behält den Zustand bei) und template.tsx (wird bei jeder Navigation neu erstellt) und empfiehlt dann die Verwendung eines Layouts für die Seitenleiste. Er bestätigt, dass der Hauptinhaltsbereich automatisch neu gerendert wird, da jede Seite ein separates Routensegment ist.

2. Datenabrufstrategie

Du: "Ich muss Produktdaten abrufen, die alle 5 Minuten aktualisiert werden. Was ist der beste Ansatz im App Router?"

Der Agent empfiehlt die Verwendung von fetch mit zeitbasierter Revalidierung in einer Server Component und liefert ein vollständiges Beispiel:

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 300 } // Alle 5 Minuten revalidieren
  });
  return res.json();
}

Er erklärt auch, wann revalidatePath oder revalidateTag für die On-Demand-Revalidierung über Server Actions verwendet werden sollten.

3. Server Components vs. Client Components

Du: "Ich habe eine Produktseite mit einer statischen Beschreibung und einem interaktiven 'In den Warenkorb'-Button. Wie sollte ich die Komponenten aufteilen?"

Der Agent empfiehlt, die Produktseite als Server Component für SEO und Leistung beizubehalten und nur den AddToCartButton als Client Component mit 'use client' auszulagern. Er erklärt die Vorteile: Das HTML der Produktbeschreibung wird auf dem Server ohne clientseitiges JavaScript gerendert, während der interaktive Button unabhängig hydriert wird.

4. Middleware und Authentifizierung

Du: "Wie schütze ich alle Routen unter /dashboard mit Authentifizierungs-Middleware?"

Der Agent liefert eine Middleware-Implementierung mit matcher-Konfiguration, zeigt, wie Sitzungstokens überprüft werden, und erklärt das Weiterleitungsmuster. Er weist auch darauf hin, dass Middleware am Edge ausgeführt wird und keine Node.js-APIs wie fs verwenden kann, und empfiehlt die Integrationsmuster von NextAuth.js oder Clerk für die Produktionsauthentifizierung.

Sicherheit und Best Practices

Befolgen Sie diese Richtlinien beim Erstellen von Next.js-Anwendungen mit KI-Unterstützung:

• Überprüfen Sie generierten Code sorgfältig. Lesen und verstehen Sie Codevorschläge immer, bevor Sie sie zu Ihrem Projekt hinzufügen. Der Skill bietet Anleitungen, keinen garantiert produktionsreifen Code.
• Validieren Sie Server Actions-Eingaben. Wenn der Skill Server Actions für die Formularverarbeitung vorschlägt, stellen Sie sicher, dass Sie eine ordnungsgemäße Eingabevalidierung und Autorisierungsprüfungen hinzufügen — der Agent wird Sie daran erinnern, aber überprüfen Sie es immer.
• Halten Sie sensible Daten serverseitig. Geben Sie niemals API-Schlüssel, Datenbankzugangsdaten oder Geheimnisse in Client Components preis. Verwenden Sie Umgebungsvariablen mit dem Präfix NEXT_PUBLIC_ nur für wirklich öffentliche Werte.
• Verwenden Sie TypeScript für Typsicherheit. Der Skill liefert standardmäßig TypeScript-Beispiele. Nutzen Sie die Typprüfung, um Fehler frühzeitig zu erkennen, insbesondere bei komplexen Datenabrufmustern.
• Befolgen Sie das Prinzip der geringsten Berechtigung. Wenn der Skill API-Route-Handler oder Middleware-Muster vorschlägt, stellen Sie sicher, dass diese nur die minimal erforderlichen Daten und Zugriffe bereitstellen.

Fehlerbehebung Häufiger Probleme

"You're importing a component that needs useState. It only works in a Client Component."

Sie verwenden einen React Hook (useState, useEffect, useContext usw.) in einer Server Component. Fügen Sie die 'use client'-Direktive am Anfang der Datei hinzu, oder lagern Sie den interaktiven Teil in eine separate Client Component aus.

// Diese Zeile ganz oben in die Datei einfügen
'use client';

import { useState } from 'react';

"Error: Dynamic server usage: Route /api/... couldn't be rendered statically"

Eine Route verwendet dynamische Funktionen (Cookies, Header, searchParams), aber Next.js versucht, sie statisch zu generieren. Fügen Sie entweder export const dynamic = 'force-dynamic' zur Route hinzu, oder strukturieren Sie um, um dynamische APIs in statisch renderbaren Seiten zu vermeiden.

// Dynamisches Rendering für diese Route erzwingen
export const dynamic = 'force-dynamic';

"Module not found: Can't resolve 'fs' in middleware"

Sie versuchen, ein Node.js-only-Modul in Middleware oder einer Edge-Route zu verwenden. Middleware wird in der Edge Runtime ausgeführt, die fs, path oder andere Node.js-Standardmodule nicht unterstützt. Verschieben Sie die Dateisystem-Logik in eine API-Route mit export const runtime = 'nodejs'.