React 開發日誌：從 Contentlayer 到 TinaCMS 的實用工作流程探索

在這個技術日新月異的時代，跟上最新的開發工具和框架就像是在趕一趟永遠不會停下來的火車。這幾天，我就像是被捲入了一場與 React 生態系統的馬拉松，每天都在不停地研究、嘗試、失敗、再嘗試。

Contentlayer 之謎：解析器還是 CMS？

說實話，我一直對 Contentlayer 感到困惑。它到底是什麼？為什麼 AI 總是將它與 CMS（內容管理系統）進行比較？帶著這些疑問，我下載了兩個 Contentlayer 的倉庫，打開原始碼進行研究，卻依然無法理解它與 CMS 的關聯。

在這個探索過程中，我得到了一個重要資訊：MDX 並沒有一個完整的編輯器。我嘗試尋找類似的編輯器，但都沒有找到理想的解決方案。WispCMS 看起來有點像是可以同時解碼的工具，但我已經失去了繼續研究它的興趣。

仔細觀察後，我發現大多數基於 Contentlayer 的部落格生成器都比較陳舊，似乎沒有人在維護。唯一例外的是 timlrx 的倉庫，它更新得比較頻繁。我下載下來研究，發現作者創建了一個稱為 Contentlayer2 的專案。雖然他聲明這不是官方版本，但確實比原版更新。

到這一步，我終於大致理解了 Contentlayer 的本質：它是一個解析器，用於解釋 MDX 檔案中的內容。如果沒有 Contentlayer，我們就需要使用不同的解析器來處理 MDX 的不同部分，這樣效率非常低。

前端開發工作流程的實用考量

對我來說，最關心的是工作流程。Contentlayer 看起來是為那些編寫程式碼的人設計的，所有操作都在 VS Code 中完成。由於我的記憶力不太好，特別害怕需要記住大量細節的工具。

因此，我決定繼續使用 TinaCMS，儘管這可能不是最完美的解決方案。

MDX 編輯困境：TinaCMS 的實際應用挑戰

晚上，我開始整理昨天的部落格。整理完後，我進入 TinaCMS 進行編輯並儲存。然而，程式碼部分沒有被正確處理，導致了錯誤。

自從我安裝了 MCP 之後，我的大腦開始變得懶惰了。當 JSX 不工作時，我直接讓 Claude 去修改 MDX 檔案。其實這也是無奈之舉，因為我無法編輯有問題的 MDX 檔案，只能依賴 Claude 來修改。

這種工作流程是否有問題，目前還不確定。但當我查看修改後的網頁時，有點失望。網頁雖然顯示正常了，但更像是普通的 Markdown 檔案，沒有展示出 MDX 的優勢。

React 元件整合：從 Code Blocks 到 Prism Renderer

我決定讓 Claude 幫我做一件事：安裝 React Code Blocks，並調整 JSX 以便使用它來渲染。Claude 開始工作，非常勤快地完成任務。然而，問題接踵而至——頁面被大幅修改，即使請 Claude 進行修正，也無法恢復原樣。

頭痛不已，我決定休息一下。

回到座位後，我將 Git 版本回退，重新開始。

前端開發問題解決策略：AI 輔助與手動整合

這次，我不再讓 Claude 獨自完成所有工作。我先與 ChatGPT 討論了出錯的原因。可能是 React Code Blocks 最近沒有得到維護，與其他元件存在相容性問題。ChatGPT 建議我使用 Prism React Renderer，因為它有更多的支持者和更頻繁的更新。

我手動將 Prism React Renderer 加入到 npm 中，然後讓 Claude 修改 MDX 文件。雖然我可能給了 Claude 太多權限，它又開始全速修改各種檔案，但這次結果不錯：部落格正常顯示了，程式碼也在 React 的框架中呈現。雖然可能還有一些不完美的地方，但整體看起來相當專業！

完成這項工作後，我對 React 的實際應用有了更深的感受。

React 框架選擇：TinaCMS 與各種入門套件的實際體驗

我現在還不確定未來的工作流程會是怎樣，但能夠快速解決問題確實非常重要。

晚上剩餘的時間，我嘗試安裝了 TinaCMS 的其他三個入門套件。Remix 雖然沒有部落格功能，但遇到的問題不大。Gatsby 安裝非常順利，並且包含部落格功能。然而，Astro 的安裝過程非常不順利——一開始是圖片無法顯示，後來則是不斷出現錯誤。我在考慮是否需要回退版本，重新開始。

在這個充滿挑戰的 React 學習之旅中，每一次失敗都是寶貴的經驗，每一次成功都是前進的動力。雖然路途坎坷，但隨著對工具和框架的深入理解，我相信最終會找到一個既高效又適合自己的工作流程。畢竟，技術的魅力不僅在於它的複雜性，還在於它能夠簡化我們的工作，讓創作變得更加輕鬆和愉快。

明天，新的挑戰又將開始，而我已經準備好繼續我的 React 探索之旅了。