Zenn
⛳

Contentfulに入門してみた(記事を取得してmarkdown-itでレンダリングまでしてみた)

2021/06/08に公開
Contentful
markdown-it
tech

はじめに

前回、Contentfulとは何か、について色々調べてまとめてみたので、次は実際に動かして見ることにしました。

やってみたこと

とりあえずContentfulを使ってみて、markdown-itを入れてみた。

Contentfulのセットアップ

spaceを作る

自分個人のアカウントを作って適当に

Content modelを作る

必要そうな項目を適当に入れる

  • post
    • title: Short text
    • sub title: Short text
    • slug: Short text
    • date: Date & time
    • author: Reference(author)
      • Name: Short text
      • Image: Media
    • coverImage: Media
    • markdown: Long text

markdownはこんな感じで入れる

Contentを作る

一旦これを入れる

# 見出し1

## 見出し2

### 見出し3

#### 見出し4

サンプル文章サンプル文章サンプル文章

- 箇条書き 1
- 箇条書き 2
    - 箇条書き 2-1
    - 箇条書き 2-2
- 箇条書き 3

### コードブロック

```
public class Test {
  public void foo() {}
}
```

Nextアプリのセットアップ

  • create-next-appでスケルトンを生成し、必要なライブラリを追加します
npx create-next-app test
yarn add contentful
yarn add markdown-it
vim pages/index.js
  • index.jsを編集します
pages/index.js
import React, { useEffect, useState } from 'react';
import * as contentful from 'contentful';
const md = require('markdown-it')()

export default function Home() {
  const client = contentful.createClient({
    space: '<space情報>', // 自分のspace設定
    accessToken: '<accessToken情報>' // 自分のaccessToken
  })

  const [blogs, setBlogs] = useState([])
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(async() =>{
    const response = await client.getEntries({
      content_type: "post"
    })
    setBlogs(response.items);
    setIsLoaded(true)
  },[isLoaded])

  console.log({blogs})
  return (
    <div>
      <p>投稿一覧</p>
      <ul>
        {blogs.map(item => (
          <>
            <li>{item.fields.title}</li>
            <div dangerouslySetInnerHTML={{__html: md.render(item.fields.contentMd)}}></div>
          </>
        ))}
      </ul>
    </div>
  )
}

space, accesstokenは運用画面のココから取得できます

  • 動作確認
$ cd test
$ yarn dev

サーバを起動してアクセスしてみます。以下の様にスタイリングされています。うまくいきました。

まとめ

  • contentfulのaccess tokenを使って、API経由で簡単に記事データが取れる
  • markdown-itを使うとmarkdownを簡単にスタイリングできる

Discussion