Next.jsでContentfulを使う（前半）

# 最初に
Contentfulの概要や、インストールからAPIとの連携までをまとめます。
必要なところから読んで下さい～。:writing_hand_tone2:

APIから情報を取得して表示は後半にまとめようと思います。
# 記事を書いた経緯
Contentfulを使ってみようと調べるとTypescriptな記事が多かったので、Typescriptを使っていない私のような人向けにまとめておきました。
おそらくTypescriptと大きく変わりありませんが、Contentful自体に慣れていない段階でTypescriptの部分をどう削っていいのかわからず困ったので。自分のためにもまとめます。

さて、
Next.jsとContentfulを使ってブログを作っていきます！
機能はブログ記事と、1行日記を表示します。


# 概要
Contentfulはヘッドレス CMSの一つ。
## ヘッドレスCMSとは？
ブログ作れるCMSといえば、WordPress！
ですが、WordPressで作ったブログしか管理できません。
そこでContentfulなどのヘッッドレスCMSを使うと、自分で作ったサイトの管理ができる。
フロントは自分で作って、ブログの投稿や編集はContentfulから。ということが可能！
管理画面作るのってすごく大変だと思うので、便利！（管理画面作ったことないですけど）

# Contentful側の準備
Contentfulのアカウントを作成し、Space、Content model、ContentType、Contentを作成していきます。
これらはContentfulのAPI。
それぞれディレクトリのような関係。
それぞれの詳細な情報は下記
[Contentful 公式reference](https://www.contentful.com/developers/docs/references/content-management-api/#/reference/spaces)
読んでも難しいので、実際に作ってみて雰囲気をつかむほうが早いです！

## Spaceの作成
スペースとは、ContentfulのAPIを保存しておく場所。
アプリ1つにつき1つのスペースが必要。
実は、アカウントを作成した時点でSpaceは自動で作成されている。
2つ目からは課金してください！

ログインして表示されるダッシュボードのページ内左上部の自分の名前が表示されているところをクリックすると下記のメニューが表示される。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/053311cc-3faf-952f-890c-10b451aec1f8.png">
Blankという名前のSpaceが作成されていることがわかる。
## ContentModelの作成
どんなコンテンツの種類があるか管理する、Content Model を作ります。
作成したい機能は1行日記とブログ記事なので、2つContentmodelを作成する。
ヘッダーからContent modelを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/4b0d9007-859d-fa34-168f-a85d125441d8.png)
右上のAdd Content typeボタンを押下。
必要な情報を入力していく。自分が管理しやすいようわかりやすいものに。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/95733b80-d5f0-a08b-7a0a-0b474e034acc.png">
## Fieldの追加
ContentType作成後に表示される画面右上のAdd fieldボタンから必要なデータの種類を選択してfieldを作成していく。
例えば、1行日記に必要なデータは短いTextデータ1つ。
ブログ記事にはタイトル文、ブログ本文（リッチテキスト）、ブログサムネイル画像。。。など
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/ed3835f6-bc59-3086-adaf-99a8b7bb8506.png">

なんの目的で使うデータなのか明確にするNameや、最大文字数など適切なtypeを選択する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/77bcbdfb-d451-f9c0-d596-4bb52cfeaae6.png" width="500">

## Contentの追加
ヘッダーメニューからContentを選択
右下に先程作成したContentTypeが表示されているので、編集したいものを選ぶ。
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/0163f59e-86bd-98fd-b33e-6ca6d237d252.png">
画面右上の「Add Entry」から、投稿内容を入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/39d343de-6585-a8f3-37c1-e77df54660aa.png)
画面右側のPublishで公開/非公開/予定投稿を切り替えできる。

# Contentfulとアプリの設定
表示したいコンテンツの登録が終わったので、Contentfulをアプリと紐づけていきます。
## 前提
Next.jsアプリを作成済み
Next.jsの構築？はこちらを参照してね→[Next.jsの始め方](https://qiita.com/aliceroot0678/items/779eca8a1d89db8e8db0#nextjs%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B)
## インストール
[contentful公式](https://www.contentful.com/developers/docs/tutorials/general/get-started/)

自分のNext.jsのアプリ内の任意の場所でnpmインストール

```terminal
npm install contentful
```

しばらくかかる。:hourglass:
`added packages`的なテキストが表示される。
（終わった・・・のか？と思っちゃうので、もっと派手にわかりやすく:beers:とか、:tada:終わったことを伝えてほしいと個人的には思う。）
```package.json```ファイルのdependenciesの欄に*contentful*と追記されているのを確認できます。
:point_down::point_down::point_down::point_down:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/6ae5b3d8-0471-7426-b117-d7b632e008d9.png)


## APIとの接続設定
Contentufulとアプリを接続するために`SPACEID`と`AccessToken`が必要。
ヘッダーメニュー＞Settings＞Space Settings＞APIKeys＞Spaceを選択して下記の画面からコピーする。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/60c9c86f-66e7-10fc-6a55-1d4843ca102c.png" >
### 環境変数の設定
.envファイルがなければ作成。
先程コピーした`SPACEID`と`AccessToken`をペーストする。
```js:.env
CTF_SPACE_ID="XXXXXXXXX"
CTF_CDA_ACCESS_TOKEN="XXXXX-XXXXXXXXXXX_XXX"
```
### 設定ファイルの編集

`contentful.js`ファイルを作成。（ファイル名は任意）
```js:contentful.js
import * as contentful from 'contentful'
const config = {
    space: process.env.CTF_SPACE_ID,
    accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}

export const createClient = () => {
    return contentful.createClient(config)
}
```

# 最後に
APIとアプリの設定は以上です！:beers:
記事を読んでいただきありがとうございました。誤っている点があればご指摘いただけると幸いです。
後半では、実際にAPIから取得したデータをフロントに表示するとこを書きたいなーーー（いつか。。。）
APIを使うのは初めてだったのですが、Contentfulからもらうデータの階層が深くて嫌になりそうでした 笑
大したことはないんだろうなぁ・・・

## 参考にした記事
下記の記事達を大いに参考にしました。ありがとうございます！

https://zenn.dev/panyoriokome/scraps/078396c329f25c

https://blog.chick-p.work/blog/contentful-nextjs-blog#space-%E3%82%92%E4%BD%9C%E3%82%8B