Blog

Nextra Docs nutzen und auf Vercel bereitstellen: Eine Schritt-für-Schritt Anleitung

Ashley Goolam

Ashley Goolam

12 June 2025

Nextra Docs nutzen und auf Vercel bereitstellen: Eine Schritt-für-Schritt Anleitung

Wenn Sie mühelos eine elegante, moderne Dokumentationswebsite erstellen möchten, ist Nextra Docs eines der besten verfügbaren Tools. Aufbauend auf Next.js ermöglicht Ihnen Nextra, Ihre Dokumentation in Markdown oder MDX zu schreiben, das Aussehen anzupassen und sie mühelos bereitzustellen – insbesondere auf Vercel. In diesem Artikel führen wir Sie Schritt für Schritt durch die Einrichtung einer Nextra Docs-Website von Grund auf und die kostenlose Bereitstellung auf Vercel.

💡
Möchten Sie ein großartiges API-Testtool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform für Ihr Entwicklerteam, um mit maximaler Produktivität zusammenzuarbeiten?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem deutlich günstigeren Preis!
button

Was sind Nextra Docs? Ihr bester Freund beim Erstellen von Dokumentationen

Nextra docs ist ein auf Next.js basierendes Framework, das das Erstellen von Dokumentationswebsites zum Kinderspiel macht. Es dreht sich alles um Markdown (oder MDX)-Inhalte mit einem vorgefertigten Docs Theme, das Navigation, Suche und ein Inhaltsverzeichnis sofort mitbringt. Hier sind die Gründe, warum nextra docs großartig ist:

Benutzer schwärmen von nextra docs wegen seiner "Zero-Config Polish" und Vercel-Bereitstellungen. Bereit, Ihre Website zu erstellen? Los geht's!

Warum Nextra Docs mit Vercel verwenden?

Nextra docs ist perfekt für Entwickler, Startups oder Open-Source-Projekte, die schnell professionelle Dokumentation benötigen. Die Kombination mit Vercel – der Heimat von Next.js – bedeutet:

Ich habe eine Testseite auf Vercel bereitgestellt, und sie war in weniger als 5 Minuten live – butterweich!

So richten Sie Nextra Docs ein: Schritt-für-Schritt-Anleitung

Erstellen wir eine nextra docs-Website von Grund auf mit dem App-Router von Next.js. Folgen Sie den Schritten, und Sie werden in etwa 20 Minuten eine lokale Website am Laufen haben!

1. Erstellen Sie ein neues Next.js-Projekt

npx create-next-app my-nextra-docs
next js project options
cd my-nextra-docs

2. Installieren Sie Nextra Docs-Abhängigkeiten

Installieren Sie die Kernpakete für nextra docs:

npm install next react react-dom nextra nextra-theme-docs

3. Aktualisieren Sie die package.json-Skripte

Stellen Sie sicher, dass package.json diese Skripte enthält (sie werden normalerweise von create-next-app hinzugefügt):

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

"dev": "next --turbopack"
package.json
npm run dev

Besuchen Sie http://localhost:3000, um zu bestätigen, dass die Next.js-App funktioniert.

next js home page

Hässlich:( Aber naja, es funktioniert! Versuchen wir nun, das zu beheben.

4. Konfigurieren Sie Nextra Docs

import nextra from 'nextra'

const withNextra = nextra({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.js'
})

export default withNextra({
  async redirects() {
    return [
      {
        source: '/',
        destination: '/resources',
        permanent: true
      }
    ]
  }
})

"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.mjs", ".next/types/**/*.ts"]

5. Richten Sie MDX-Komponenten ein

import { useMDXComponents as getThemeComponents } from 'nextra-theme-docs'

const themeComponents = getThemeComponents()

export function useMDXComponents(components) {
  return {
    ...themeComponents,
    ...components
  }
}

6. Aktualisieren Sie das App-Layout

