【Next.js,microCMS】で作るブログ(Next.js基礎編)

UdonTech Advent Calendar 2022の11日目です。

UdonTechのカレンダー | Advent Calendar 2022 - Qiita

UdonTechのカレンダーページです。

前回はmicroCMSのデータ(ブログのタイトル)を取り出して表示させるところまでしました。今回は Next.jsの基礎的な部分に触れていきたいと思います。

Next.jsの特徴
まとめ

Next.jsの特徴

少し触ってみて個人的に良いなと感じた部分や、キャッチアップして得た情報を掻い摘んでまとめていきます。

ホットリロード対応で開発の手間が省ける

ローカル環境で開発していると、「ファイルの上書き保存」→「ブラウザの更新」という手順で変更した箇所がちゃんと適応されているか確認するのが従来の開発では当たり前でした。

近年ではホットリロードの機能が比較的簡単に構築できたり(Viteとか？)、フレームワークに標準で搭載されているものもあったりします。(※Next.js では標準搭載されていています。)初めてホットリロードを体験した時は、ブラウザの更新をしなくても良いという解放感が嬉しかったです。

ホットリロードとは？

簡単にいうと、コードが更新されたらそのタイミングでブラウザ側も情報を読み取って即座にブラウザの情報も切り替わる機能のことです。(※従来では都度、ブラウザの更新が必要でした。)

ルーティングがディレクトリ構成と連動

例えばルートディレクトリの下に「/about」を作りたいなとなった時に、「pages」ディレクトリの下に「about」ディレクトリを作り、その中にindex.tsx(※TypeScript対応の場合)のファイルを作成するか、about.tsxファイルを作成すればこれだけで構成は完了します。

このような仕組みのことを「ルーティングファイルシステム」と言うようです。今回は詳しく書きませんが動的ルーティングと言って、例えば[id].tsxといったファイルを生成することで、この[id]に対応したルーティングが動的に行われる機能もあります。

TypeScriptでも書ける

自分はTypeScriptの理解がそこまで進んでいないので、あまり恩恵を感じないのですがコードがシンプルに書ける、エラーやバグを未然に防げるなどのメリットがあるようです。比較的新しい言語なので、モダン開発の現場ではよく使われている印象です。今後は TypeScriptやNest.jsなどの理解も深めたいです。