Published on

Next.jsとWordPressのREST APIでブログを作り直した。

仕事でNext.js+WordPress REST APIに触る機会があって、忘れないうちに色々試す場所を作りたいと思い、このブログをWordPressオンリーからNext.js+WordPressで組み直すことにした。

  • Next.js
    • DeployはVercel/Github
  • WordPress
    • エックスサーバー
  • Tailwind CSS
  • Vanilla JS
    • 本当はTypeScriptで構築するつもりだった。すっかり忘れていた。

流れ

  1. VercelのTailwind-starter-blogをVercelにデプロイしてこれをベースにすすめる。
    • TS入ってると思ってた。
    • 普通にWordPress-starter-blogを入れて、Tailwind,SASSを入れた方が賢明かもしれない
  2. 記事管理用のWPをどこかに用意する
    • サブドメインにWP、Vercelにメインを振る場合は構築順番を気をつける
    • サーバー会社によると思うけど、エックスサーバーの「REST API アクセス制限」にチェックが入ってるとVercelからREST APIに繋げないので気をつける(詰んだ)
  3. 記事部分をWPからREST APIで持ってくるようにする
    • 各々独自APIを作成したほうがデータの取得が楽
    • axiosで持ってきた
  4. 見栄えなど調整

WordPressの吐き出し系を置換

しないといけない。iframeや内部記事などなど。Twitter埋め込みは出てる(?)

そのうち実装したいもの

  • 検索の実装
    • algolia導入
  • 記事下に同カテゴリの記事を出す
    • これやるとSSGのDeployが重くなりそう
  • OGP生成したい
    • @vercel/ogで動的にOG画像を生成できるみたいなので
  • linkcard
  • formもReactで?
    • GoogleForm?
  • プレビュー機能
  • WPで記事更新したらDeployが走るようにする