【Next.js × TypeScript】MDX形式のcontentful記事を表示する

Copy
"dependencies": {
    "@emotion/babel-plugin": "^11.9.5",
    "@emotion/react": "^11.9.3",
    "contentful": "^9.1.33",
    "contentful-management": "^10.10.0",
    "contentful-typescript-codegen": "^3.2.3",
    "dotenv": "^16.0.1",
    "eslint-config-prettier": "^8.5.0",
    "next": "12.2.3",
    "next-mdx-remote": "^4.1.0",
    "prettier": "^2.7.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.34.1"
  },
  "devDependencies": {
    "@types/node": "18.6.2",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3",
    "typescript": "4.7.4"
  }

Copy
yarn add next-mdx-remote

Copy
import { css } from '@emotion/react'

export const MDXComponet = () => {
  // mdx用コンポーネント
  const h3 = (props: any) => {
    const h3Style = css`
      margin: 2.8rem 0 1em;
      padding: 8px 0;
      padding-left: 7px;
      border-bottom: 3px solid #c8cbce;
      border-color: rgb(69, 74, 150);
    `
    // Intersection Observer APIで監視する要素のためclassをつける
    return <h3 css={h3Style} {...props} className='highLight' />
  }

  // mdx用コンポーネント
  const h2 = (props: any) => {
    const h2Style = css`
      font-size: 1.125rem;
      font-weight: bold;
      padding-top: 9px;
      padding-bottom: 9px;
      padding-left: 7px;
      border-left: 7px solid black;
      background: rgb(69, 74, 150);
      color: white;
      font-family: 'Noto Sans JP', Roboto, sans-serif;
      line-height: 1.2;
      margin-top: 20px;
      margin-bottom: 20px;
    `

    return <h2 css={h2Style} {...props} />
  }

  // mdx用コンポーネントをオブジェクト化
  const components = { h3, h2 }

  return components
}

Copy
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
import { MDXComponet } from './MDXcomponents'

export const MDXConvert = ({ article }: { article: MDXRemoteSerializeResult }) => {
  return (
    <div>
      <MDXRemote compiledSource={article.compiledSource} components={MDXComponet()} />
    </div>
  )
}

Copy
import type { NextPage } from 'next'
import { Entry } from 'contentful'
import { IBlogPostFields } from '../../@types/generated/contentful'
import { client } from '../utils/contentfulClient'
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemoteSerializeResult } from 'next-mdx-remote'
import { MDXConvert } from '../components/MDXConvert'

// getStaticPropsの戻り値の型定義
interface Props {
  mdx: MDXRemoteSerializeResult
  blogPosts: Entry<IBlogPostFields>
}

// SSGでcontetnfulの記事を取得
export const getStaticProps = async () => {
  // contentfulから記事取得(IDはcontetntfulで調べる)
  const blogPosts: Entry<IBlogPostFields> = await client.getEntry('xxxxxxxxxxxxxxxxxxxxxx')

  // シリアライズ
  const mdxSource: MDXRemoteSerializeResult = await serialize(blogPosts.fields.body || '')

  // 戻り値設定
  return {
    props: {
      blogPosts: blogPosts,
      mdx: mdxSource,
    },
    revalidate: 1,
  }
}

const Home: NextPage<Props> = (props) => {
  // 記事（mdx）を分割代入
  const { mdx }: { mdx: MDXRemoteSerializeResult } = props

  return (
    <>
      <h1>Contetfulの記事(html)</h1>
      <MDXConvert article={mdx} />
    </>
  )
}

export default Home