현재 md 파일은 최상위 경로의 data/posts/[포스트 이름]/index.md에 만들고 있다. 이때 md파일 안에서 이미지를 사용하고 싶을 때, 이미지 파일을 md파일과 같은 계층에 넣고 사용하고 있다.

    - data
        - post
           - first-post
                - index.md
                - first.jpg  

이렇게 만들고 index.md에서 상대 경로로 이미지를 불러온다. first-post의 index.md에서 ./first.jpg를 사용하면 이미지가 잘 불러와진다.

그런데 문제는 Next.js에서 빌드 타임에 정적 파일을 접근할 때, public 폴더 안의 파일만 접근이 가능하다는 것이다. 따라서 다음과 같은 방법 중 선택해야 했다.

• 외부 저장소에 업로드하고 URL 가져오기.
• 퍼블릭 폴더에 이미지 넣은 뒤 md파일에서 해당 경로로 이미지 가져오기.
• 마크업 렌더링 시 이미지 경로를 바꿔주기

나 같은 경우에는 1번을 택할까 했지만, 파일을 쓸 때 글 따로 이미지 따로 입력해야 하고, 각 이미지가 어디에 있는지 나중에 헷갈릴 것 같아서 3번을 택하게 되었다.

그리고 이 분의 블로그 글을 참고해서 이 작업을 할 수 있었다.

이미지 경로를 바꿔주기 위한 프로세스는 다음과 같다.

1. 기존에 /public에 있던 블로그 포스트 이미지들을 모두 삭제한다. (초기화)
2. /posts 폴더의 모든 글 이미지를 /public으로 옮긴다.

이를 위해 해당 작업을 하는 script를 짜고, 서버 실행 전과 빌드 실행 전 돌려주는 작업을 해야 한다.

디렉토리를 비우기 위해 fs-extra라는 라이브러리를 사용했다. fs의 기능을 더 확장한 라이브러리라고 생각하면 좋을 것 같다.

/bin/pre-build.mjs

import fsExtra from 'fs-extra';
import {copyFile, mkdir, readdir} from 'fs/promises';

// 변경할 확장자 리스트
const imageExtensionList= ['.png', '.jpg', '.jpeg', '.gif', '.svg'];

const IMAGE_DIR='./public/posts';
const POST_DIR='./data/posts';

async function copyImages(sourceDir, targetDir, imageList) {
  imageList.forEach((image) =>
    {
      const sourcePath = `${sourceDir}/${image}`;
      const targetPath = `${targetDir}/${image}`;
      copyFile(sourcePath, targetPath);
    }
  )
}

async function copyPostImages() {
  const postNameList = await readdir(POST_DIR);
  for (const postName of postNameList) {
    
    const fileList  = await readdir(`${POST_DIR}/${postName}`);
    const imageFiles = fileList.filter((file) => 
      imageExtensionList.some((extension) => file.endsWith(extension)))

    await mkdir(`${IMAGE_DIR}/${postName}`, { recursive: true })
    await copyImages(`${POST_DIR}/${postName}`, `${IMAGE_DIR}/${postName}`, imageFiles);
  }
}

// 1. public 안의 posts 디렉토리 비우기
await fsExtra.emptyDir(IMAGE_DIR);

// 2. data/posts/${포스트 이름} => public/posts/${포스트 이름}으로 이미지 복사하기
copyPostImages();

script에서 pre prefix를 붙이면 각 명령어 실행 전 pre가 붙은 스크립트가 자동적으로 실행되게 된다.

  "scripts": {
    ... 
    "copy-image": "node ./bin/pre-build.mjs",
    "predev": "npm run copy-image",
    "prebuild": "npm run copy-image"
  }

이렇게 되면 public 안에 post의 이미지들이 계층 구조대로 들어간다는 것을 볼 수 있다.

그런데 여기서 문제가, md파일은 상대경로로 적어줬는데 이때 이미지의 상대경로가 그대로 markup 에 담기기 때문에 실제 이미지 파일을 읽어올 수 없는 현상이 발견되는 것이다. 그렇다고 md 파일에 퍼블릭 폴더 안에 경로를 써주면 거의 pre-build script 를 짠게 의미거 없어지긴 한다.

그렇다면!~! 마크업 플러그인으로 이미지들의 경로를 교체해준다.

예를 들어 ./image1.jpg => /posts/first-post/image1.jpg 로 바꿔주는 것이다.

플러그인 리스트들 mdast 문법에 의해 구문 트리로 처리된다.

remark에서는 md파일을 JSON object 형식으로 쓰인 AST로 바꿔주기 때문에 중간 과정에서 플러그인이 이 트리를 가지고 중간 작업을 할 수 있다.

자체 플러그인을 만들어주기 위해 스크립트를 하나 생성한다. 사실 플러그인이라는 거창한 이름이지만, 실행할 함수를 정의 후 return 해주면 된다. (말로는 쉽다. 여기서 삽질을 엄청 했다)

import {visit} from 'unist-util-visit';

const IMAGE_PUBLIC_DIR = '/posts';
export default function changeImageSrc({path}) {
    return function(tree, file) {
        console.log(tree, file);
        console.log(path);
        visit(tree, (node) => {
            if(node.children) {
                const image = node.children.find(child => child.type === 'image');

                if (image) {
                    const fileName = image.url.replace('./', '');
                    image.url = `${IMAGE_PUBLIC_DIR}/${path}/${fileName}`;
                }
            }
        });
    };
}

플러그인을 만들었다면, 이제 적용해주면 된다. react-remark에서 내부적으로 unified를 사용하고 있기 때문에 거기 껴주면 된다.

import ReactMarkdown from 'react-markdown';
import {FC} from 'react';
import transformImgSrc from '../../plugins/change-md-image-path.mjs';
type Props = {
    content: string;
    currentPath: string;
};
const MarkdownViewer: FC<Props> = ({content, currentPath}) => {
    return (
        <ReactMarkdown remarkPlugins={[[transformImgSrc, {path: currentPath}]]}>
            {content}
        </ReactMarkdown>
    );
};

export default MarkdownViewer;

이렇게 만든 컴포넌트를 사용하면 끝이다.

나중에 파일 작업을 Promise.all이나 allSettled로 변경해서 빌드 속도를 더 높일 수 있을 듯 하댜.

https://www.codeconcisely.com/posts/nextjs-relative-image-paths-in-markdown/