【自作ブログ #3】記事ページを表示する - スマレジエンジニアyushiのブログ

自作ブログを作っています。

yushi-dev.hatenablog.com

技術スタック

TypeScript
React
Next.js
Styled Components
GitHub Pages

今回は、Markdownで用意した記事を、対応したURLで表示できるようにします。

ページURL

ファイル名を[slug].md、ページURLを/posts/[slug]とします。
例えば、記事ファイルのsample.mdに対応するURLは、/posts/sampleとなります。

記事表示ページ

記事ファイルを元に、slug一覧を取得する関数を用意します。

(post-service.ts)

export function getSlugs() {
  return fs
    .readdirSync(getPostDir())
    .map((fileName) => path.parse(fileName).name)
}

次に、pages/posts/[slug].tsxを作成し、ここでページの定義をしていきます。

posts/[slug].mdに存在している各記事ファイルを、パス一覧に登録することで、静的ファイルとして生成されるようにします。

([slug].tsx)

export async function getStaticPaths() {
  return {
    paths: postService.getSlugs().map((slug) => ({ params: { slug } })),
    fallback: false,
  }
}

参考: getStaticPaths

次に、記事表示用の記述を行います。
ここで、getStaticPathsが返却するpaths.params[]が、getStaticPropsの引数として渡されます。

type Params = {
  params: {
    slug: string
  }
}

export async function getStaticProps({ params }: Params) {
  const postData = await postService.loadMarkdown(params.slug)

  return {
    props: {
      content: postData.content,
    },
  }
}

type Props = {
  content: string
}

const Slug = ({ content }: Props) => {
  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </>
  )
}

export default Slug