プライムキャストはこれまでのwebサイト制作に「WordPress」を使ってきました。 
慣れ親しんできた「WordPress」ですが、実は2023年7月の公式ホームページリニューアルを機に”脱WordPress”を謳い文句として「Next.js」を用いて制作することになったんです。 

今回は、「Next.js」を使ったwebサイト制作の裏話をご紹介していこうと思います。 

脱WordPressを目指したワケ 

そもそも、なぜ今までと同じ「WordPress」ではなく「Next.js」を使おうという流れになったのか？ 
それは３つの理由があります。  

1. 1. 表示速度が遅く、せっかくwebサイトに来た人たちが離脱してしまう（アナリティクス的には直帰率が高くなってしまう） 

2. 2. 不正アクセスやスパムなどのセキュリティ面の問題がある 

3. 3. 「WordPress」はバージョンやプラグインの相性など検証、保守のコストが高く、運営が大変 

これらの理由から、「WordPress」以外の方法でwebサイトの制作・運営を試験的に行いましょう！と社内で方針が決定しました。 
正直、旧公式ホームページは重めでユーザー目線に立った時にあまり長居してもらえないかも…と感じていたので良い機会でしたね。 
（この件に関しては今後改めて記事で紹介できたらと思います。） 

では、「Next.js」で作ったwebサイトと、「WordPress」で作ったサイトでは、どう変わってくるでしょうか ？ 
調べてみました。 

WordPressとNext.jsを比較してみた 

１　大幅な速度改善 

「WordPress」のサイト表示の仕組みはデータベースにリクエストを送り、受け取ったデータをHTML化して表示しています。
そのため、データベースとのやり取りの多さからサーバーへの負荷が大きくなり、表示が遅れてサイトが重く感じやすいです。 
これに対して「Next.js」で作ったサイトは、ビルド時にHTMLを生成し、それを表示しているため、サーバーとのデータのやり取りや、サーバーへの負荷も少なくなります。 
さらに、やり取りしているデータがHTMLファイルのためサイズも小さく、表示速度が速くなるのです。 

２　構築のしやすさ 

「WordPress」でサイトを作るためにはテーマを使う、または作る必要があります。 
さらに、テンプレートに合わせたページ構成にする必要があります。 
「Next.js」は普通のHTMLのように表示部分を記述することができ、テンプレート等の制約を気にする必要がないため、簡単に自由なデザインで構成することができます。 
言ってしまえば楽です。 
ただし、これに関しては複雑なデザインや構成のサイトを作ろうとしなければ、ちょうどいい「WordPress」のテーマがあると思うので、ケースバイケースですね。 

３　サーバー管理 

「WordPress」はサーバーにインストールして使います。 
この時MySQL、PHPが使えるサーバー（エックスサーバーなど）を選ぶ必要があり、そのためお金がかかります。 
無料で使えるサーバーもありますが、この場合は広告が挿入されることが多いです。 
「Next.js」はビルドして作った静的ファイルをアップロードしたり、「vercel」などのホスティングサービスを利用して公開できるため、利用条件にもよりますが、サーバーに費やすコストを抑えることができます。 

他にもありますが、大きくこの3つが挙げられると思います。 

WordPressとNext.jsどちらを選ぶべきか 

とは言うものの、「WordPress」はニュースやブログの更新、その他ページも全て「WordPress」内だけで完結できるメリットがあり、頑張って工夫して表示速度を上げれば、慣れ親しんだ「WordPress」からわざわざ脱却しなくても良い話なのでは…と。 
「Next.js」はこれらの更新もページを一から作らないといけませんからね。 
これは手間です、楽じゃなくなってしまいます。由々しき問題です…。 
という声が上がって来そうでした。 

そこで…！確かに”楽”は失いたくないので、「WordPress」のような更新の手軽さを求めて深堀してみることにしました。 

次回コラムに続きます