next.config.js에서 base path를 설정

next에서 base path를 설정 
- 도메인의 하위 경로 아래에 Next.js 애플리케이션을 배포할 때 사용 

 

설정

// next.config.js 파일 
module.exports = {
  basePath: '/docs',
}

1) 이렇게 설정하게 되면 다음과 같은 <Link> 태그에서 이동하게 되면 /about 이 아닌 /docs/about 으로 이동

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


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

 

주의사항
: 단, <Image> 태그나 <svg> 태그의 경로에는 적용이 안되므로 전체 경로를 적어주어야 한다.

import Image from 'next/image'

function Home() {
  return (
    <Image
      src="/docs/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

export default Home

 

 

출처
https://intrepidgeeks.com/tutorial/nextjs-nextconfigjs

Next.js - next.config.js