Overview

キーワード検索で投稿一覧を取得の実装

TODOs

Feature

• Algolia と疎通する
• Algolia Apiを利用して指定ワードの投稿を取得する

UI

• 検索ページの表示
  • ページコンポーネントの実装
  • スクリーンコンポーネントの実装
  • 検索キーワード入力フォームの実装
  • 検索結果コンポーネントの実装
  • ページネーションの実装

Reference

• React / Next.js に algolia を導入して検索機能を追加しよう
• How to add Algolia InstantSearch to your Next.js application
• Enhancing search experience with Algolia

Overview

記事を検索できる

Issues

• #23

Overview

ホーム画面を表示する

Issues

• #10
• #24
• #16
• #17

Overview

タグ一覧を取得する

TODOs

• タグ一覧を取得する

Overview

投稿一覧を表示するページの実装をする

TODOs

機能実装

• APIから投稿データを一覧で取得する
• ページネーションの実装

UI実装

• 投稿一覧用コンポーネント
• ページネーション用コンポーネント

Overview

なんらかのエラー時にエラーページを表示する

Overview

記事データをAPIから取得して画面に表示する

TODOs

• contentfulパッケージのインストール
• dotenv パッケージのインストール
• .envファイルに以下のキーを設定
  • CONTENTFUL_SPACE_ID
  • CONTENTFUL_DELIVERY_ACCESS_TOKEN
  • CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN
• contentful用のcodegenの設定
• API Client を設定する
• Domainに型を定義する
• fetcherを定義する

Contentful側の設定

• contentfulを利用した手順を記載する

Artifact

https://github.com/kiiiyo/compose-starter-for-media/wiki/Getting-started

Note

• SWR
• Building a website with Compose in Next.js
• Contentful のレスポンスを TypeScript で取得する方法

Overview

利用するHeadlessCMSの調査をする

TODOs

• Webhook を利用してalgoliaと連携できるか調査する

Artifact

• 連携できることが確認できた、以下に設定方法を記載した
  • How to connect algolia for contentful

Note

• Contentfulの記事をAlgoliaのインデックスに登録する
• Next.js + Algoliaで全文検索UIを実装する
• Webhook発行元がmicroCMSであることを検証可能になりました

Overview

開発環境の整備に関するタスクを対応する

Issues

• #1
• #2
• #3
• #5
• #6
• #7
• #8
• #9

Overview

個別投稿ページを実装する

TODOs

Feature

• 個別データの取得

UI

• ページの実装
• コンポーネントの実装
  • テンプレートコンポーネントの定義
  • スクリーンコンポーネントの定義

Overview

記事一覧にページネーションを実装する

TODOs

• ページネーションの実装
• 動作用のUIを実装

Reference

• Next.js(SSG)でページネーションを実装してみよう
• Next.js × microCMS におけるページングの実装方法
• Next.js × microCMSでページング「react-paginate」を使っての実装方法
• Reactでページネーションを実装
• Pagination components with React and Tailwind CSS

• Data fetching in Next.js — How To Use SWR
• Can I use 'useSWR' with the contentful-client to create pagination?
• Paginating your Contentful blog posts in Next.js with the GraphQL API

Overview

Next.js 環境でアイコンをレンダリングで切るように設定する

Note

packageのインストール

• yarn add @fortawesome/fontawesome-svg-core
• yarn add @fortawesome/free-brands-svg-icons
• yarn add @fortawesome/free-solid-svg-icons
• yarn add @fortawesome/react-fontawesome

コンポーネントサンプル

import * as React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { findIconDefinition, library } from '@fortawesome/fontawesome-svg-core'
//import { IconName, IconSize } from '../../../../@types/fortawesome'

library.add(fab, fas)

export type IconSize =
  | 'xs'
  | 'lg'
  | 'sm'
  | '1x'
  | '2x'
  | '3x'
  | '4x'
  | '5x'
  | '6x'
  | '7x'
  | '8x'
  | '9x'
  | '10x'

export type IconName =
  | 'arrow-right'
  | 'arrow-left'
  | 'github'
  | 'twitter'
  | 'facebook-square'

type IconProps = {
  size?: IconSize
  prefix: 'fas' | 'fab'
  name: IconName
}

export const IconPresenter = (props: IconProps) => {
  const { name, prefix, size } = props
  return (
    <FontAwesomeIcon
      icon={findIconDefinition({ prefix, iconName: name })}
      size={size || 'sm'}
    />
  )
}

export const Icon: React.FC<IconProps> = ({ ...props }) => {
  return <IconPresenter {...props} />
}

レンダリング時一瞬大きくなる問題

// pages/_app.tsx

import '@fortawesome/fontawesome-svg-core/styles.css'

Reference

• https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

Overview

グローバルスタイルの設定

TODOs

• TBD

Overview

カテゴリー一覧を表示する

Overview

投稿データ表示用のコンポーネント実装

TODOs

• TBD

Overview

Tailwind CSS の設定

Artifact

Note

• -D tailwindcss@latest postcss@latest autoprefixer@latest のパッケージをインストール

Reference

• https://tailwindcss.com/docs/guides/nextjs

Overview

タグ一覧用コンポーネントの実装

Overview

グローバルナビゲーションの構築

TODOs

• Desktop 用レイアウト
• Mobile 用レイアウト

Note

• TBD

#Overview

個別を表示する

Issues

• #35

Overview

TODOs

• カテゴリー一覧のデータを取得する

Overview

Lint関連の設定を行う

Artifact

Note

• yarn add -D eslint prettier でベースのpackageをインストール
• yarn add -D eslint-config-prettier
• .eslintrc.jsonに 設定を記載
• .prettierrc.jsonに 設定を記載

Reference

• https://fwywd.com/tech/next-eslint-prettier

Overview

Reference

• React / Next.js に algolia を導入して検索機能を追加しよう

Overview

Next.js のセットアップを行う

Artifact

https://starter-template-for-media.vercel.app/

Note

• node version を14.15.0に固定
• package.jsonに各モジュールをインストール
• TypeScriptからビルドできるように設定
• yarn dev が実行できることを確認
• now を利用したCIサービスを設定

Overview

Reference形式の投稿データの取得を実装する

TODOs

• 指定カテゴリーに関連する投稿一覧を取得する
• 指定タグに関連する投稿一覧を取得する

Overview

Storybookの実行環境を構築する

TODOs

• ローカル環境にstorybook実行環境を構築する
• VercelにStorybookをホスティングする
• tailwind を Storybookで利用できるようにする

Note

Vercelの設定方法

Reference

• StorybookをVercelでホスティングするのが便利すぎる
• Next.js + TailwindCSS + Storybookプロジェクトセットアップ

Overview

Next.js 側で取得APIを実装する

TODOs

• page/api/posts の実装
• page/api/posts/[slug] の実装
• unit テストの実装

Overview

Vercelのsetup内容をwiki記載する

TODOs

• ビルド設定など

Overview

ベースレイアウトの構築する

TODOs

• グローバルナビゲーション実装
  • Desktop用
  • Mobile用 (開閉実装)
• メインエリアの実装
  • Desktop用
  • Mobile用
• グローバルフッターの実装

Note

レイアウトサンプル
https://tailwindcomponents.com/component/blog-page/landing#

Overview

指定カテゴリーの記事一覧を表示する

TODOs

UI

• 指定カテゴリーの表示
  • 関連記事一覧を表示
  • ページネーション
• エンプティステート

Overview

RSS のフィードを配信することができる

Overview

TODOs

• カテゴリー一覧用コンポーネントの実装