What is this blog Read me?

Architect: Node.js React library Nexet.js TypeScript

State management: Recoil

CMS: Contentful

Host: Vercel etc.

  • 記事一覧
  • まず、マークダウンにも挑戦しましたがTypeScriptでの実装が難しかったためHeadlessCMSのAPIを使いました。

    Next.jsの場合CMS APIファイルを作りgetStaticPropsを叩くだけで一覧ページは作ることができます。
  • 記事詳細
  • getStaticPathsが登場します。
    Pathsを指定することによってダイナミックルーティングとしてブラケット[slug]のような動的に変更されるページを実現します。

  • ページネーション
  • map関数を用いてページの総数を1ページに表示したい数字で割ります。

  • ハンバーガーメニューボタン
  • useStateを使用します。aria-expandでscssでのtrue/falseでトグルとして発火させます。

  • モバイルメニュー展開
  • レスポンシブ対応
  • ダークモード(ローカルストレージ)
  • お問合せ
  • nodemailerを使用しました。

  • ホバーで伸びるアクティブで止まるボーダー
  • 発火管理ができる透明なフィルターコンポーネント
  • フレームモーションコンポーネント
  • ダイナミックOGP(VercelAPIを使用)
  • Zenn.devやQiitaを使うことも考えたのですがあちらはコード専用な感じな気がしたので
    もっというと日常的なことも書きたい日記にしたかったので手作りしました。

    普段はプログラミング以外はねこと遊んだりもしているので気軽に話しかけたりコンタクト送ってくださいね。