約3か月ぶりの投稿となります。
本日、この Miyanber's Portfolio を Next.js に移行しました。GDGoC Kobe Univ. のWebサイト開発にも携わっているのですが、そちらで Next.js を使うということで、学習もかねてまずは自分のサイトを Next.js で実装してみました。
これまでは Python の Django フレームワークでサイトを構築して、デプロイ時は django-distill ライブラリを用いて静的サイトとして出力していました。しかし、やはり React 系フレークワークである Next.js の方がフロントの開発がしやすい上にパフォーマンス向上も期待できます。
せっかくなので、Django から Next.js への移行時に印象に残ったポイントについて少しお話できればと思います。
Django では例によって独自の ORM が用意されており、デフォルトでは SQLite が使われています。
しかし Next.js にはデフォルトで ORM はありません。もちろん Prisma とかを使えば実装できますが、今回のようなポートフォリオでそこまでするのはややオーバースペックです。
よって今回は、制作物はアプリ内の JSON で、ブログに関しては microCMS で管理することにしました。
microCMS（マイクロCMS）とは、株式会社microCMSが提供する日本製の「ヘッドレスCMS」です。管理画面（バックエンド）とWebサイトの表示画面（フロントエンド）が切り離されているため、高いセキュリティと自由度の高いWeb開発を実現できます。 (by Gemini)
Next.js で DB を使う場合デフォルトでは管理画面がないのですが、今回は microCMS を利用したため管理画面が利用できます。便利ですね。
ブログの個別ページでは GitHub の github-markdown.css を利用しています。
microCMS なので、microCMS 上で記事を編集できるといえばできるのですが、個人的に Markdown を使いたいということもあり、ローカルの VSCode で .md ファイルを編集し、内容を microCMS のテキストフィールドにコピペして更新という方法をとっています。画像は microCMS のギャラリー機能を使ってホストしています。
私は Python よりも JavaScript の経験の方が長かったので幸い TypeScript で困ることはありませんでした。むしろ、JavaScript と違ってちゃんと型を定義するところは、Java も使ってきた身としては好感を持てます。コードの補完も効くのでありがたいです。
Django ではサーバーサイドの処理とフロントエンドの処理が別々のファイルに書かれており、値の受け渡しがいろいろ面倒でしたが、Next.js では1つのファイルにかけるので非常に見やすいです。補完も効くのでありがたいです。
Django-Template ではサーバーサイドから渡ってきた変数 (context) はどうしても補完ナシの手打ちで呼び出さなければなりませんでした。
Django では静的ファイルの扱いが少々特殊で、static フォルダを設定で指定した場所にしか置くことができませんでしたが、Next.js では app/ 内にも public 内にも置くことができます。特に CSS を app/ 内に置けるのは非常にありがたいです。Django では静的ファイルのみが入ったフォルダから CSS を探す手間がありました。
やはり TypeScript であるのと、Django-Template と違って変数をリテラルではなくそのまま指定できるところが影響していますね。
（ちょっと書くの疲れてきた...）
page.tsx を配置する場所によってルーティングが設定できる。非常に楽ですね。多少自由度は奪われますが、これで困ることはあまりないように思います。
SSG でないときに限りますが、<Image> タグを使えば自動で Next.js が画像を WebP 形式等に変換してくれます。素晴らしい。Django ではアップロード時にサーバー側で変換処理を挟むなどの対応が必要でした。
Django の時は通常のネイティブ CSS を利用していたため、Next.js 移行時もその CSS をそのまま流用しています。
Next.js では CSS の読み込みがやや特殊です。基本的にページ遷移時は変更のある要素のみレンダリングし直すような感じなので、ページごとに読み込む CSS を変更するみたいなことはできません。そこでモジュールというものが用意されてており、CSS をインポートして className に className={styles.className} みたいに指定すれば、一意のクラス名が生成され他のページとクラス名の重複が起きなくなるという仕組みを利用します。
この際、ネスト記法を用いている場合中身のタグを global(h2) みたいに書かないと認識してくれません。また、ただし、marginやlist-styleなどのブラウザ固有の規定値が全部0やnoneにリセットされているので、いくらか調整が必要した。
今回は CSS ファイルをそのまま流用している部分が多いため、TailwindCSS の機能はフル活用できていませんが、今後デザイン変更を行う場合は TailwindCSS で記述しようと思います。
どうしても今までネイティブの CSS を利用してきた分、HTML にスタイルを書き込む TailwindCSS の記法には抵抗感がありますが、CSS クラスが大量発生してどのクラスのスタイルをいじれば良いかわからなくなるぐらいなら HTML に直に書いてしまえという設計思想なのでしょう。
一方 TailwindCSS ならメディアクエリやダークモードのスタイルが md:, dark: 等を用いて簡潔に書けるので、その点は現段階でも評価できます。クラスの名称を考えなくて良いのもプラスポイント。明らかに今までよりも開発スピードが上がりそうです。
割と思い付きで書いたので、多少文章が乱雑な点はご容赦下さい。時間があれば後でコード例も載せたいと思います。
Next.js 導入のメリットが思ったより大きいので、引き続き開発を続けていきたいと思います。
今後の Web 開発のデフォルトは Next.js ですね。機会があれば GoLang も使ってみたいところです。