<3은 emoji가 없던 시절 하트를 표시하던 방법이다. 좀 전에 graphite cheatsheet til을 쓰면서 무심코 하트를 <3으로 했었는데 로컬 빌드가 터져서 음? 하고 보니 당연한 얘기였다.

MDX에게 <란 jsx의 시작이기 때문에...

---

추가:

• <>도 터짐
• <-도 터짐

Before

• til을 위해 repo issues를 cms로 쓰고 있었고,
• issue body render를 위해 github api reponse 중 bodyHTML을 dangerously... 에 넣어주고 있었음.
• 근데 이러면 next가 해주는 이것저것이 아까우므로,
• api response 중 body(markdown string)을 mdx renderer에 넘겨서 써야겠다고 생각.

Issues

• next-mdx-remote를 쓰면 되고 딱히 별 문제는 없음(rsc도 지원).
• 한가지, 이미지 최적화 기능을 위해선 next/image를 써야하는데,
• static import일 경우엔 알아서 해주지만,
• remote url일 경우엔 width/height 정보를 넘겨줘야함.
• 근데 이걸 어떠케 알어요...

How?

• probe-image-size라는 라이브러리가 있고,
• mdx renderer option의 component 설정시 <img /> -> <Image />로 replace 하면서 요걸 사용해서 width/height 정보를 넘겨주면 됨.
• 코드는 대충 이런식:

  import probe from "probe-image-size"
  // ...
  const components: MDXRemoteProps["components"] = {
    // ...
    // @ts-expect-error <- ts는 아직 async 컴포넌트를 모르지만 우리는 rsc 세계로 넘어왔으므로 ok.
    img: async ({ src, alt }) => {
      if (!src) return null
  
      const { width, height } = await probe(src ?? "")
      //                        ^^^^^ rsc ftw...
  
      if (!width || !height) return null
  
      return <Image src={src} alt={alt ?? ""} width={width} height={height} />
    },
    // ...
  }
  // ...

  import probe from "probe-image-size"
  // ...
  const components: MDXRemoteProps["components"] = {
    // ...
    // @ts-expect-error <- ts는 아직 async 컴포넌트를 모르지만 우리는 rsc 세계로 넘어왔으므로 ok.
    img: async ({ src, alt }) => {
      if (!src) return null
  
      const { width, height } = await probe(src ?? "")
      //                        ^^^^^ rsc ftw...
  
      if (!width || !height) return null
  
      return <Image src={src} alt={alt ?? ""} width={width} height={height} />
    },
    // ...
  }
  // ...

Result

최종 렌더된 이미지의 url을 보면

next가 잘 처리하고 있음을 알 수 있음.

Conclusion

RSC는 대박이다...