mdnext
1.0.0
MDNext是一個工具的生態系統
想要啟動一個新項目？
# Using NPX we'll start up the mdnext CLI prompts --
npx mdnext
# You will first be prompted with.. --
What is the name of your project ?
# Then you will choose which template to use
Select which template to use ...只想在基於MDX的應用程序中訪問組件？
# Even though we're a Next based ecosystem, our `MDX` components should be usable in most React based applications
yarn add @mdnext/components
or
npm i @mdnext/components mdnext是一種工具的生態系統，可增強與NextJS + MDX一起工作的能力。
mdnext CLI表面正式維護的集合和社區提交的模板可供選擇。一旦選擇，該項目就可以在本地克隆到清潔的提交歷史記錄，並且可以構建下一個項目。
@mdnext/components提供可訪問的（感謝Chakraui）和可擴展的組件，用於使用MDX 。其中包括您看到的內容，例如用於造型代碼塊的Code組件或用於將豐富內容嵌入MDX的Iframes
mdnext模板集合是基於NextJS的項目，對如何樣式，處理MDX （和其他數據源），提供媒體並處理您最常見的工作流程（Ecomm / blogs / product Pages）。雖然有官方維護的模板集合，但我很高興看到並分享社區創造的內容。我知道作為網絡開發人員有許多不同的意見和舒適性，並希望我們的生態系統可以訪問。
mdnext-starter的基本結構在所有其他模板中都可以看到它如何利用MDX和Next的核心。
了解這種結構將幫助您告知您所遵循的當前最佳實踐（可以免費解釋！），並且很容易插入和播放。讓我們深入了解入門者：
jsconfig.js
NextJS使我們可以為應用程序配置絕對路徑。我們使用它來輕鬆導入我們src目錄內的所有功能和實用程序
pages
頁面目錄定義您的路由。諸如getStaticProps / getStaticPaths / getServerProps之類的生命週期方法可在頁面級別提供。在這裡，我們將MDX內容作為數據傳遞給我們的組件。
*_app.js* nextjs允許您覆蓋應用程序組件，該應用程序用於初始化頁面。更多*_document.js* ：允許您增加我們的應用程序的<html>和<body>標籤。all-data/index.js ：此頁面是顯示指向所有MDX數據頁面的鏈接的示例。在這裡，我們使用getStaticProps為組件提供MDX文件的前材。data/[slug].js ：在這裡我們使用NextJS動態路由。通過使用getStaticPaths我們可以餵食動態sl，一次處理所有邏輯並將其應用於我們加載的每個MDX數據。這使我們可以在getStaticProps中與我們的數據匹配，並將其顯示到頁面和組件。index.js ：我們的頁面屬於應用程序的根，生活在pages目錄index.js的內部。 src我們的src目錄包含我們的所有客戶端代碼。我們的components ，自定義hooks ， utility功能和我們的MDX文件都可以在這裡使用，前三個可用於絕對路徑導入？
next.config.js用於圍繞environment variables ， webpack ， pageExtensions等事物的自定義配置，您可以使用next.config.js
每個模板都會具有自己的README ，並具有與構成新配置的添加有關的明確文檔。否則，您將在其核心處找到每個模板，啟動與mdnext-starter類似
mdnext內部的模板是為了減輕啟動新網站時減輕摩擦的。博客，個人站點，客戶工作等總是很艱鉅。
我們必須完成什麼？
我們如何處理樣式？
我將如何處理數據？
集成身份驗證的最佳方法是什麼？
這些模板中的意見將使您迅速啟動，並讓您自定義，但是您認為合適。
我們目前維護的模板：
mdnext-starter這是所有模板都創建的最不受歡迎的模板。它在getStaticProps/Paths內部採購MDX的示例之外容納了非常最小的配置和意見mdnext-blog博客模板在我們的mdnext-starter之上添加了功能。專門使用Chakra-UI進行樣式。使用我們的MDX文件作為路由，在頁面和內容級別的博客帖子配置。用於過濾我們的博客文章的FuseJS 。檢查此模板在操作中！mdnext-overlays成為新的流媒體時，您會面臨許多挑戰。最終，您將要為流以及觀眾設置自己的場景，動畫和互動。為什麼不使用您喜歡的工具來創建它們？使用此配置，您將使用一個基礎層設置，用於將每個新場景配置為路由。每條路線都包含與Twitch API，您的Twitch聊天以及有關流有關的信息互動的方法，這是事件！我們的社區提交了模板：
mdnext-tailwind想要通過Tailwind + mdnext項目快速起床並運行？這是答案。適當的配置以及一系列資源，使這些新手的Tailwind感到舒適！mdnext-twin-macro此入門配置為twin.macro ，因為它是造型的選擇。這使您可以利用Tailwind's公用事業課程和emotion's css方法，用於一種折斷樣式。mdnext-graphcms利用GraphCMS作為數據源，我們為博客設置了基礎知識。它以一個簡單的示例開始，說明如何從GraphCms中取降並用MDX將其饋送到我們的UImdnext-reflexjs Reflexjs是一個為速度和出色開發人員體驗而建立的樣式庫。您可以根據系統UI規範使用樣式道具和約束來設計組件。想提交一個新模板嗎？前往我們的貢獻部分，然後查看MDNext-Starter
