Product Logo
Tools & Services

Developer Mode einrichten

Wir richten gemeinsam ein eigenes Next.js-Projekt mit der Kern-UX-Theme-Bibliothek ein.

Was wir erreichen werden

Am Ende dieses Tutorials hast du ein eigenes Next.js-Projekt mit dem Kernux-Theme, das du lokal starten und frei anpassen kannst.

Voraussetzungen

  • Node.js und npm sind installiert

1. Next.js-Projekt erstellen

Wähle bei den Prompts folgende Einstellungen:

  • TypeScript: Yes
  • Linter: ESLint
  • React Compiler: No
  • Tailwind CSS: Yes
  • src/ directory: Yes
  • App Router: No
  • Import alias: No

2. Theme installieren

Wechsle in das Projektverzeichnis:

Installiere das Theme-Paket:

Tipp: Wenn du das Theme nicht von der offiziellen npm-Registry installieren möchtest, kannst du es auch aus der openCode Package Registry installieren. Führe dazu folgenden Befehl im Projektverzeichnis aus, um die Registry hinzuzufügen: echo "@document-writing-tools:registry=https://gitlab.opencode.de/api/v4/projects/2542/packages/npm/" >> .npmrc

3. Next.js-Konfiguration anpassen

Benenne next.config.ts in next.config.mjs um und ersetze den Inhalt:

4. Theme konfigurieren

Erstelle src/theme.config.tsx:

5. MDX-Komponenten registrieren

Erstelle src/mdx-components.tsx:

6. Document anpassen

Ersetze den Inhalt von src/pages/_document.tsx:

7. App-Wrapper einrichten

Ersetze den Inhalt von src/pages/_app.tsx:

8. CSS konfigurieren und Theme setzen

Ersetze den Inhalt von src/styles/globals.css:

9. Dev-Script anpassen

In der package.json muss das dev-Script den Webpack-Modus verwenden:

10. Startseite erstellen

Lösche src/pages/index.tsx und erstelle stattdessen src/pages/index.mdx:

11. Projekt starten

Deine Dokumentationsseite läuft jetzt unter http://localhost:3000.

Nächste Schritte