Main featured image

Next/TypeScript/Material-UI/Vercelでブログ始めました

Next.js
TypeScript
Material-UI
Vercel

2021 年 を迎え、まったりと技術発信 blog というより備忘録を付けようと思います。

この blog は Next/TypeScript で実装、デザインは Material-UI で組み、Vercel でホスティングしています。

TODO リスト

この blog はフルスクラッチで実装している為、足りない機能だらけです。

以下は blog の機能追加や、環境整備など、当面のやることリスト、そしてやらないかもしれないリストです。

  • 開発環境・初期設定
    • Next/TypeScript 環境構築
    • ESLint/Prettier 設定
    • Google Analytics 設定
      • .env で本番/preview/ローカル環境測定 ID 出し分け
    • Next/TypeScript/ESLint/Prettier/Material-UI/styled-component template 作成
  • 画面実装
    • 記事一覧 画面実装
      • 新着記事ページング実装
      • MainFeatured/Featured に記事リンク設定
    • 記事詳細 画面実装
      • AMP 対応
        • HTML 対応
        • JavaScript 対応
        • CSS 対応
      • PWA 対応
      • パンくずリスト実装
      • 前後記事リンク設置
      • next/image component 埋め込み実装
      • 画像ごとに img タグ alt 属性設定
      • OGP 画像動的生成実装
      • Twitter/Facebook share ボタン設置
      • MainFeatured に記事タイトル設定
      • Markdown から HTML 生成実装
      • code タグ装飾実装
      • シンタックスハイライト実装
    • Profile 画面実装
      • description の markdown 化
      • next/image component で画像 lazy-load 実装
    • Contact 画面実装
      • material-ui でフォーム実装
      • react-hooks-form で validation
      • static forms で serverless mail 送信
    • プライバシーポリシー 画面実装
      • 本文の markdown 化
      • GA など外部リンク設定
  • 画面共通処理
    • Performance 改善(現状 Lighthouse 80 点)
    • Accessibility 改善(現状 Lighthouse 81 点)
      • 全 img タグ alt 属性設定
      • eslint-plugin-jsx-a11y 導入
    • next/Link をラップした material-ui/Link カスタム component 作成
      • next/Link 挙動調査 / Link 先画面の先読み検証
      • 全画面 Custom Link に差し替え
    • sitemap.xml 自動生成実装
      • 固定ページ/posts 配下 markdown ファイル更新日付を lastmod 属性に設定
      • tags/archives 一覧 URL の sitemap 出力実装
      • markdown meta 情報の isPublished=false 記事は sitemap から除外実装
    • カスタム 404 画面実装
    • その他 SNS OGP タグ調査・設定
    • Meta タグ調査・設定
    • Twitter OGP タグ設定
    • Title タグ設定
    • ページ先頭に戻るボタン設置
  • Sidebar
    • サイト内検索実装
    • おすすめ記事一覧実装
    • 新着記事一覧実装
      • 10 件以上は全ての記事を表示リンク設置
    • タグ一覧実装
    • 月別アーカイブ実装
    • Google AdSense 設定
    • SNS アイコン設置
  • Header
    • Contact リンク設置
    • RSS 購読ボタン設置
    • SiteTitle に Top リンク設置
    • SNS アイコン表示
    • Profile リンク表示
  • Footer
    • Sections リンク設置
  • Posts task
    • GA 設定 本番/ステージング/ローカル環境別測定 ID 出し分け 記事
    • AMP 記事
    • PWA 記事
    • サイト内検索を ISR で実装
    • Markdown を Material-UI で装飾
    • Contact / static forms / Serverless 実装
    • Amplify lambda / TypeScript 実装
    • gray-matter / isPublished / tags 実装
    • breadcrumb 実装
    • Flutter Freezed の build.yaml の field_rename: snake 対応記事
    • Flutter Freezed の fromJsonResponse 各種 json 配列パターン解析記事
    • Flutter Riverpod DI 箇所の MockWebServer を利用した UnitTest 記事
    • Flutter Riverpod DI 箇所の Mockito を利用した UnitTest 記事
    • Flutter Riverpod DI 箇所の WidgetTest を利用した UnitTest 記事
    • Flutter Riverpod DI 箇所の WidgetTest を利用した Loading 中処理の 記事

実装完了したものからチェックを付けてますが、果たして全機能実装出来るのでしょうか。

ただ Next が既に様々に機能を用意してくれてるので、基本的な blog の機能だけなら 3 日くらいで実装は出来ると思います。

また Vercel でホスティングすれば、秒速で公開でき、更に Next の恩恵を最大限に得れるので生産性は爆上がりです。

後は頑張って機能追加していこうと思います!

Written by ZUMA a.k.a. Kazuma. Web/Mobile App developer.  My profile.
Tags
Archives
2021-102021-092021-072021-062021-052021-042021-032021-022021-01
Recent Posts