When I'm not coding, wathing youtube videos or playing game, you'll find me cooking, working out in the park or drinking somewhere.

## はじめに

Next.jsの __9.0__ から登場した __API Routing__ を使って、簡単なAPIを作ってみた。
そのAPIをBFFとして使ってみたので使い方を紹介する。

## API Routingとは

__API Routing__ とはNext.jsで簡単にAPIを作れる機能のこと。
既存のNext.jsのルーティングのように、APIのルーティングもディレクトリの構造で書ける。

```text
pages
 |-- api
 |    |-- posts
 |    |   |-- [slug].tsx
 |    |   |-- index.tsx
 |-- posts.tsx
 |-- index.tsx
 |-- _app.tsx
 |-- _document.tsx
```

上記のように __pagesの下にapiというディレクトリをおくだけて良い__ 。　とても簡単に書ける。
この例だと `/api/posts` と `/api/posts/[slug]` という２つのAPIが作れる。

### 実際の中身

`/api/posts` はContentfulから全てのポストをとってくるAPIだとして書いてみると

```typescript
import type { NextApiRequest, NextApiResponse } from "next";

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const entries = await client.getEntries({
    content_type: "post",
  });

  res.statusCode = 200;
  res.setHeader("Content-type", "application/json");
  res.end(JSON.stringify(entries.items.map((item) => convertPost(item))));
};

const convertPost = (item) => {
  return {
    title: item.fields.title,
    subtitle: item.fields.subtitle,
    body: item.fields.body,
    slug: item.fields.slug,
    publishedAt: item.fields.publishedAt,
  };
};

```

基本的にNodeのAPIサーバーのように書くことができる。
返す値は基本的にJSONにしているが、中身は自分のクライアントに合わせて自由に書けば良い。

### パラメーター付きのAPI

例えば、Contentfulから指定した条件に一致したポストだけを返すAPIを作るとしよう。
`/api/posts/[slug]` というAPIを作るとした場合、このAPIはパスで指定した __[slug]__ でポストを探すAPIになる。

```typescript
import type { NextApiRequest, NextApiResponse } from "next";

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const entries = await client.getEntries({
    content_type: post,
    "fields.slug": req.query.slug,
  });

  res.statusCode = 200;
  res.setHeader("Content-type", "application/json");
  res.end(JSON.stringify(convertPost(entries.items[0])));
};

const convertPost = (item) => {
  return {
    title: item.fields.title,
    subtitle: item.fields.subtitle,
    body: item.fields.body,
    slug: item.fields.slug,
    publishedAt: item.fields.publishedAt,
  };
};
```

__req.query.slug__ でパスで指定した __[slug]__ を取得することができる。
この先の流れは同じく、必要な形に合わせて返してあげるだけで良い。

## 注意点

このブログでもこの __API Routing__ を使ってSSGで作ってるが、いくつか注意する点がある。

- 本当のAPIとしては微妙
- ホスティング先によっては使えない

### 本当のAPIとしては微妙

API Routingとはしてるが、個人的に __WEB APIとして使うのは非推奨__ 。

> Next.jsはあくまでReactを用いること前提のフレームワークであり、APIルーティングはおまけ程度のものです。リクエストメソッドのフィルタリング、リクエストボディのバリデーションなどもすべて自前で記述しなければならないため、本格的なWeb APIサーバを開発するには向きません。

