markdown files in Nextjs

.MDX

其實依照Nextjs官網的solution，他有一個方式可以去讀一個叫做.mdx的檔案格式

他和.md幾乎是一樣的，但是他能做的事情不只是寫markdown

他可以在裡面寫javascript，把需要的component import進去

e.g.

import { MyComponent } from 'my-components'

# My MDX page

This is a list in markdown:

- One
- Two
- Three

Checkout my React component:

<MyComponent/>

如何實作 ?

如何讀這些.md檔案?

我在/src資料夾裡面加了一folder叫做posts

在posts裡面新增markdown files

然後會在pages的 getServerSideProps function去讀fs檔案

利用fsmodule裡面的readdirSync和readdirSyncfunction去讀files和folder

如下

export const getServerSideProps = async () => {
  const files = fs.readdirSync(path.resolve(process.cwd(), "src/posts"));
  const allPostsData = files.map((fileName) => {
    const slug = fileName.replace(".md", "");
    const fileContents = fs.readFileSync(
      path.resolve(process.cwd(), `src/posts/${slug}.md`
      ));
    const { data, content } = matter(fileContents);

    return {
      files,
      slug,
      data,
      content,
    };
  });
  return { props: { allPostsData } };
};

在nextjs使用fs遇到的坑

process.cwd() vs __dirname

對於node不是很熟悉的我來說，即使是google到答案還不是很確定為什麼XD

我要去閱讀 path.resolve(process.cwd(), "src/posts")這個位置的檔案

一開始都一直失敗，因為我第一個參數用的是__dirname，一直不知道為何

但這和next執行node的方式有關

先講一下__dirname和process.cwd()的差異

前者是執行node的檔案位置，以我的案例來說，因為我是在getServerSideProps執行

有上圖可以看到，因為是在server執行的，所以會抓到.next\server\pages這個路徑，而找不到我的.md檔案

解析拿到的md資料

會需要一個叫做 next-mdx-remote 這個套件來解析markdown file

會需要import一個component和function分別是MDXRemote和serialize

serialize function會回傳一個promise，response會回傳一個物件

再把這個物件放到MDXRemote component裡面

樣式

以我這個專案用tailwind來說

tailwind有給一個className可以diabled掉指定的component prose

在tailwind.config裡面去設定我想要的markdown樣式

參考如連結