皆さんおはようございます。昨日弊サイトをローンチしました、池ちゃんと申します。いかがお過ごしでしょうか。私が住んでいるところはまだ暗く、太陽が昇っておりません。最近早起きする事にハマっていて、今日は午前4時に起床しました。

さて、今回はこのWEBサイトを支えている技術スタックについて紹介していきたいと思います。このサイトのコンセプトは「速い」です。とにかくスピードを追求したWEBサイトとなっておりますので、どのような構造でWEBサイトが動いているか説明したいと思います。

ワードプレスじゃない方法でCMS的なものを作る

私は今までブログを作るとなったらワードプレス一択でした。ワードプレスはPHPで動くCMS（コンテンツ・マネジメント・システム）で世界でもトップシェアを誇るシステムです。

ワードプレスはとても使いやすく、オリジナルテーマも作りやすいので私も過去何度もワードプレスでブログを作っていました。PHPも初学者向けの言語で、ソースコードも読みやすく、ある意味では私はワードプレスに依存する形になっていました。

ワードプレスの個人的惜しいところ

ワードプレスは非常に便利な反面、残念なところもあります。個人的にクリティカルに惜しいところは表示速度です。表示速度に少しラグがあります。これは私のセッティングが悪いのかもしれないですが、サーバをLiteSpeedにしてもあまり速度改善が見られませんでした。もちろん、Apacheよりかは早く、ある程度のスピード向上は見られましたがそれでもローディングの時間が若干長いかなと思う瞬間があります。

モダンなフレームワークに触れてみたい

個人的に一番開発のモチベーションになったのは、これです。ワードプレスは昔ながらのシステムで開発は楽しさもあるのですが、少し飽きてきてしまったのが正直な感想です。フロントエンド周りでReactやVueといったJavaScript製のフレームワークが流行り始めていて、React系のフレームワークを使いたいと思いました。

そしてNext.jsに出会う

速くて学習し易いフレームワークどれかを考えた時にNext.jsが頭に浮かんできました。一昔前まではNext.jsとNuxt.jsが同じぐらいの勢力を持っていましたが、近年はNext.jsが勢いがありインターネット上にも沢山のドキュメント・ノウハウがあるため、Next.jsを選びました。

使ってみての感想ですが、とにかく分かりやすいです。.tsxという拡張子でファイルを作成し、そのファイル名がそのままURLになる。とても分かりやすかったです。npmで色んなライブラリを入れる事も出来るので「こんな機能が欲しいな」と思えばnpmからインストールする事で大抵の機能は実装できてしまうのも強いです。

せっかくならマークダウンで記事管理したいよね

これに尽きます。エンジニアであればマークダウンはとても馴染みがあると思います。個人的には記事をマークダウンで管理したいという想いも強くあり、Next.jsを使ってマークダウン管理ができるようにしました。ワードプレスでは中々マークダウンで記事を管理する事はできないので、ここはオリジナルで開発する必要がありました。

静的ホスティングであればお金もかからない

このサイトはCloudflare pagesで公開しています。無料枠がとても大きく事実上無料でWEBサイトを公開する事ができています。お財布にも優しく、個人的にはこの点もNext.jsでWEBサイトを作るメリットだと思います。ワードプレスだとどうしてもサーバを借りて、レンタルサーバ代がかかってしまいますので、大きなメリットです。

結論：Next.jsは正義

ワードプレスを長い間使ってきた身としては、Next.jsの表示速度の速さは素晴らしいものです。公式ドキュメントやノウハウもインターネット上に沢山あり、新規参入のハードルも低いんじゃないかなと思います。一度作ってしまえば、後はマークダウンを量産していくだけでブログを増やす事ができるので、運用もとても楽です。

今回は表示速度が早く、運用もし易いNext.jsベースのCMSもどきの作り方をご紹介しました。これからもブログを運用していきますので、よろしくお願いいたします。