コンテンツにスキップ

Next.js と React 使用レポート(二)

さて、このブログはすでに Next.js に移行したことで、Next.js フレームワークの先進性を十分に証明している(自画自賛)。

残念なことに、今日に至るまで Vue に興味を持てなかったので、今回の使用レポートにはそういった比較は含まれないが、それでも他の内容はあるよ。

Vercel

以前、僕のブログは GitHub Pages でホスティングしていた。GitHub Pages は静的 Web ページのホスティングプラットフォームで、これはページのコンテンツが静的であることを意味する。これはブログのような更新頻度が低く、ユーザーのログイン操作が不要なシーンに非常に適している。

今回 Vercel に移行したのは、単純に Next.js へのサポートが素晴らしいからだ —— なぜなら、Vercel は Next.js を作っている人たちが作ったものだからね。

GitHub Pages と比べて遊びの幅が格段に広く、元の Hexo フレームワークButterfly テーマに縛られることもなく、どこでも自分でデザインできる。

Vercel は AnalyticsSpeed Insight 機能も提供しており、Web ページの状態を確認できて、すぐに使える非常に便利なものだ。

実は以前、GitHub Actions を使ってリポジトリの変更を監視し、自動的にビルドしてデプロイする仕組みを作ろうとしたことがあるけど、結局面倒で、最終的にはうやむやになってしまった。一方、Vercel は GitHub リポジトリにリンクするだけで自動 CI/CD ができるので、オンラインで簡単な変更を加えるのが極めて便利だ —— GitHub クライアントで MDX を書くだけでいい。

International

国際化は僕がずっと好きでやってきたことで、Mercurius では en、zh-CN、ja の三言語を実装した。ブログにも多言語サポートを持たせたいと思っている。

国際化の資料はまだ比較的少なく、Next.js 15 になってようやくこの機能が内蔵された(要確認)—— とはいえ、それ以前は国際化がどういうものなのかも知らなかったんだけどね。

実は一時期 Docusaurus を使ってブログを構築しようと思ったこともあったけど、先ほど述べたように、特定のフレームワークに制限されたくないので、最終的には自分で構築することにした。

しかしこれも一つの問題を引き起こした。MDX のコンテンツをどのように国際化すればいいのか?今のところ、まだいい方法が思い浮かばない。

フォント

先ほどの国際化も同様に一つの問題をもたらす。フォントをどのように国際化するか。知っての通り、漢字は国や地域によって異なる字形を持つ……

とにかく一旦保留だ。優先度が低い Issue はいつもこうで、無視され、先延ばしにされる……

NextUI

僕は NextUI という UI ライブラリがとても気に入っている。更新頻度もかなり高い。残念なことに、今回ブログを書き直すタイミングが少し良くなかったみたいで、Next.js が 14 から 15 へ、Tailwind CSS が v3 から v4 へ、NextUI が v2.6 版に更新、ESLint が v8.x 版のメンテナンスを終了する、このタイミングに挟まれてしまった。ネットで見つかる多くのチュートリアルはまだ旧バージョンに基づいているので、不便なことも多い。

少し話が逸れてしまったけど、UI の話に戻そう。

僕は色のデザインが苦手だ。というか、使いたい色で美しいカラーパレットを見つけるのが非常に難しい:

例えば虹に現れる七色について言えば、赤は Error、オレンジは Warning、緑は Success、青は Primary、紫は Secondary に使われる。しかし、オレンジを Primary にしたいと思った瞬間、美しく直感的なカラーパレットを設計するのが一気に難しくなる。

背景色については、One Dark Pro の色を直接真似した。これは本当に美しいと思う。

もう一点、僕はもう長い間ライトモードを使っていないので、デザインしたライトモード下の配色に対して、極度に不適応を感じている……

実はブログはダークモードだけサポートしたかったんだけど、自分に挑戦して、逆境から逆転 これも学習だと思うことにした —— 実際には light と dark の二つのモードに拘るべきではなく、マルチテーマの方がいいんじゃないか?

パッケージマネージャー

現在、僕は yarn v4 を使っていて、今のところこのパッケージマネージャーがかなり気に入っている。でも pnpmbun もとても試してみたくて、いつ pnpm や bun に移行するかもわからない。特に bun は、かなり凄い JavaScript ランタイムで、たくさんの良いものが追加されている……

でも以前 Windows にインストールした後、アップグレードで少し問題が出たことがあって、とりあえず保留にしている。

まとめ

Next.js は確かにとても優れた Web フロントエンドフレームワークだ。焦らないで、Vue との比較もいつか来る。実際、僕はすでに Vue に対して少し意見があるんだけど、それはまた別の話だにゃ。