import { Footer, Layout, Navbar } from 'nextra-theme-docs'
import { Banner, Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-docs/style.css'
 
export const metadata = {
  // Definieren Sie hier Ihre Metadaten
  // Weitere Informationen zur Metadaten-API finden Sie unter: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
}
 
const banner = <Banner storageKey="some-key">Nextra 4.0 is released 🎉</Banner>
const navbar = (
  <Navbar
    logo={<b>Nextra</b>}
    // ... Ihre zusätzlichen Navbar-Optionen
  />
)
const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>
 
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      // Nicht erforderlich, aber gut für SEO
      lang="en"
      // Muss gesetzt werden
      dir="ltr"
      // Empfohlen vom `next-themes`-Paket https://github.com/pacocoursey/next-themes#with-app
      suppressHydrationWarning
    >
      <Head
      // ... Ihre zusätzlichen Head-Optionen
      >
        {/* Ihre zusätzlichen Tags sollten als `children` des `<Head>`-Elements übergeben werden */}
      </Head>
      <body>
        <Layout
          banner={banner}
          navbar={navbar}
          pageMap={await getPageMap()}
          docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
          footer={footer}
          // ... Ihre zusätzlichen Layout-Optionen
        >
          {children}
        </Layout>
      </body>
    </html>
  )
}

7. Fügen Sie Dokumentationsseiten hinzu

home page 404 error message
/app/resources
  /page.mdx

Zu Testzwecken habe ich Folgendes hinzugefügt:

# Ressourcen

Ressourcen zu verschiedenen Themen und Bereichen.

## Lernen
- [Build Your Own X](https://github.com/codecrafters-io/build-your-own-x): Meistere die Programmierung, indem du deine Lieblingstechnologien von Grund auf neu erstellst.

## Nützliche Artikel
- [CSR vs SSR vs SSG vs ISR: Ein tiefer Einblick für moderne Webentwicklung](csr-vs-ssr-vs-ssg-vs-isr-a-deep-dive-for-modern-web-development-33kl#:~:text=Here's%20a%20quick%20summary%3A,as%20SPAs%2C%20CSR%20is%20perfect.)
- [The Art of Comand Line](https://github.co./jlevy/the-art-of-command-line)

Der Inhalt muss jedoch nicht komplex sein und kann so einfach sein wie:

# Erste Schritte

Hallo <Ihr Name>! Willkommen auf Ihrer **nextra docs**-Website:)

- Einfache Markdown-Bearbeitung
- Automatische Navigation
- Suche und Inhaltsverzeichnis integriert
nextra home page

Legen Sie los – bearbeiten Sie diese Seite, fügen Sie weitere Seiten hinzu und probieren Sie alle Funktionen wie den Dunkel-/Hellmodus aus. Die Macht liegt in Ihren Händen, und die Möglichkeiten sind endlos!

light and dark mode

Nextra Docs auf Vercel bereitstellen

Jetzt machen wir Ihre nextra docs-Website auf Vercel live – super einfach, da Vercel für Next.js gebaut ist.

8. Pushen Sie Ihren Code zu GitHub

git init
git add .
git commit -m "Initial nextra docs"
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

9. Auf Vercel bereitstellen

varcel

Anpassen Ihrer Nextra Docs-Website

Möchten Sie Ihre nextra docs zum Strahlen bringen? Probieren Sie Folgendes:

Ich habe eine benutzerdefinierte Callout-Komponente zu meiner Dokumentation hinzugefügt – sah in 10 Minuten professionell aus!

Fehlerbehebung und Tipps für Nextra Docs

custom nextra documentation example

Warum Nextra Docs und Vercel ein perfektes Paar sind

Nextra docs macht die Dokumentation mit seiner Markdown-Einfachheit und Next.js-Geschwindigkeit zum Vergnügen. Die One-Click-Bereitstellungen und das kostenlose Hosting von Vercel machen den Deal perfekt. Sicher, der App-Router mag Next.js-Neulinge stolpern lassen, aber die Nextra docs sind solide. Im Vergleich zu Docusaurus fühlt sich nextra docs leichter und moderner an.

Bereit, Ihre Dokumentation zu starten? Erstellen Sie Ihre nextra docs-Website und stellen Sie sie auf Vercel bereit – ich bin gespannt auf Ihre Kreation! Und schauen Sie sich auf jeden Fall Apidog an.

💡
Möchten Sie ein großartiges API-Testtool, das wunderschöne API-Dokumentation generiert?

Möchten Sie eine integrierte All-in-One-Plattform für Ihr Entwicklerteam, um mit maximaler Produktivität zusammenzuarbeiten?

Apidog erfüllt all Ihre Anforderungen und ersetzt Postman zu einem deutlich günstigeren Preis!
button

Praktizieren Sie API Design-First in Apidog

Entdecken Sie eine einfachere Möglichkeit, APIs zu erstellen und zu nutzen

Kostenlos registrierenDownload