Tsubuku.

WordPressからNext.jsにブログを移行しました🚀

Cover Image for WordPressからNext.jsにブログを移行しました🚀
Yohei Tsubuku
Yohei Tsubuku

WordPressからNext.jsにブログを移行したので、その理由と方法を記事にしました📝

なぜNext.jsにしたの？🤔

  • Reactのフレームワークを試してみたかった💪
    • yaritoriをいつかNext.jsに移行したい
  • UIをもっと自由にいじりたかった💄
    • WordPressのテーマを把握できていないと予期せぬ部分が変わってしまう
  • 単純な技術的興味👨‍💻
    • 最近、アウトプットばかりでインプットできていなかったが、色々あって久しぶりに時間ができた
    • 始めたらチュートリアルが超楽しくて、全体通して2日弱くらいで完成した

どう変わったの？💄

WordPress

before.png

Next.js

after.png

かなりシンプルになりました🎉

技術スタック👨‍💻

WordPress

  • WordPress
  • MySQL
  • さくらのレンタルサーバ
    • スタンダードプランは、月500円でWordPress数十個くらい作れるのでかなりおすすめ
  • さくらのドメイン

Next.js

  • Next.js
  • vercel
    • ホスティングサービス
  • さくらのドメイン
  • Githubにてリポジトリと記事管理（markdownで記述）

移行して良かった点👍

  • Next.jsの基礎を学べた
  • Next.jsのプリレンダリングなどにより、ページのパフォーマンスが向上した
  • vercelの凄さを知れた
  • UIの構築・変更が容易になった

Next.jsのプリレンダリングについて

  • プリレンダリングとは、予めHTMLをレンダリングしてからクライアントへ渡すことで表示パフォーマンスを上げたり、SEOを強くする仕組み🚀
  • プリレンダリングは2種類存在し、レンダリングするタイミングが異なる♻️
    • Static Generation
      • ビルド時の1回だけ生成
    • Server-side Rendering
      • リクエスト毎に生成
  • 従来のReactだと、リクエスト時にJSをロードし、ユーザが必要な情報を手に入れてからレンダリングするため、どうしても初期表示が遅かったり、SEOに弱い🚶‍♂️
  • そこでプリレンダリング。ページを予めレンダリングしておくことで、最初の1ページをHTMLで渡すことで表示が早くなる🏃‍♂️
    • その後、「ハイドレーション（hydration）」と呼ばれるプロセスにより、他のJSなども読み込まれてページがインタラクティブ（ユーザからのアクションを受け付けることが可能）になる

なので、今回のブログのような静的なサイトであれば、Static Generationを選択する方がベター

  • 動的に内容が変わるサイトであればSSRにするか、SaaSのダッシュボードのようなプロダクトであればプリレンダリングをオフにする。

vercelの凄さについて

  • 無料枠がすごすぎる
    • SSL、独自ドメイン、Github連携でのPRマージでの自動デプロイが無料

なので、

  • お名前.comで1円のドメイン買う💰
  • GithubのプライベートリポジトリにNext.js配置

により、実質1円で独自ドメインHPを運用可能だったりする🔥

↓vercelのダッシュボード。自動でPRのテスト環境を作ってくれるので、実際の動きを確認した後に本番リリースができたりする vercel.png

↓Githubと連携して、PRのコメントに自動で生成したプレビューのURLを記載してくれる github.png

移行して悪かった点👎

  • WordPressの機能が利用できなくなった🗑
    • Gutenbergエディタ
    • 画像縮小などのプラグイン
    • SEO対策のプラグイン
  • なんだかんだで保守コストがかかりそう💰
    • WordPressならバージョンアップが簡単

移行方法🏌️‍♂️

  • チュートリアルを見て基礎を学ぶ
  • ブログサンプルを使用してプロジェクトを作成する
    • JavaScript: npx create-next-app --example blog-starter blog-starter-app
    • TypeScript: npx create-next-app --example blog-starter-typescript blog-starter-typescript-app ←今回はこちらを使用
  • UIを整える
    • tailwindというデザインシステムが入っているので、それを早めに見ておくとやりやすいはず
    • もちろんココが一番時間がかかるし大事
  • 記事を _posts配下に置く（マークダウン形式）
    • WordPressからの移行時、lonekorean/wordpress-export-to-markdownを使用すると楽
      • npx wordpress-export-to-markdown
    • 上記で生成したファイルをそのまま配置しても他に必要な情報がなくてエラーになる（authorなど）ので、適宜加筆修正してから配置する
  • Githubのプライベートリポジトリを作成して、そこにmainをpushする
  • vercelとGithub連携で紐付ける
  • リリース完了。以降、PRをマージ時に自動でデプロイされるようになる

まとめ

  • 総じて移行してよかった
  • 次プロダクト作るならNext.jsで作ると思う
    • ルーティングなどのほぼ必ずいれる機能が最初から入っている
    • ディレクトリ構造がある程度決まっているので、カオスになりがちなReactのディレクトリ構成をある程度防ぎやすい。
      • とはいえこの辺りは力量なので、素のReactでもできる人はできる…。