basePath

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

basePath allows you to set a path prefix for the application. For example, to use/docs instead of'' (an empty string, the default), opennext.config.js and add thebasePath config:

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

Good to know: This value must be set at build time and cannot be changed without re-building as the value is inlined in the client-side bundles.

Links

When linking to other pages usingnext/link andnext/router thebasePath will be automatically applied.

For example, using/about will automatically become/docs/about whenbasePath is set to/docs.

exportdefaultfunctionHomePage() {return (    <>      <Linkhref="/about">About Page</Link>    </>  )}

Output html:

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

This makes sure that you don't have to change all links in your application when changing thebasePath value.

Images

When using thenext/image component, you will need to add thebasePath in front ofsrc.

For example, using/docs/me.png will properly serve your image whenbasePath is set to/docs.

import Imagefrom'next/image'functionHome() {return (    <>      <h1>My Homepage</h1>      <Imagesrc="/docs/me.png"alt="Picture of the author"width={500}height={500}      />      <p>Welcome to my homepage!</p>    </>  )}exportdefault Home