Blog Article

Next.jsとmicroCMSでブログを作成した話

投稿日時
更新日時

はじめに

ReactとNext.jsを使用してブログサイト(このサイト)を作成しました。

今までHTML/CSSは少ししか触ったことがなく、React、Next.jsはもちろんのこと、JavaScriptについては全く使ったことがありませんでした。

今回作成したブログサイトは以下の書籍を参考にして作成しています。

https://ebisu.com/next-react-website/

また、Xserver上に公開しています。

基本的な機能は上記の書籍の通りに作っているので、このページでは Next.js を使用してブログサイトを公開した所感について話したいと思います。

所感

ブログサイトに限らず、何かを作成する上では使用するフレームワーク等の仕様をしっかり定めてから作り始めるべきでした(当たり前ですが)。

ブログサイトを作ろうと思い立った際には Next.js の存在なんか知らなかったものですから、HTML/CSSで記事のテンプレートを作っておき、1ページ1ページHTMLファイル上で記事を書いてその都度サーバにアップロードしようとしていました。ものすごく非効率ですね。

私がブログサイトを作成しようとしてたどった道のりは以下の通りです。

 

HTML/CSSのみでサイトを作ろうとする

ひどく非効率的であることに気づき、記事データをSQLで管理しようと思いつく。これを実現するために、記事データを入力するエディタとデータを管理するシステムを作り出す(このあたりでだいぶ迷走していた)。

いろいろ調べているうちにJamstackというものを知る。microCMSを発見。ついでにNext.jsでブログサイトを作成することについて解説している書籍を発見。

 

都度、作り直していたので、かなり遠回りをしていました。

Next.js使うならVercel使えばいいじゃん!と途中で気づきましたが、HTML/CSSのみでサイトを作ろうとした段階でXserverに契約済、ドメインも取得済でした。それも無駄に3年契約で…

キャンペーン中で長期間の契約が安かったんです…(泣)

とはいっても、失敗含めていい経験になりました。最近機械学習系の勉強ばかりしていたので、久しぶりにPython以外のプログラミング言語に触れました。

現在は基本的な機能しか実装しておらず、足りないとこだらけですが、勉強を進めるにつれ機能を追加していき、デザインもアップデートできたらなと思います。現在のサイトはシンプルすぎて寂しいので…

おわりに

かなり短い記事でしたが、読んでくれた方はありがとうございました。

よろしければ、今後追加する記事も読んでいただけると幸いです。

Contact

準備中@web.mail.address