【Next.js × TypeScript】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",
    "prettier": "^2.7.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "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 contentful contentful-management contentful-typescript-codegen prettier dotenv

Copy
CONTENTFUL_SPACE_ID = xxxxxxxxxxxx
CONTENTFUL_ENVIRONMENT = xxxxxx
CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
CONTENTFUL_DELIVERY_TOKEN = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
CONTENTFUL_PREVIEW_TOKEN = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Copy
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))
}

Copy
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "contentful-typescript-codegen": "contentful-typescript-codegen --output @types/generated/contentful.d.ts"
  },

Copy
$ yarn contentful-typescript-codegen
yarn run v1.22.10
$ contentful-typescript-codegen --output @types/generated/contentful.d.ts
Done in 3.06s.

Copy
// THIS FILE IS AUTOMATICALLY GENERATED. DO NOT MODIFY IT.

import { Asset, Entry } from 'contentful'
import { Document } from '@contentful/rich-text-types'

export interface IBlogPostFields {
  /** タイトル */
  title: string

  /** スラッグ */
  slug: string

  /** アイキャッチ */
  eyeCatch: Asset

  /** 投稿日 */
  publishDate: string

  /** カテゴリ */
  category: string

  /** タグ */
  tags?: ITags[] | undefined

  /** コンテンツ */
  body?: string | undefined

  /** discription */
  discription?: string | undefined
}

export interface IBlogPost extends Entry<IBlogPostFields> {
  sys: {
    id: string
    type: string
    createdAt: string
    updatedAt: string
    locale: string
    contentType: {
      sys: {
        id: 'blogPost'
        linkType: 'ContentType'
        type: 'Link'
      }
    }
  }
}

export interface ITagsFields {
  /** タイトル */
  title: string

  /** スラッグ */
  slug: string
}

export interface ITags extends Entry<ITagsFields> {
  sys: {
    id: string
    type: string
    createdAt: string
    updatedAt: string
    locale: string
    contentType: {
      sys: {
        id: 'tags'
        linkType: 'ContentType'
        type: 'Link'
      }
    }
  }
}

export type CONTENT_TYPE = 'blogPost' | 'tags'

export type LOCALE_CODE = 'en-US'

export type CONTENTFUL_DEFAULT_LOCALE_CODE = 'en-US'

Copy
import { ContentfulClientApi, CreateClientParams, createClient } from 'contentful'

const config: CreateClientParams = {
  space: process.env.CONTENTFUL_SPACE_ID || '',
  accessToken: process.env.CONTENTFUL_DELIVERY_TOKEN || '',
}

export const client: ContentfulClientApi = createClient(config)

Copy
export function createClient(params: CreateClientParams): ContentfulClientApi;

Copy
export interface CreateClientParams {
    space: string;
    accessToken: string;
    environment?: string;
    insecure?: boolean;
    host?: string;
    basePath?: string;
    httpAgent?: any;
    httpsAgent?: any;
    proxy?: AxiosProxyConfig;
    headers?: any;
    adapter?: any;
    application?: string;
    integration?: string;
    resolveLinks?: boolean;
    removeUnresolved?: boolean;
    retryOnError?: boolean;
    logHandler?: (level: ClientLogLevel, data?: any) => void;
    timeout?: number;
    retryLimit?: number;
}

Copy
export interface ContentfulClientApi {
    getAsset(id: string, query?: any): Promise<Asset>;
    getAssets(query?: any): Promise<AssetCollection>;
    getContentType(id: string): Promise<ContentType>;
    getContentTypes(query?: any): Promise<ContentTypeCollection>;
    getEntries<T>(query?: any): Promise<EntryCollection<T>>;
    getEntry<T>(id: string, query?: any): Promise<Entry<T>>;
    getSpace(): Promise<Space>;
    getLocales(): Promise<LocaleCollection>;
    getTag(id: string): Promise<Tag>;
    getTags(query?: any): Promise<TagCollection>;
    parseEntries<T>(raw: any): Promise<EntryCollection<T>>;
    sync(query: any): Promise<SyncCollection>;
}

Copy
import type { NextPage } from 'next'
import { Entry, EntryCollection } from 'contentful'
import { IBlogPostFields } from '../../@types/generated/contentful'
import { client } from '../utils/contentfulClient'

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

// SSGでcontetnfulの記事一覧を取得
export const getStaticProps = async () => {
  const blogPosts = await client.getEntries<IBlogPostFields>({
    content_type: 'blogPost',//content modelのblogPostを取得
    order: '-sys.createdAt',//並び順
  })
  return {
    props: {
      blogPosts: blogPosts,
    },
    revalidate: 1,
  }
}

const Home: NextPage<Props> = (props) => {
  // 分割代入で記事一覧を取得
  const {
    blogPosts: { items },
  } = props

  return (
    <>
      <h1>Contetfulの記事一覧</h1>
      {items.map((item: Entry<IBlogPostFields>) => (
        <div>
          <h1>{item.fields.title}</h1>
          <p>{item.fields.discription}</p>
        </div>
      ))}
    </>
  )
}

export default Home