basePath

Для развертывания приложения Next.js по подпути домена можно использовать опцию конфигурации basePath.

basePath позволяет установить префикс пути для приложения. Например, чтобы использовать /docs вместо '' (пустая строка, значение по умолчанию), откройте next.config.js и добавьте опцию конфигурации basePath.

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

Важно знать: Это значение должно быть установлено на этапе сборки и не может быть изменено без повторной сборки, так как оно включено в пакеты с клиентом.

Ссылки

При создании ссылок на другие страницы с использованием next/link и next/router префикс basePath будет автоматически добавлен.

Например, использование /about автоматически преобразуется в /docs/about при установке basePath в значение /docs.

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

Вывод HTML:

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

Это гарантирует, что при изменении значения basePath вам не нужно изменять все ссылки в приложении.

Изображения

При использовании компонента next/image, вам необходимо добавить префикс basePath перед src.

Например, использование /docs/me.png корректно отобразит ваше изображение, когда basePath установлено в значение /docs.

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