Next.js + MDXでブログを自作してみた【後編：実装】

 
  npm create-next-app
 

 
  	├about.html
  	├apps.html
  	├blog.html
  	├contact.html
  	├index.html
  	├privacy-policy.html
  	└blog/
          ├20220523.html
          ├20220527.html
          └20230123.html
 

  	├about.tsx
  	├apps.tsx
  	├blog.tsx
  	├contact.tsx
  	├index.tsx
  	├privacy-policy.tsx
  	└blog/
          ├20220523.mdx
          ├20220527.mdx
          └20230123.mdx
 

 
  export const meta = {
    title: "Next.js + MDXでブログを自作してみた【後編：実装】",
    tags: ["javascript", "html"],
    imgSrc: "/blog/20230126/next_mdx.png",
    date: new Date(2023, 1 - 1, 27), //月に関しては0-11で指定することに注意！
    outline: "Next.jsとMDXでブログを自作してみました。本記事は後編にあたります。後編では、Next.jsとMDXを用いて具体的にどのようにしてブログを構築するのかについて解説します。",
  };

  # {meta.title}

  ## はじめに
  本記事は、「Next.js + MDXでブログを自作してみた【前編：技術選定】」の続編です。  
  前編をご覧になっていない方でなぜNext.jsやMDXを使うのかに興味がある場合、以下のボタンで前編に戻って前編をご一読なさることをおすすめします。  
 
  //以下本文
 

 
  export const meta = {
    title: "Next.js + MDXでブログを自作してみた【後編：実装】",
    tags: ["javascript", "html"],
    imgSrc: "/blog/20230126/next_mdx.png",
    date: new Date(2023, 1 - 1, 27), //月に関しては0-11で指定することに注意！
    outline: "Next.jsとMDXでブログを自作してみました。本記事は後編にあたります。後編では、Next.jsとMDXを用いて具体的にどのようにしてブログを構築するのかについて解説します。",
  };

  //追加
  export default ({ children }) => <PostLayout meta={meta}>{children}</PostLayout>

  # {meta.title}

  ## はじめに
  本記事は、「Next.js + MDXでブログを自作してみた【前編：技術選定】」の続編です。  
  前編をご覧になっていない方でなぜNext.jsやMDXを使うのかに興味がある場合、以下のボタンで前編に戻って前編をご一読なさることをおすすめします。  
 
  //以下本文
 

 
  const PostLayout = ({children, meta}) => {
    return(
      // 共通部分1
      // Headタグなどを設定することで、OGPに対応する

      //記事本文
      { children }
      
      // 共通部分2
      // SNSシェアボタンなど
    )
  }

  export default PostLayout
 

 
  import tocbot from "tocbot";
 
  const PostLayout = ({children, meta}) => {
    useEffect(() => {
      tocbot.init({
        tocSelector: '.auto-toc', //auto-tocクラスの子要素としてTable Of Contentsを作成する
        contentSelector: '.post-main-content',  //post-main-contentクラスの子要素のheadingを走査する
        headingSelector: 'h2, h3, h4',  //h2, h3, h4を対象としてTable Of Contentsを作成する
        hasInnerContainers: true,
        orderedList:false,
      });
      
      return () => tocbot.destroy()
    }, [])

    return(
      // 共通部分1
      // Headタグなど

      //tocbotが作成したTable Of Contentsの表示先
      <div className="auto-toc"></div>

      //記事本文
      //ここのHeadingタグを走査してほしいのでpost-main-contentクラスの子要素にする
      <div className="post-main-content">
        { children }
      </div>
      
      // 共通部分2
      // SNSシェアボタンなど
    )
  }

  export default PostLayout
 

  import path from 'path'
  import fs from 'fs'
  import Card from "Cardのパス"

  const Blog = ({ metas }) => {
    return (
      <>
        {
          {/* 3.記事の一覧を表示する */}
          {/* 各記事のレイアウトをCardというコンポーネントで定義しておき、それにmetaを渡す */}
          metas.map(meta =><Card meta={meta} />)
        }
      </>
    )
  }
 
  export const getStaticProps = async (ctx) => {
    //1.blogフォルダに入っている全てのMDXファイルを走査して各記事の`meta`の情報を収集する
    const postDir = path.join(process.cwd(), 'pages/blog/')
    const pathList = fs.readdirSync(postDir)
    const contentsPromise = pathList.map(async (p) => {
      const myModule = await import("../pages/blog/" + p)
      return {
        title: myModule.meta.title,
        tags: myModule.meta.tags,
        imgSrc: myModule.meta.imgSrc,
        date: myModule.meta.date,
        outline: myModule.meta.outline,
        fileName: path.parse(p).name
      }
    })
    const metas = await Promise.all(contentsPromise)

    // 2.収集したmetaの情報を<Blog/>に渡す
    return { props: {metas}} ;
  }

  export default Blog
 

 
 {
  ...
  scripts:{
    ...
    build:"next build && next export"
    ...
  }
  ...
 }