又到了一年一度鼓捣博客的时间咳咳，因为升级 gatsby 导致仓库收到太多依赖警告了，同时意识到大而全的框架的一些缺点，所以决定抛弃 Gatsby 转而使用 Nextjs
Gatsby vs Nextjs#
同为 React 生态中的ページ構築フレームワーク、彼らは両方とも SSG の機能を提供しており、シンプルなブログとしては静的エクスポートだけで十分な要件を満たすことができます。
ページデータの取得に関して、Gatsby と Nextjs の違いは、Nextjs では任意のデータソースからデータを取得できることであり、単に指定されたライフサイクル関数 getStaticProps で対応する値を返すだけですが、gatsby のデータソースは graphql に基づいていますが、多くの実装はプラグインに依存しており、大部分はコミュニティと公式の作業に依存しています。
現在の記事の内容はすべてローカルファイルシステムに保存されており、Gatsby と Nextjs の使用はほぼ同等ですが、Typescript のサポートに関しては Nextjs がはるかに優れていると感じています。
テンプレートの使用#
元々は Nextjs を再現してから変更するつもりでしたが、途中で MDX を使用して記事を構築する方が純粋な markdown よりも表示効果が良いことに気づきました。
ただし、Nextjs で MDX を使用する場合、Nextjs に処理を任せずにカスタマイズすることはできませんが、next-mdx-remote または mdx-bundler を使用すると、レンダリング時に new Function() を使用する必要があります。
最終的にはこの問題を解決しましたが、あまりエレガントではないと感じました。その後、解決策を探している中で、テンプレートを見つけました。また、このテンプレートはtailwindcssを使用しており、最近は同様のwindicssも使用しています以前は 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 を行う予定でしたが、すべての動的ルートに手動でプロップスを追加する必要があることがわかり、非常に面倒でした。そのため、結局 next-translate を使用しました。
将来の計画としては、記事のフロントマターに追加の lang 属性を追加して言語を識別し、記事リストに言語タグを表示して記事コンテンツの言語を示す予定です。また、将来的にはバイリンガルの記事で言語を切り替える場合には、追加の処理が必要になるかもしれません。
ただし、日付文字列のフォーマットは読者の言語に従って変化するようですが、これは改善の余地があります。
文字列の翻訳作業は時間がかかります
ドメインの設定#
GitHub や Vercel にマウントするのは少し低レベルに見えるので、多額の費用をかけて enpitsulin.xyz ドメインを購入し、Vercel コンソールで blog.enpitsulin.xyz にバインドし、Vercel の指示に従って Alibaba Cloud コンソールで解析設定を追加し、しばらく待つだけです。
ただし、まだ VPN が必要なようですので、この部分は後で調整します。
また、ルートドメインは将来の学習目的のために登録されています。