[Qiitaブログ | web-apiフレームワークではないので機能的に貧弱](https://qiita.com/jagaapple/items/faf125e28f8c2860269c#web-api%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E6%A9%9F%E8%83%BD%E7%9A%84%E3%81%AB%E8%B2%A7%E5%BC%B1)

例えば、DBから値を取得したり、認証の処理を行ったり、といったビジネスロジックが多く含まれるようなAPIが必要な場合は、 __API Routing__ は向いてない。 Reactベースではあるので書こうとすれば書けるかも知れないが、あまりおすすめはできない。

個人的にNEXT.jsのAPIは __BFFとして使う__ ことが最適だと思っている。
[BFFってなに？](https://parkpark.dev/posts/what-is-bff)

クライアントサイドで必要なAPIをラップして、使いやすい形にして返してあげる、それ以上のことはしない、ということが自分の使い方。まさにBFFとして使っている。
上に書いたサンプルコードもContentfulのSDKは使っているが、基本的には __ContentfulのAPIを叩いて、形を変えて返す__ だけの __APIコンポジション__ を実現したBFFになる。

### ホスティング先によっては使えない

__API Routing__ は __SSR__ として実現されるので、ホスティング先がSSRを対応してなければ使えなくなる。
実際にnetlifyの場合はサポートしてなく、 __API Routing__ を使えない。

自分ももともとnetlifyを使っていて、この機能を試すためにvercelに移行した。
基本的なホスティングしかしないのでそこまで使い方は違いないが、やはりNEXT.jsの開発元なのでAPI Routingもサポートしてくれていた。


Next.jsのAPIをBFFとして使ってみた。簡単な使い方と注意点を書いてみる。

Next.jsのAPIを使ってみた

ContentfulのSDKの使い方をまとめる。
職場でもContentfulは使ってるからほぼ自分用

## 対応ブラウザーとNode

Supported browsers and Node.js versions
- Chrome
- Firefox
- Edge
- IE11
- Safari
- node.js (LTS)

モダーンブラウザーは対応していて、IE11以上は対応している。
他のブラウザーや古いNode.jsでも一応対応しているようだが、厳密なテストはしてなく、自動テストは通る程度のメンテーをしているようなのでもしかするとちゃんと動かないかも。

## インストール

npmやyarnなどのパターン

```shell
npm install contentful
```

直接差し込むパターン。
特定のバージョンを使う場合は、 `@latest` の代わりに `@8.2.0` のようなバージョンを指定するだけ。
[Contentful Realase](https://github.com/contentful/contentful.js/releases)

```javascript
<script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>
```

IE11や、古いブラウザーの対応が必要な場合は、 `contentful.browser.min.js` の代わりに、 `contentful.legacy.min.js` を指定する。

## CDAを使おう
CDA(Content Delivery API)は、ContentfulのAPIの一つで、内容を取得する際に使うAPI。
記事を読み込んだり、Contentfulから何かをとってくるAPIなのでもっともメインとなる。
`Preview API` というDraftまで扱えるAPIがあるが、基本ベースはCDAと同じで、APIのエンドポイントとアクセストークンだけが変わるので必要によって簡単に使える。

とりあえず、CDAを使うためのClientを作る。
clientを作るには `space` と `accessToken` は必須。

```javascript
const client = require("contentful").createClient({
  space: "spaceId",
  accessToken: "accessToken",
});
```

`createClient` で指定できるオプション一覧。

| Name             | Default                   | Description |
| ---------------- | ------------------------- | ---------- |
| accessToken      |                           | 必須        |
| space            |                           | 必須        |
| environment      | 'master'                  |            |
| host             | 'cdn.contentful.com'      |            |
| basePath         | ''                        | カスタムゲートウェイ/プロキシ用 |
| httpAgent        | undefined                 | [axios request config documentation](https://github.com/mzabriskie/axios#request-config)を参考  |
| httpsAgent       | undefined                 | [axios request config documentation](https://github.com/mzabriskie/axios#request-config)を参考  |
| adapter          | undefined                 | [axios request config documentation](https://github.com/mzabriskie/axios#request-config)を参考  |
| headers          | {}                        |  |
| proxy            | undefined                 | [axios request config documentation](https://github.com/mzabriskie/axios#request-config)を参考  |
| resolveLinks     | true                      | falseにすると、link Resolvingが解除される  |
| removeUnresolved | false                     | 未解決のリンクに対する応答からフィールドを削除する。 |
| retryOnError     | true                      | デフォルトだと、500サーバーエラーや、429 Rate Limitになったらリトライする |
| logHandler       | function (level, data) {} | errors, warningsを処理する際に使う |
| requestLogger    | function (config) {}      | リクエストごとに呼ばれる     |
| responseLogger   | function (response) {}    | レスポンスごとに呼ばれる    |

長くて書ききれなかったが、 `header` には以下の２つが追加される。

```
- Content-Type: application/vnd.contentful.management.v1+json
- X-Contentful-User-Agent: sdk contentful.js/1.2.3; platform node.js/1.2.3; os macOS/1.2.3 (Automatically generated)
```

## Clientからデータを取ってみる

entryIDを指定する方法

```javascript
client.getEntry('<entry_id>')
```

content_typeを指定して、複数のentryを取得

```javascript
client.getEntries({
  content_type: "content_type"
})
```

### Order

特定のフィールドでsortする。

```javascript
client.getEntries({
  order: 'sys.createdAt'
})
```

複数指定もできる

```javascript
client.getEntries({
  order: 'sys.createdAt,sys.id'
})
```

降順のsort

```javascript
client.getEntries({
  order: '-fields.publishedDate'
})
```

orderに指定できるフィールドは `String` , `Date` , `Integer` , `Boolean`

### limit, skip

DBのoffet, limitと同じようなパラメータ
ページネーションなどでよく使われる。

```javascript
client.getEntries({
  skip: 100,
  limit: 200,
  order: 'sys.createdAt'
})
```

`limit` はデフォルトで100, 上限は1000まで。

### select

取得するフィールドを絞る。
カンマ区切りで取得するフィールドを指定できる。

```javascript
client.getEntries({
  select: "fields.slug,sys.createdAt",
});
```

### search

あるフィールドの値を完全一致で取得する。

```javascript
client.getEntries({
  "sys.id": "id"
});
```

`[ne]` をつけると不一致な物を取得できる。

```javascript
client.getEntries({
  "sys.id[ne]": "id",
});
```

上記の２つはテキストフィールドではサポートされてない。
テキストフィールドで扱いたい場合は `content_type` と組み合わせる必要がある。

指定したフィールドが配列の場合、配列の中で、一つでも一致するEntryを取得できる。
配列の `[ne]` は、複数の中で一つでも一致しないものだけを返す。
検索対象が `fields` の場合は、 `content_type` を指定する必要がある。

複数指定した中で、全部一致したEntryだけを返すのは `[all]` を使う

```javascript
client.getEntries({
  "content_type": "post",
  "fields.tags[all]": "flowers,accessories",
});
```

複数指定した中で、一つでも一致したEntryだけを返す

```javascript
client.getEntries({
  "content_type": "post",
  "fields.tags[in]": "flowers,accessories",
});
```

複数指定してフィルタリングする

```javascript
client.getEntries({
  "content_type": "post",
  "fields.tags[nin]": "flowers,accessories",
});
```

指定したフィールドに何かが入っているか否かでフィルタリングする。
何かの値が入っていたら `true` 、 何も入ってないまたはフィールドが定義されてない場合は `false` になる。

ちなみに `True` `False` などの大文字で入れるとダメみたい。

```javascript
client.getEntries({
  "content_type": "post",
  "fields.tags[exists]": true,
});
```

### Ranges

範囲の指定は以下の４つ。
検索対象のフィールドは `Date` や `Number` 型で指定する。

- `[lt]`  : より小さい
- `[lte]` : 以下
- `[gt]`  : より大きい
- `[gte]` : 以上

### text query

queryで指定すると、全フィールドを対象に検索をかけられる。
グローバルな全文検索は全てのロケールからテキストや記号の検索ができる。
テキスト検索は大文字と小文字の区分をしないので、予想以上のEntryがくるかも知れない。
指定できる文字列は２文字以上。

```javascript
client.getEntries({
  query: "design",
});
```

`[match]` を使うと、特定のフィールドで文字列検索ができる。

```javascript
client.getEntries({
  "fields.website[match]": "design",
});
```

## まとめ

チートシートって書いてあるが、全ての仕様を網羅してるわけではなくなった。
でもよく使うのはCDAで、その中で自分でよく使えそうな機能だけはまとめてみた。
追加で必要になったりするとアップデートしていく予定。
