카테고리 없음
[next.js] Context-path 설정 (nextjs base path설정)
듀네
2023. 8. 27. 19:36
개발 서버에 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
반응형