Next.js 프로젝트에서 Remark Markdown 변환기를 사용하는 방법

Next.js는 서버 측 렌더링 및 정적 프로젝트를 위한 React.js 프레임워크입니다. Markdown에 콘텐츠를 저장하는 웹사이트를 구축할 때 사용하기 쉽고 매우 잘 작동합니다. 빌드 시 경로를 생성하는 동적 경로라는 기능은 Markdown 파일로 가득 찬 디렉토리를 읽고 각 파일에 대해 별도의 웹 페이지를 생성하는 기능을 제공합니다.

Remark-react은 Markdown을 React로 변환하는 패키지이며 Next.js 애플리케이션과 함께 작동합니다. 개발자가 dangerouslySetInnerHTML 를 사용하도록 강제하지 않는다는 점에서 remark-html 과 다릅니다.

솔직히 Markdown을 Next.js와 함께 사용하고 싶다면 remark-react를 사용해 보는 것이 좋습니다. 그렇다면 다음 사항도 알고 있어야 합니다.

Remark-react will create all links using the <a> component whereas in Next.js you should be using the <Link> component from next/link.

Next.js 프로젝트에서 적절한 <Link> 구성 요소를 사용하는 것은 전체 리디렉션 없이 페이지의 내용과 URL을 변경하므로 중요하지만 앵커( <a> ) 태그를 사용하면 페이지가 다시 로드되고 React 전체 렌더링을 수행해야 합니다. 이렇게 하면 응용 프로그램이 제대로 수행되지 않고 느리게 나타날 수 있습니다.

remark-react를 올바르게 사용하도록 Next.js 애플리케이션 구성

예는 GitHub에서 가져온 것입니다.

React 변환에 Markdown 추가

printMarkdown.js on GitHub

세 가지 NPM 패키지가 필요합니다.

npm i -s unified remark-parse remark-react

추가한 후에는 모두 React 앱으로 가져옵니다.

import unified from 'unified';
import parse from 'remark-parse';
import remark2react from 'remark-react';

다음으로 다음 코드를 추가하여 Markdown을 React 구성 요소로 변환합니다.

const content = unified()
    .use(parse)
    .use(remark2react)
    .processSync(markdown).result;

위의 코드 블록에서 Next.js 애플리케이션은 이제 Markdown을 React로 렌더링해야 합니다.

로컬 및 외부 연결을 처리하기 위해 CustomLink 추가

이제 remark-react 구성에 사용자 지정 링크 구성 요소를 추가하여 로컬 링크에 <Link> 구성 요소를 사용하고 외부 링크에 <a> 구성 요소를 사용하도록 지시할 수 있습니다.

customLink.js on GitHub

다음 내용과 함께 프로젝트에 customLink.js라는 새 구성 요소를 추가합니다.

import Link from 'next/link';

export default function CustomLink({ children, href }) {
  // If the link is local it will start with a "/"
  // Otherwise it'll be something like "https://"
  return href.startsWith('/') || href === '' ? (
    <Link href={href}>
      <a>
        {children}
      </a>
    </Link>
  ) : (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
    >
      {children}
    </a>
  );
}

CustomLink 구성 요소는 전달된 <Link> 에 href 와 같은 로컬 대상이 있는 경우 /about 를 렌더링하지만 <a> 와 같은 외부 대상이 있는 경우 https://dev.to 를 렌더링합니다.

CustomLink 구성 요소를 사용하도록 Markdown 변환기 업데이트

마지막으로 링크를 렌더링할 때 CustomLink 구성 요소를 사용하도록 Markdown to React 코드를 업데이트해야 합니다. 이는 remark-react.use 행에 구성 개체를 추가하여 수행할 수 있습니다.

  const content = unified()
    .use(parse)
    .use(remark2react, {
      remarkReactComponents: {
        // Use CustomLink instead of <a>
        a: CustomLink,
      },
    })
    .processSync(markdown).result;

요약

이것이 Next.js 프로젝트에서 React-remark를 사용하기 위해 필요한 모든 것입니다. 예를 들어 img 태그를 보다 지능적인 것으로 바꾸려는 경우(예: 이미지 압축?) 구성 개체를 사용하여 앵커 HTML 태그 이상의 사용자 정의 구성 요소를 추가할 수 있습니다.

이것이 도움이 되었다면 저에게 반응이나 댓글을 남겨주세요.
읽어 주셔서 감사합니다!