1. 스팩 정의

기능 스팩

1. 가장 베스트는, 이미지를 vscode에서 MDX파일에 드롭하면 이미지가 현재 파일과 같은 폴더에 추가되며 1.png, 2.png .. 순서대로 번호를 매기며 추가가되는 것이다. 이는 확장프로그램으로 추후 확장이 가능할 듯하다.
2. 우선, 현재 mdx와 동일한 폴더에 있는 이미지파일을 먼저 띄우고 싶다.

개발 스팩

1. next.js의 이미지
   • public안에 있는 파일이라면, next.js서버가 이미지에 대한 url을 만들어준다.

     • e.g. /public/contents/posts/system/1.png의 이미지

       

       경로에서 /public을 제외한 /contents/posts/system/1.png로 접근이 가능하다.

2. 개발

1. MDXConent에서 component props을 설정한다.

   <MDXContent
     components={{
       Image: props => (
         <Image
           {...props}
           width={100}
           height={100}
           src={`/contents/${_raw.sourceFileDir}/${props.src}`}
         />
       ),
     }}
   />

   위와 같이, 넘겨준 props 중 src는 오로지 현재 mdx파일 기준으로 작성할 수 있도록 하였다.

   여기서 _raw.sourceFileDir는 현재 mdx파일의 폴더를 말한다.

2. 다음과 같이 사용한다.

   <Image src='1.png' />

   이제 현재 mdx파일을 기준으로 이미지를 탐색한다.

트러블 슈팅

1. Cannot access Image.propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through

해결 방법

• 참고 github : https://github.com/hashicorp/next-mdx-remote/issues/405

해결 방법

• props를 모두 next/image에 넘겨주면 된다.

  <MDXContent
    components={{
      Image: props => <Image width={100} height={100} {...props} />,
    }}
  />