[next.js] Context-path 설정 (nextjs base path설정)

개발 서버에 nextjs 프로젝트를 올리던중 context-path 설정이 필요해서 알아보고 기록해둔다.

 

1. next confing 설정 수정 : basePath에 하고 싶은 path 설정

/** @type {import('next').NextConfig} */

const nextConfig = {
    reactStrictMode: true,
    basePath: '/blog',
}
module.exports = nextConfig

 

이렇게 설정하면 이미지 import 중 문제가 생긴다. 이미지는 아직 path 설정을 안붙였기 때문 2가지 방법이 존재한다.

 

2-1.  src 경로에 path 붙여주기 

<Image
   width={724}
   height={324}
   objectFit="cover"
   src="/blog/vercel.svg"
   alt="vercel logo "
/>

2-2. src 경로 안에 Images 폴더 추가하고 안에 이미지 넣기 , 그리고 해당 이미지 import해서 사용하기

import heavyrain from '../Images/heavy-rain.jpg'
export default function Home() {
return (
     <Image
         width={724}
         height={324}
         objectFit="cover"
         src={heavyrain}
         alt="vercel logo "
    />
  )
}

 

---

 

참고 :

https://nextjs.org/docs/pages/api-reference/next-config-js/basePath

https://medium.com/frontendweb/how-to-change-the-base-path-in-nextjs-cbc315136ec3