basePath

Um eine Next.js-Anwendung unter einem Unter-Pfad einer Domain zu deployen, können Sie die Konfigurationsoption basePath verwenden.

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

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

Hinweis: Dieser Wert muss zum Zeitpunkt des Builds festgelegt werden und kann nicht ohne Neubau geändert werden, da der Wert in die Client-Seite-Bundles eingebettet wird.

Links

Beim Verlinken auf andere Seiten mit next/link und next/router wird 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>
    </>
  )
}

Ausgabe-HTML:

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

Dies stellt sicher, dass Sie nicht alle Links in Ihrer Anwendung ändern müssen, wenn sich der basePath-Wert ändert.

Bilder

Bei Verwendung der next/image Komponente müssen Sie basePath vor src hinzufügen.

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

import Image from 'next/image'
 
function Home() {
  return (
    <>
      <h1>Meine Homepage</h1>
      <Image
        src="/docs/me.png"
        alt="Bild des Autors"
        width={500}
        height={500}
      />
      <p>Willkommen auf meiner Homepage!</p>
    </>
  )
}
 
export default Home