마크다운을 잡으면서 300년, 모르는 사이에 레벨MAX가 되었습니다

Next.js에서 여러개의 마크다운을 넣어 갈아보자

2023.11.14수정

featured image thumbnail for post 마크다운을 잡으면서 300년, 모르는 사이에 레벨MAX가 되었습니다

이 포스팅에서는 단순히 텍스트만 들어간 마크다운 파일인 경우에만 처리하는 코드를 알려드립니다.

필요한 패키지

내장된 패키지이므로 별도로 설치하시면 안됩니다. (별도 설치시 에러 뜰 수 있음)

import fs from 'fs';
import path from 'path';

next.js getStaticProps 사용

export async function getStaticProps() {
  const markdownDir = path.join(process.cwd(), 'pages/licenses');
  const filenames = fs.readdirSync(markdownDir);
  const licenses = filenames.map((filename) => {
    const filePath = path.join(markdownDir, filename);
    return fs.readFileSync(filePath, 'utf8');
  });

  return {
    props: {
      licenses,
    },
  };
}

return 내부

{
  licenses.map((license, index) => (
    <div key={index}>
      <pre>
        <code>{license}</code>
      </pre>
      <hr />
    </div>
  ));
}

최종 코드

import fs from 'fs';
import path from 'path';
function OpenSources({ licenses }: { licenses: string[] }) {
return (
  <div>
    {licenses.map((license, index) => (
      <div key={index}>
        <pre>
          <code>{license}</code>
        </pre>
        <hr />
      </div>
    ))}
  </div>
export async function getStaticProps() {
  const markdownDir = path.join(process.cwd(), 'pages/licenses');
  const filenames = fs.readdirSync(markdownDir);
  const licenses = filenames.map((filename) => {
    const filePath = path.join(markdownDir, filename);
    return fs.readFileSync(filePath, 'utf8');
  });

  return {
    props: {
      licenses,
    },
  };
}

export default OpenSources;

사용 예: https://jejeup.dev1stud.io/open-sources

Github: https://github.com/naninyang/jejeup/blob/main/pages/open-sources.tsx

FIN!