## ドキュメント

- [intercom/contentful-typescript-codegen: Generate TypeScript interfaces from a Contentful environment](https://github.com/intercom/contentful-typescript-codegen)
    - 使用したライブラリ
- [Contentfulで型安全にコンテンツを取得する](https://silurus.dev/article/7DJobP47XUTkDjNavzyf2s)

## インストール

```bash
yarn add contentful
yarn add -D contentful-management dotenv contentful-typescript-codegen @contentful/rich-text-types
```

```bash
npm install contentful
npm install --save-dev dotenv contentful-management contentful-typescript-codegen @contentful/rich-text-types
```

## 実装

`.env`を作成し、各値を設定する。

```.env
CONTENTFUL_SPACE_ID=
CONTENTFUL_ENVIRONMENT=
CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN=
```

プロジェクトルートに`getContentfulEnvironment.js`を作成する。

```getContentfulEnvironment.js
require('dotenv').config();
const contentfulManagement = require('contentful-management');

module.exports = function () {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: process.env.CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN,
  });

  return contentfulClient
    .getSpace(process.env.CONTENTFUL_SPACE_ID)
    .then((space) => space.getEnvironment(process.env.CONTENTFUL_ENVIRONMENT));
};
```

`package.json`のscriptを追記する。

```json
"scripts": {
  "contentful-typescript-codegen": "contentful-typescript-codegen --output @types/generated/contentful.d.ts"
}
```

## 実行

```bash
yarn contentful-typescript-codegen
```

実行すると、`@types/generated/contentful.d.ts`が生成される。

いくつか要らないContent Typeも入っていたので、消した 🤢

## 使用の一例(Next.js)

```jsx
import { IArticle, IArticleFields } from '@/@types/generated/contentful';

interface Props {
	articles: IArticle[];
}

export default unction IndexPage({ articles }: Props) {
	....
}

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  const articles = await client.getEntries({
    content_type: 'article'
  });

  return {
    props: {
      articles: articles.items,
    },
  };
};
```

Contentful の Content Type を型定義する

## エラー

ContentfulとNext.jsで`next-sitemap`を使用し、`sitemap.xml` を生成していたら、

```
[FATAL] PCDATA invalid Char value 28 in (line: 37, column: 33)
```

というエラーが発生していた。

## 原因

`sitemap.xml`を生成する時に使用している`slug`というContentfulのエントリに`\b`(1文字分戻る)という文字列が入っており、そこでエラーになっていた。

Contentfulのダッシュボードからは目視で確認できず、コピーしてペーストすると確認できた。

## デバッグ

`sitemap.xml.js`を作り、落ちている箇所で`console.log()`出力し、確認した。

Contentful × Next.js [FATAL] PCDATA invalid Char value

## 動機

元々このサイトはNuxtJSで構築していたが、TaiwindCSSのHeadlessUIが使いたいので、NextJSでブログを構築してみる。（NuxtJSのVue3対応は楽しみ。）あと、NextJSはTypeScriptのサポートや最近のAPIサービスのチュートリアルが充実しているので楽しみ。
\
また、CSSの独自実装が増えると管理が大変だったので、極力Tailwind一本にしたい。デザイン(CSSを含む)の知識がない中で、悩みながら実装するとかなり時間がかかるし、汚いコードが生成される。諦めてCSS Framworkに任せて、本当に実装したいデザインなどは腰を据えて取り組んだ方が良さそう。

## やること

- Contentfulと統合
- TailwindCSSと統合
- Google Analyticsと統合
- Vercelにデプロイ

※TypeScriptとテスト関連も後々入れてみたい。

## Pagesの構成

- `/index.js`
- `/page/[page].js`
- `/tag/[slug]/index.js`
- `/tag/[slug]/page/[page].js`
- `/category/[slug].index.js`
- `/category/[slug]/page/[page].js`
- `/[slug].js`

## NextJSとContentfulの統合

- [Next.jsとContentfulを統合する](https://www.netlify.com/blog/2020/08/17/integrate-next.js-contentful/)

`@/lib/contentful.js`

```js
const contentful = require("contentful")
const config = {
  space: process.env.CONTENTFUL_SPACE,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
}
const client = contentful.createClient(config)
export default client
```

```js
import client from '@/lib/contentful'

export async function getStaticProps() {
  await client.getEntries({
    content_type: 'post'
  })
  ...
}
```

- [Getting Started with Contentful and JavaScript](https://www.contentful.com/developers/docs/javascript/tutorials/using-js-cda-sdk/)

## next/linkを使う

```js
import Link from 'next/link'

function Home() {
  return (
    <Link href={article.slug}>
    　　<a>Home</a>
    </Link>
  )
}
```

- [next/link](https://nextjs.org/docs/api-reference/next/link)

## getStaticPaths()

Pre Rendering(SSG)で生成する必要のあるページはこの関数を使用する。ビルド時に実行される。

```js
export async function getStaticPaths() {
}
```

## getStaticProps()

こちらもビルド時に実行される。おそらく`getStaticPaths`で取得したPATHからparamsをどんどん取得していくんだと思う。

```js
export async function getStaticProps() {
}
```

## Objects are not valid as a React child

`Objects are not valid as a React child`

下記のような形でobjectを表示しようとしていたら、エラーが発生した。ちゃんと`article .fields.title`で表示したら直った。

```js
function Article({ article }) {
  return (
    <div>{article}</div>
  )
}
```

- [Next.jsを使用したMarkdown / MDX](https://nextjs.org/blog/markdown)

## NextJS markdown

[remarkjs/react-markdown](https://github.com/remarkjs/react-markdown)を使用する。[Dynamic Routes](https://nextjs.org/learn/basics/dynamic-routes/render-markdown)も参考にした。

```js
/* Use `…/dist/cjs/…` if you’re not in ESM! */
// import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
import {dark} from 'react-syntax-highlighter/dist/cjs/styles/prism'
```

`react-syntax-highlighter/dist/cjs/styles/prism`を覗くとめちゃめちゃあった。`node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.js`にexportが記載されているので、色々importしてみる。

`ex) vscDarkPlus`

- [PrismJS  examples](https://prismjs.com/examples.html)

### お気に入りPrismJSテーマのメモ

自分で設定してみても面白そう。

- nord
- materialOceanic
- materialLight: darkmodeの場合など
- materialDark
- dracula
- coldarkDark: かなり見やすい
- coldarkCold
- atomDark
- tomorrow

あと、コピー、行数、ファイル名、タブも実装してみたい。

## `<></>`

コンポーネントのルートの要素に困ったときに使っている。

```js
function SomePage() {
  return (
    <>
    </>
  )
}
```

## Sassの導入

[sass-support](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)

```bash
npm install sass
```

`next.config.js`にsassコンパイラの設定を書く。

## ESLintとPrettierのインストール

- [Setting up ESLint and Prettier For Your Next.js Project](https://xenox.dev/setting-up-eslint-and-prettier-for-next-js-project/)

## モバイルのレスポンシブ

- width100% + paddingの部分が適用されるのでかくつく

## remについて

HTMLタグのfont-sizeを基準として動く。

## 可愛いサイトを見つけた

- [frendly](https://frendly.dev/)

## NetlifyにGoogle Analyticsしたままだったら。。。

Google検索で表示されなかった。スマホだと表示されていた。Netlifyのサイトを消したら表示できた。

## 感想

TailwindCSS使ったら実装早くなる。あと　Next.js×Vercel早いし、楽ちんやで。


Next.jsとContentfulを統合する

今回は、Nuxt.jsで動的ページのHTML生成について解説していきます。
動的ページのHTMLを生成することは、いくつかメリットがあるので丁寧にご紹介します。

## 動的ページとは？

このブログを例に出すと、動的なページは以下のようなページがあります。
同じURL構成でもパラメーターによって内容が変化するページのことです。

- `_slug` → 記事ページ
- `/category/_slug` → カテゴリーページ
- `/tag/_slug` → タグページ

Nuxt.jsでは、`_〇〇`というVueファイルで動的なページが作れます。

## Nuxt.jsアプリケーションのモード変更

動的ページをHTML出力するには、`nuxt.config.js`の`generate`プロパティで明示的に生成する必要があります。またSPAの場合ページ遷移しないのでNuxt.jsの設定をSSRに変更します。Nuxt.jsをSPAで構築したい方は不要です。

```js
export default {
  ssr: true
}
```

これでSPAのアプリケーションから、各ページにHTMLを返すSSRのアプリケーションになりました。

## 動的ページをHTML生成する

動的ページのHTMLを生成するには、`nuxt.config.js`の[routes()](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate/#routes)を編集する必要があります。

```js
generate: {
  routes() {
    return [
      '/nuxt-dynamic-page', // 記事ページ
      '/category/web', // カテゴリーページ
      '/tag/nuxt' // タグページ
    ]
  }
}
```

基本的な形は上記の通りです。`routes`にURLをArrayで返すとHTMLを生成してくれるようになります。
\
`nuxt.config.js`内でContentfulなどHeadlessCMSから取得したデータから生成することもできます。こちらが一般的な使われ方でしょう。

```js
// contentfulのライブラリをインポート
const client = require("./plugins/contentful").default
...
async routes() {
  const routes = []

  // 記事モデルのデータを取得
  const articles = await client.getEntries({
    content_type: "articles"
  })

  articles.items.forEach((article) => {
    routes.push({
      route: `/${article.fields.slug}`, // 記事のURL
      payload: { article: article }, // 記事のデータ
    })
  })

  return routes
}
```

上記のように`payload`を各ページに渡すことができます。`payload`に予めデータを渡すことで対象のVueファイルのデータ取得APIを節約することができます。
\
Vueファイルで`payload`を受け取る場合は、以下のような形になります。

```js
export default {
  async asyncData({ payload }) {
    if (payload)
      return { article: payload.article }

    // 通常、APIでデータを取得する処理
    ...
  }
}
```

`payload`は複数渡せるので、細かな設定もすることができます。
\
また、HTMLを生成したくないURLには、[exclude](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate/#exclude)オプションを使い正規表現で指定することができます。

## SSRアプリケーションにするメリット

最後にSSRアプリケーションにするメリットを紹介します。
\
※JAMStackブログの場合「バックエンド」と呼べるものはないので、SSRではなく静的サイトと呼ぶのが正しいかもしれません。ContentfulやAlgoliaなどのCMSやAPIサービスがバックエンドと呼べるかもしれません。

- 予めデータを用意しておくことで、APIのリクエスト回数を減らすことができる
- 各ページにHTMLファイルを用意することでクローラーが理解しやすくなる
- SPAアプリケーションと比較して、初期表示が早くなる
- セキュリティを考慮すると、安全性が高いとされる

上記が主なメリットです。ブログのようなサービスの場合はSSRにしておいた方が良いでしょう。

### SPAのメリット

比較のためSPAのメリットを紹介しておきます。

- 初期表示以外の動作が早い
- 遷移しないので、データを保持し続けられる

Webアプリケーションは採用される機会が多いかもしれません。

<div class="sen"></div>

以上、Nuxt.jsで動的ページのHTML生成について解説してきました。
最初は難しいかもしれませんが、手を動かして少しずつデバッグ&修正していくことで理解が深まってきます。
最近では魅力的な静的サイトジェネレーターやHeadlessCMS、APIサービスなどがどんどん開発されてきているので、様々な手法で構築・研究してみてください！

今回は、Nuxt.jsで動的ページのHTML生成について解説していきます。
動的ページのHTMLを生成することは、いくつかメリットがあるので丁寧にご紹介します。