このブログの技術構成について①markdownでの投稿

npx create-next-app@latest --typescript

import fs from 'fs'
import matter from 'gray-matter'

export const getStaticProps: GetStaticProps = async () => {
  // 私の場合postsディレクトリ直下にmarkdownファイルを置いているのでreaddirSyncでファイルを取得
  const files = fs.readdirSync('posts')

  // ここで投稿の表示に必要な情報を作成
  let posts = files.map((fileName) => {
    // markdownファイルから.mdの拡張子を取り除いてurlを作成
    const slug = fileName.replace(/\.md$/, '')
    // readFileSyncでpostsディレクトリ下のファイルを指定してファイル内部の情報を取得
    const fileContent = fs.readFileSync(`posts/${fileName}`, 'utf-8')
    // matterでmarkdownファイル内に設定しておいたtitleやdescriptionといった情報を取得
    const { data } = matter(fileContent)
    return {
      frontMatter: data,
      slug,
    }
  })

  // modifiedDateもしくはpublishedDateが新しい順に並び替え
  posts = posts.sort((a, b) =>
    new Date(
      a.frontMatter.modifiedDate
        ? a.frontMatter.modifiedDate
        : a.frontMatter.publishedDate
    ) >
    new Date(
      b.frontMatter.modifiedDate
        ? b.frontMatter.modifiedDate
        : b.frontMatter.publishedDate
    )
      ? -1
      : 1
  )

  // publicというフラグで公開・下書きの状態を管理して、公開のもだけに絞る
  posts = posts.filter((post) => post.frontMatter.public)

  return {
    props: {
      posts,
    },
  }
}

import fs from 'fs'
import matter from 'gray-matter'
import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import { ParsedUrlQuery } from 'querystring'
import { unified } from 'unified'
import remarkToc from 'remark-toc'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import rehypeSlug from 'rehype-slug'
import remarkPrism from 'remark-prism'
import { PostFrontMatter } from 'type'

type ContextProps = {
  frontMatter: { [key: string]: PostFrontMatter }
  content: string
}

interface Params extends ParsedUrlQuery {
  slug: string
}

export const getStaticProps: GetStaticProps<ContextProps, Params> = async (
  params
) => {
  const context = params.params!
  // postsディレクトリ下のmarkdownファイルの内容を取得
  const file = fs.readFileSync(`posts/${context.slug}.md`, 'utf-8')
  // matterでmarkdownファイル内に設定しておいた情報(data: titleやdescriptionなどの情報, content: 投稿内容)
  const { data, content } = matter(file)

  // unifiedでmarkdownファイルをhtmlとして出力してもらう
  const result = await unified()
    .use(remarkParse)
    .use(remarkPrism, {
      plugins: ['line-numbers'],
    })
    // 目次の設定したのでここでパラメーターを設定
    .use(remarkToc, {
      heading: '目次',
      tight: true,
      ordered: true,
    })
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeStringify, { allowDangerousHtml: true })
    .use(rehypeSlug)
    .process(content)

  const allContent = result.value

  return {
    props: { frontMatter: data, content, allContent },
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  const files = fs.readdirSync('posts')
  // 投稿詳細ページのurlを生成
  const paths = files.map((fileName) => ({
    params: {
      slug: fileName.replace(/\.md/, ''),
    },
  }))
  return {
    paths,
    fallback: 'blocking',
  }
}

export default Posts