mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Tyler LutzandGitHub
1f19a5b810
### What? - Added separate links for the app and pages router in the shared documentation. - Added comment at the top of all shared documentation. - Fixed typos in pages documentation comment. ### Why? - To limit the switching between the different routers in shared documentation when clicking the links.
80 lines
2.1 KiB
Plaintext
80 lines
2.1 KiB
Plaintext
---
|
|
title: basePath
|
|
description: Use `basePath` to deploy a Next.js application under a sub-path of a domain.
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
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 `''` (an empty string, the default), open `next.config.js` and add the `basePath` config:
|
|
|
|
```js filename="next.config.js"
|
|
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 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`.
|
|
|
|
```js
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<Link href="/about">About Page</Link>
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
Output html:
|
|
|
|
```html
|
|
<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.
|
|
|
|
### Images
|
|
|
|
<AppOnly>
|
|
|
|
When using the [`next/image`](/docs/app/api-reference/components/image) component, you will need to add the `basePath` in front of `src`.
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
When using the [`next/image`](/docs/pages/api-reference/components/image) component, you will need to add the `basePath` in front of `src`.
|
|
|
|
</PagesOnly>
|
|
|
|
For example, using `/docs/me.png` will properly serve your image when `basePath` is set to `/docs`.
|
|
|
|
```jsx
|
|
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
|
|
```
|