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