Next.jsでブログを作った

2022-07-10

フロントエンド開発の勉強をしたかったので、Next.jsでブログを作った。

過程

業務ではバックエンドのコードを書いていることがほとんどで、フロントエンド開発はReactに少し触れたことがある程度だったので、以下のような学習過程を踏んだ。

とりあえず巷でとても評判の良かったNext.jsの公式チュートリアルをやった。これがNext.js自体についてだけではなく、モダンフロントエンド開発の全体像についても解説されていて、今まで曖昧だった部分が色々と解消できてとても良かった。

例えばNext.jsに入る前にReactの説明をするパートがあって、そこでも以下のような基礎技術についての説明がまず入る。

こういうバックグラウンドが丁寧に解説されていたため、「なぜNext.jsが必要なのか？Next.jsで何が解決できるのか？」が明確になって良い学習になったと思う。

最近のライブラリやフレームワークは公式のチュートリアルが用意されていることが多いが、Next.jsのチュートリアルはその中でも特にクオリティが高いと感じた。英語に抵抗の無い人なら、ぜひ一度は目を通しておくと良いと思う。

Next.jsにはblog-starterというどんぴしゃなテンプレートが用意されている。

今回はNext.jsの勉強という意味合いが強かったのでこのテンプレートは利用せず1から作ったのだけれど、ときどき実装を参考にした。

今まで基本的にバックエンドのコードを書いていたので、HTMLのマークアップとCSSのデザインにとにかく時間がかかった。React, Next.js自体の勉強よりも大変だった。

素のCSSもある程度触れておこうと思ってスタイルにはNext.jsでデフォルトサポートされているCSS Modulesを使ったが、結構辛かった（特にレスポンシブ対応）ので、これから何か作るときは何かしらのCSS-in-JSを使いたい。

ただ今までなんとなくでやってきたHTML、CSSをきちんと見直して勉強する機会になって良かった。今までHTML4と5って何が違うの？という状態だったけど、だいぶセマンティクスを意識したコーディングができるようになったと思う。

HTML5を勉強するにあたっては、uhyoさんのHTML5講座がとても参考になった。

ブログを作ったはいいものの、何を書いていくのかは決まっていない。

技術記事だったらZennに書いているし、わざわざここに書く意味はないように思う。

ZennやQiita, note等のプラットフォームと比べると、こちらは全く読者からのフィードバックが無い（コメントとかを実装する予定も無い）ので、どうでもいいポエムを書いていく方がここには向いているように思う。

とりあえず色々やっつけで作ってしまったが、色々と付け足したいものがあるので暇をみつけてやっていく。