basePath

Um eine Next.js-Anwendung unter einem Unterpfad einer Domain bereitzustellen, können Sie die Konfigurationsoption basePath verwenden.

basePath ermöglicht es Ihnen, einen Präfix-Pfad für die Anwendung festzulegen. Um beispielsweise /docs anstelle von '' (ein leerer String, der Standardwert) zu verwenden, öffnen Sie next.config.js und fügen die basePath-Konfiguration hinzu:

module.exports = {
  basePath: '/docs',
}

Wichtig zu wissen: Dieser Wert muss zum Build-Zeitpunkt gesetzt werden und kann ohne Neubuild nicht geändert werden, da der Wert in die clientseitigen Bundles eingebettet ist.

Links

Wenn Sie mit next/link und next/router auf andere Seiten verlinken, wird der basePath automatisch angewendet.

Beispielsweise wird /about automatisch zu /docs/about, wenn basePath auf /docs gesetzt ist.

export default function HomePage() {
  return (
    <>
      <Link href="/about">About Page</Link>
    </>
  )
}

HTML-Ausgabe:

<a href="/docs/about">About Page</a>

Dadurch wird sichergestellt, dass Sie nicht alle Links in Ihrer Anwendung ändern müssen, wenn Sie den basePath-Wert anpassen.

Bilder

Bei Verwendung der next/image-Komponente müssen Sie den basePath vor das src-Attribut setzen.

Beispielsweise wird /docs/me.png Ihr Bild korrekt ausliefern, wenn basePath auf /docs gesetzt ist.

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>Meine Startseite</h1>
      <Image
        src="/docs/me.png"
        alt="Bild des Autors"
        width={500}
        height={500}
      />
      <p>Willkommen auf meiner Startseite!</p>
    </>
  )
}

export default Home