Next.js 13.2 업데이트 살펴보기 (2/3)

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

지난 글에 이어서 최근에 업데이트 된 Next.js 13.2의 업데이트 내용을 살펴보도록 하겠습니다.

---

먼저 살펴볼 내용은 MDX for Server Components 입니다.

MDX는 이름에 X가 들어있는걸 보면 살짝 그 의미를 유추해볼 수 있는데,

Markdown 파일에서 JSX를 사용할 수 있도록 해주는 Markdown의 superset입니다.

즉, MDX를 사용하면 Markdown 파일 내에서 리액트 컴포넌트를 사용할 수 있다는 것이죠.

 

최근 들어 Markdown이 굉장히 많은 곳에서 사용되고 있으며, Markdown 문서 내에 다양한 컨텐츠들을 embed시킬 수 있는 플러그인들이 많이 나와 있습니다.

그런데 MDX사용하면 Markdown 내에 리액트 컴포넌트까지 넣을 수 있다니 가능성이 무궁무진한 기능이라고 볼 수 있겠네요.

다만, 여기에서 넣을 수 있는 컴포넌트는 리액트 서버 컴포넌트에 한정되어 있습니다.

서버 컴포넌트를 활용하면 클라이언트의 자바스크립트 코드는 줄어들게 되고, 결과적으로 페이지 로딩이 빨라지게 되겠죠.

이 기능을 활용하면 정말 Markdown을 무한한게 확장시킬 수 있을 것 같다는 생각이 듭니다.

---

두 번째로 살펴볼 업데이트 내용은 Rust MDX Parser 입니다.

이름에서 알 수 있듯이 방금 전에 나왔던 MDX와 관련된 업데이트 입니다.

MDX에서 리액트 서버 컴포넌트를 지원하기 위해서는 MDX parser를 사용하게 되는데,

이 parser의 성능을 향상시키기 위해서 Rust로 다시 개발했다고 합니다.

기존에 있던 parser는

자바스크립트 기반이었기 때문에 아무래도 parsing 속도 측면에서 느릴 수 밖에 없었습니다.이번 업데이트로 인해서 MDX를 parsing하는 속도가 굉장히 빨라졌다고 합니다.

 

Rust로 새로 개발된 MDX parser를 사용하기 위해서는 아래와 같이 next.config.js에 @next/mdx 패키지를 추가해주면 됩니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    mdxRs: true,
  },
};

const withMDX = require('@next/mdx')();
module.exports = withMDX(nextConfig);

 

그리고 참고로 Next.js가 아닌 외부 프로젝트에서 Rust MDX Parser를 사용하고 싶다면 아래 패키지를 사용하면 됩니다.

https://github.com/wooorm/mdxjs-rs

GitHub - wooorm/mdxjs-rs: Compile MDX to JavaScript in Rust

 

---

이번 글에서 마지막으로 살펴볼 업데이트 내용은 Improved Error Overlay 입니다.

기존에 Next.js로 개발을 하다가 에러가 발생하면 화면에 크게 에러 표시 창이 뜨게 되는데, 이걸 Error Overlay라고 부릅니다.

이번 업데이트에서는 Next.js와 리액트의 에러 stack trace를 구분해서 볼 수 있도록 되었기 때문에 결과적으로 가독성이 향상되어 에러의 원인을 조금 더 빨리 파악할 수 있게 되었습니다.

 

아래 스크린샷은 Next.js 공식 블로그에서 가져온 새로운 Error Overlay의 모습입니다.

이전보다 확실히 더 깔끔해지고 가독성이 올라간 것 같네요.

---

이번 Next.js 13.2버전의 업데이트 내용이 많기 때문에 다음 글에서 이어서 살펴보도록 하겠습니다.

감사합니다.