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>Моя домашняя страница</h1>
      <Image
        src="/docs/me.png"
        alt="Фото автора"
        width={500}
        height={500}
      />
      <p>Добро пожаловать на мою домашнюю страницу!</p>
    </>
  )
}

export default Home