又到了一年一度鼓捣博客的时间咳咳，因为升级 gatsby 导致仓库收到太多依赖警告了，同时意识到大而全的框架的一些缺点，所以决定抛弃 Gatsby 转而使用 Nextjs
Gatsby vs Nextjs#
同为 React 生态中的ページ構築フレームワーク、彼らは両方とも SSG の機能を提供しており、シンプルなブログとしては静的エクスポートだけで十分な要件を満たすことができます。
ページデータの取得に関して、Gatsby と Nextjs の違いは、Nextjs では任意のデータソースからデータを取得することができ、単に指定されたライフサイクル関数 getStaticProps で対応する値を返すだけですが、gatsby のデータソースは graphql に基づいており、多くの実装はプラグインに依存しており、大いにコミュニティと公式の作業に依存しています。
現在の記事のコンテンツはすべてローカルファイルシステムに保存されており、Gatsby と Nextjs の使用はほぼ同等ですが、TypeScript のサポートに関しては、Nextjs が Gatsby をはるかに上回っていると感じています。
テンプレートの使用#
元々は Nextjs を再現してから変更するつもりでしたが、途中で MDX を使用して記事を構築する方が純粋な markdown よりも表示効果が良いことに気づきました。
ただし、Nextjs で MDX を使用する場合、Nextjs に処理を任せずにカスタマイズすることはできませんが、next-mdx-remote または mdx-bundler を使用すると、レンダリング時に new Function() を使用する必要があります。
最終的にはこの問題を解決しましたが、あまりエレガントではないと感じました。そして解決策を探している途中で、テンプレートを見つけました。また、このテンプレートはtailwindcssを使用しており、最近は同様のwindicssも使用しています以前は tailwind に JIT モードがなかったため
その後、このテンプレートを使用することにしました。多くのレイアウトが素晴らしいと思いますが、一部の機能とページの表示スタイルを改善する必要があると感じました。ホームページなどはあまりにも簡素です。
コンテンツ管理#
以前の Gatsby の最終バージョンでは、Netlify CMS を使用してコンテンツを管理し、基本的には JAMStack の構造を形成しましたが、使用体験は少し不十分でした。
途中で Notion を使用してコンテンツ管理を試みましたが、いくつかの点で直接的な markdown よりも効果が劣るようです。
追加のコンテンツ管理の使用#
現在の目標は、Sukka 氏のこの記事使用 Next.js + Hexo 重构我的博客に触発されて、hexo と nextjs を統合するか、contentlayersと組み合わせることです。
contentlayer#
このパッケージは非常に野心的で、さまざまなコンテンツソースを統合することを目指しています。ローカルファイル（MDX、markdown、json、プレーンテキスト）や CMS など、どのようなデータソースでも管理することができます。
ただし、一部の目標機能は wip の状態にありますが、将来的には Notion と統合できる可能性があると思います。
hexo#
Hexo は静的サイトジェネレーターだけでなく、内部のデータベースはローカルの記事を直接操作するための一連の API を公開しています。
この部分については、Sukka 氏の記事と hexo 公式ドキュメントを参考にすることができます。また、hexo の利点の一つは、ファイルシステムに基づいてデータを永続化できることです。これにより、ビルドにかかる時間とリソースを節約することができます。
また、rss や sitemap の生成など、hexo に統合されている機能を使用することで、既存のコードをよりシンプルに再構築することができます。また、hexo cli が提供する多くの機能も非常に便利です。
i18n の統合#
実際には、この小さなブログにとっては国際化はあまり大きな影響はないようですが、仕事では使わないといけないので、英語の記事のための準備をしておくのはいいかもしれません。
next-translate#
実際には、リポジトリのコミット履歴を見れば最初は next-i18next を選択して i18n を行う予定でしたが、すべての動的ルートに手動で props を追加する必要があることがわかり、非常に面倒でしたので、結局 next-translate を使用しました。
将来の計画としては、記事のフロントマターに追加の lang 属性を追加して言語を識別し、記事リストに言語タグを表示して記事の言語を示す予定です。また、将来的にはバイリンガルの記事で言語を切り替えるために追加の処理を行う予定です。
ただし、時間の文字列のフォーマットは読者の言語に従って変化するようですが、これは改善の余地があります。
文字列の翻訳作業は時間がかかります
ドメインの設定#
github や vercel にマウントするのはちょっと低レベルな感じがしたので、多額の費用をかけて enpitsulin.xyz ドメインを購入し、vercel コンソールで blog.enpitsulin.xyz にバインドし、vercel が提供するレコードを阿里云のコンソールに追加することで設定しました。そしてしばらく待つだけです。
ただし、まだ VPN が必要なようですので、この部分は後で調整します。
また、ルートドメインは将来の学習用途のために登録しておきました。