ブログをリニューアルしてみた
しばらく放置していた当ブログを勉強がてらNext.jsで作り直してみることにした。
ずっと仕事でWordPressでばかりサイト制作をしていたものだから、いわゆるモダンなフロントエンドとはほぼ無縁だったんだけど、当然気にはなっていたし、さすがにWordPressのテーマ作成にも飽きたので試してみることに。
Next.js以前にも、ReactだのVue.jsだのは見聞きしていたけど、個人的になぜだか試してみる気にはならなかった。よく理解していないかったり詳しく調べていないせいだろうけど、メリットがそこまで感じられなかったし、多分何より勉強するのが面倒だったんだと思う。ちなみにnode.jsはちょこっと触った事があった。
Next.jsを試してみようと思ったのは
そんな中でNext.jsをやってみようと思ったのは、以下のようなとても丁寧に熱心に解説してくれているポストのおかげ。新しい技術とか、サービスについてこういうポストをしてくれるのは本当にありがたい。
Qiita
Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明するQiita
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くなQiita
Next.jsのプロジェクトをTypeScript + Sass(Scss)で構築し、Vercelでホストするまでの手順
最初は「SSG」だの「SSR」だのよくわかんねーなーなんて思っていたんだけど、Vercel公式の各サンプル（これとか）を見て、ページの表示（遷移）速度の速さに驚いて、これは試してみようと。PHPに比べればJSの方が書くのは好きだし。
上記のような記事のおかげで開発（この程度のブログにはちょっと大袈裟か）はそんなに詰まることもなく進めることができて。ただ、バックエンドはサブドメインを切ってその辺のレンタルサーバにホスティングしているWordPressという、およそちょっとダサい感じ。。でも、今までのWordPressサイトの構築と全然違うのは、テーマは一切書く必要がなくて、Rest Apiのところだけ要件に合わせて書けばいいということ。（Headless CMS化）
これはWordPressに辟易していた自分にとっては新鮮で、それ以外を全てJS（TypeScript）で書けるというのが楽しい！
バックエンドはきっとFirebaseとかその辺のサービスを利用するのがそれっぽいんだろうけど、せっかくレンタルサーバ借りているし、WordPressのHeadless化もやってみたかったというのもあり、恥ずかしながらFirebaseとかAWSの色々なやつとかの料金形態をよく理解できていないという個人的な問題もあり、今回はこれで。でも、いつかはそういったサービスのみで構成してみたい。
フロントエンドはNext.jsを利用するならほぼ一択（らしい）Vercel。確かにデプロイが簡単だし、Next.jsの機能を余す事なく発揮できる。Next.jsの開発元だから当然といえばそうなんだろうけど、無料（Hobby）プランでもこの程度のブログでは十分なのが嬉しい。
無料プランでは個人の非営利サイトに限るのだが、以下の記事によると広告を貼るのは問題ないらしい。（2021/02/23時点で）
この記事を執筆している時点では広告は入れていないけれど、そのうちテストで入れてみようかな。（入れたところでそんなに見ている人がいないからあまり意味ないけど。。）
以上が当ブログをNext.jsでリニューアルしてみた、色々と端折った内容だが、Next.jsを触ってみて思ったのは、自分のような怠け／底辺エンジニアでもそこまで学習コストが高くないかなということ。そして、何より久々にサイト制作を楽しく感じたこと。Developer Experience（DX）ってやつですかね。
それはそうと
リニューアルするにあたり、ガチガチにHTMLやらWordPressのショートコードを利用して書いていた記事を、このタイミングで技術やサービスに依存しないようにマークダウンでマークアップし直した。その際に昔に書いた記事を見返すことになったわけだが、ほぼ今では何の役にも立たない記事ばかりで笑った。面倒なのでそのままにしておいたが、「Category」と「Tag」の違いもよくわからない。当ブログの立ち上げ当初の自分は何を考えていたのか。。恥を忍んで生きております。
コメント0