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
