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が走るようにする