basePath

Bir Next.js uygulamasını bir etki alanının alt yolu altında dağıtmak için basePath config seçeneğini kullanabilirsiniz.

basePath uygulama için bir yol öneki ayarlamanıza olanak tanır. Örneğin, '' (boş bir dize, varsayılan) yerine /docs kullanmak için next.config.js adresini açın ve basePath yapılandırmasını ekleyin:

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

Bilmekte fayda var: Bu değer derleme sırasında ayarlanmalıdır ve değer istemci tarafı paketlerinde satır içine alındığından yeniden derleme yapılmadan değiştirilemez.

Links

next/link ve next/router kullanılarak diğer sayfalara bağlantı verildiğinde basePath otomatik olarak uygulanacaktır.

Örneğin, basePath /docs olarak ayarlandığında /about kullanımı otomatik olarak /docs/about haline gelecektir.

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

Çıktı html:

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

Bu, basePath değerini değiştirirken uygulamanızdaki tüm bağlantıları değiştirmek zorunda kalmamanızı sağlar.

Images

Kullanırken next/image bileşeni için basePath adresini src adresinin önüne eklemeniz gerekecektir.

Örneğin, /docs/me.png adresini kullanmak, basePath adresi /docs olarak ayarlandığında resminizi düzgün bir şekilde sunacaktır.

import Image from 'next/image'
 
function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/docs/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}
 
export default Home