ブログを改修した

表題の通り、本ブログを全体的に変更しました。そこまで大きな変更はしていないけれど取り組んだことを挙げていきます。

Netlify → Vercel

もともとNext.jsで組んだアプリケーションをNetlifyにデプロイしていましたが、さすがにVercelに移行しました。Github Actions からデプロイするようにしたことで、意識することが少なくなり、非常に楽です。

実行しているdeploy.yml は↓のような感じ。

name: Deploy
on:
    push:
        branches:
            - master
jobs:
    deploy:
        runs-on: ubuntu-latest
        strategy:
            matrix:
                node-version: [14.x]
        steps:
            - name: Checkout
              uses: actions/checkout@v2
            - name: Use Node.js 14.x
              uses: actions/setup-node@v2.1.5
              with:
                  node-version: ${{ matrix.node-version }}
            - name: Create .env file
              run: |
                  echo "ENV=PRODUCTION" >> .env
                  echo "CONTENTFUL_SPACE=${{ secrets.CONTENTFUL_SPACE }}" >> .env
                  echo "CONTENTFUL_ACCESS_TOKEN=${{ secrets.CONTENTFUL_ACCESS_TOKEN }}" >> .env
                  echo "NEXT_PUBLIC_GA_ID=${{ secrets.NEXT_PUBLIC_GA_ID }}" >> .env
            - name: Deploy
              uses: amondnet/vercel-action@v20.0.0
              with:
                  vercel-token: ${{ secrets.VERCEL_TOKEN }}
                  github-token: ${{ secrets.GIT_TOKEN }}
                  vercel-args: '--prod -f -b TZ=Asia/Tokyo'
                  vercel-org-id: ${{ secrets.ORG_ID }}
                  vercel-project-id: ${{ secrets.PROJECT_ID }}

デザインの変更

全体的に明るいテーマにしました。余白も見直して統一感を出しています。明るいテーマにしたのはなんとなく気分です。デザインは、学習目的でFigmaを触るところから始めました。FigmaはVariantとAutoLayoutがとっても便利で感動しました。Photoshopでページ作ってた時代もあったな...。

また、テーマファイルの整理も行いました。全体的な余白やカラーの変更をモジュール管理することで、変更しやすくしました。これは今後、テーマ切り替えを実装するための準備です。

記事ページはのMarkdown部分は、最初 github-flavored-markdown を使っていましたが、余白やサイズが微妙に合いませんでした。結局、Markdownの各コンポーネントを自作し、テーマに沿ったcssスタイルを当てるようにしました。多少は記事が読みやすくなったかなという感じです。

ページネーションの追加

ブログの記事が今後増えていった場合を想定し、ページネーションを入れました。

もともと、ブログの一覧ページ・詳細ページではNext.jsのISRを使っていましたが、今回ISRはやめてクライアントサイドでAPIを叩くようにしました。ISRをやめたのは、クエリパラメータでページを切り替えるようにするにあたり、Next.jsのgetStaticPropsでlocation.hrefを使う必要があり、getStaticPropsでは当然locationは使えないため、うまくやれる方法が見い出せずやめました。

代わりにSWRを使うようにして、キャッシュを効かせてパフォーマンスを向上させています。初期ロードは多少遅くなったかもしれませんが、一度キャッシュすれば一瞬で表示されるようになりました。これはもともとそこまで重い処理がないページなので良しとしています。

また、APIも自分でRepository層を作っていましたが、Next/APIの機構に寄せることで簡略化できました。

細かいところは省略していますが、APIは以下のようにしています。

// src/pages/api/blogPosts.ts

import { NextApiRequest, NextApiResponse } from 'next'
import { EntryCollection } from 'contentful'
import contentful from '../../adapter/contentful'
import BlogPost from '../../entities/BlogPost'

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const { pageIndex = '0', limit = '5' } = req.query
    const data = await contentful.getEntries<EntryCollection<BlogPost>>({
        content_type: 'post',
        skip: parseInt(pageIndex as string) * parseInt(limit as string),
        limit: limit,
        order: '-sys.createdAt',
    })

    res.statusCode = 200
    res.setHeader('Content-Type', 'application/json')
    res.end(JSON.stringify(data))
}

APIを呼び出すコンポーネントは以下のようにしています。

// src/views/pages/BlogPostPage/BlogPostPage.tsx

const BlogPostPage: VFC = () => {
    const router = useRouter()
    const { blogPostId } = router.query
    const { data } = useSWR<Entry<BlogPost>>(`/api/post/${blogPostId}`, fetcher)

    return (
      // ブログの記事コンポーネント
    )
}

Table of Contents の追加

記事の全体像を把握できるよう、記事ページの右カラムにTable of Contents（目次）を追加しました。h2~h3の見出しを対象にリスト化し、項目をクリックすると、対象の見出しまでスクロールします。（モバイル端末では表示していません）

実装自体はかなり泥臭く、 document.querySelectorAll('h2, h3') で対象の見出しを取得してからリスト部分を作っています。クリック時にはスクロールをさせるため、見出しにIDを付与する必要がありました。見出しに付与するIDの生成は、 ${Children.toArray(children).reduce(flatten, '')}-${index} のようにして無理やり作っています。うう...苦しい。

Aboutの文言を修正

Aboutページでは、昨年10月に転職したこともあり、Timelineのセクションを追加し、情報を加筆修正しました。最近写真が最近好きなので、instagramのリンクなども増やしています。

今後実装したいこと