Base Path

This feature was introduced in Next.js 9.5 and up. If you’re using older versions of Next.js, please upgrade before trying it out.

To deploy a Next.js application under a sub-path of a domain you can use the basePath config option.

basePath allows you to set a path prefix for the application. For example, to use /docs instead of / (the default), open next.config.js and add the basePath config:

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

Links

When linking to other pages using next/link and next/router the basePath will be automatically applied.

For example using /about will automatically become /docs/about when basePath is set to /docs.

  1. export default function HomePage() {
  2.   return (
  3.     <>
  4.       <Link href="/about">
  5.         <a>About Page</a>
  6.       </Link>
  7.     </>
  8.   )
  9. }

Output html:

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

This makes sure that you don’t have to change all links in your application when changing the basePath value.