next mdx
1.0.0
Next-MDX提供了一组用于获取和渲染本地MDX文件的助手功能。它处理关系数据，支持自定义组件，打字稿已准备就绪，并且确实很快。
Next-MDX非常适合构建MDX供电页面，多用户博客，类别页面..ETC。
https://next-mdx-example.vercel.app
通过查看示例，了解下一-MDX的工作方式。
next-mdx.json以查看示例配置。pages/[[...slug]].tsx查看如何获取和渲染MDX文件。types/index.d.ts 。 单击以扩展示例。
{
"post" : {
"contentPath" : " content/posts " ,
"basePath" : " /blog " ,
"sortBy" : " date " ,
"sortOrder" : " desc "
},
} import { useHydrate } from "next-mdx/client"
import { getMdxNode , getMdxPaths } from "next-mdx/server"
export default function PostPage ( { post } ) {
const content = useHydrate ( post )
return (
< article >
< h1 variant = "heading.title" > { post . frontMatter . title } </ h1 >
{ post . frontMatter . excerpt ? (
< p variant = "text.lead" mt = "4" >
{ post . frontMatter . excerpt }
</ p >
) : null }
< hr />
{ content }
</ article >
)
}
export async function getStaticPaths ( ) {
return {
paths : await getMdxPaths ( "post" ) ,
fallback : false ,
}
}
export async function getStaticProps ( context ) {
const post = await getMdxNode ( "post" , context )
if ( ! post ) {
return {
notFound : true ,
}
}
return {
props : {
post ,
} ,
}
}
npm i --save next-mdx
在您的项目的根部创建next-mdx.json文件，并使用以下内容：
{
"post" : {
"contentPath" : " content/posts " ,
"basePath" : " /blog " ,
"sortBy" : " date " ,
"sortOrder" : " desc "
},
"category" : {
"contentPath" : " content/categories "
}
}post ， category和author密钥是用作MDX类型的参考的唯一ID。contentPath （必需）是您的MDX文件所在的位置。basePath （可选）是用于生成URL的路径。sortBy （可选，默认为title ）是用于排序的前肌字段的名称。sortOrder （可选，默认为asc ）是排序顺序。 next-mdx公开了6个主要辅助功能：
getMdxPaths(sourceName: string)getNode(sourceName, context)getAllNodes(sourceName)getMdxNode(sourceName, context, params)getAllMdxNodes(sourceName, params)useHydrate(node, params) getMdxPaths(sourceName: string)返回一系列路径参数，可以直接传递到getstaticpaths paths in 。
sourceName是next-mdx.json中定义的唯一ID // pages/blog/[...slug].js
import { getMdxPaths } from "next-mdx/server"
export async function getStaticPaths ( ) {
return {
paths : await getMdxPaths ( "post" ) ,
fallback : false ,
}
} getNode(sourceName, context)返回带有前模和关系数据但没有MDX数据的MDXNode 。这确实很快且缓存。
如果您没有在页面上渲染MDX内容，则使用此而不是getMdxNode 。
sourceName是next-mdx.json中定义的唯一IDcontext是将上下文传递给getStaticProps或slug作为字符串。 // pages/blog/[...slug].js
import { getNode } from "next-mdx/server"
export async function getStaticProps ( context ) {
const post = await getNode ( "post" , context )
if ( ! post ) {
return {
notFound : true ,
}
}
return {
props : {
post ,
} ,
}
} getAllNodes(sourceName)返回带有前后和关系数据但没有MDX数据的给定类型/源的所有MdxNode 。这也是非常快的和缓存的。
sourceName是next-mdx.json中定义的唯一ID import { getAllNodes } from "next-mdx/server"
export async function getStaticProps ( ) {
return {
props : {
posts : await getAllNodes ( "post" ) ,
} ,
}
} getMdxNode(sourceName, context, params)返回MDXNode 。
sourceName是next-mdx.json中定义的唯一IDcontext是将上下文传递给getStaticProps或slug作为字符串。params ： {
components ?: MdxRemote . Components
scope ?: Record < string , unknown >
provider ?: MdxRemote . Provider
mdxOptions ?: {
remarkPlugins ?: Pluggable [ ]
rehypePlugins ?: Pluggable [ ]
hastPlugins ?: Pluggable [ ]
compilers ?: Compiler [ ]
filepath ?: string
}
} // pages/blog/[...slug].js
import { getMdxNode } from "next-mdx/server"
export async function getStaticProps ( context ) {
const post = await getMdxNode ( "post" , context )
if ( ! post ) {
return {
notFound : true ,
}
}
return {
props : {
post ,
} ,
}
} getAllMdxNodes(sourceName, params)返回给定类型/源的所有MdxNode 。
sourceName是next-mdx.json中定义的唯一IDparams ： {
components ?: { name : React . Component } ,
scope ?: { } ,
provider ?: { component : React . Component , props : Record < string , unknown > } ,
mdxOptions : {
remarkPlugins : [ ] ,
rehypePlugins : [ ] ,
hastPlugins : [ ] ,
compilers : [ ] ,
}
} import { getAllMdxNodes } from "next-mdx/server"
export async function getStaticProps ( ) {
const posts = await getAllMdxNodes ( "post" )
return {
props : {
posts : posts . filter ( ( post ) => post . frontMatter . featured ) ,
} ,
}
}useHydrate(node, params)在客户端用于保湿静态含量。
node是MdxNode对象params ： {
components ?: { name : React . Component } ,
provider ?: { component : React . Component , props : Record < string , unknown > }
} import { useHydrate } from "next-mdx/client"
export default function PostPage ( { post } ) {
const content = useHydrate ( post )
return (
< div >
< h1 > { post . frontMatter . title } </ h1 >
{ content }
</ div >
)
} 当您需要没有MDX内容的节点时，请使用getAllNodes 。它由缓存支持，非常快。当您需要节点列表（示例发布预告片）并且不使用MDX内容时，这很方便。
要使用MDX文件中的组件，您需要将组件传递到getMdxNode/getAllMdxNodes和useHydrate 。
import { getMdxNode } from "next-mdx/server"
import { useHydrate } from "next-mdx/client"
export function Alert ( { text } ) {
return < p > { text } </ p >
}
export default function PostPage ( { post } ) {
const content = useHydrate ( post , {
components : {
Alert ,
} ,
} )
return (
< div >
< h1 > { post . frontMatter . title } </ h1 >
{ content }
</ div >
)
}
export async function getStaticProps ( context ) {
const post = await getMdxNode ( "post" , context , {
components : {
Alert ,
} ,
} )
return {
props : {
post ,
} ,
}
} MDX选项可以作为params传递到getMdxNode(sourceName, context, params)和getAllMdxNodes(sourceName, params) ，其中params采用：
export interface MdxParams {
components ?: MdxRemote . Components
scope ?: Record < string , unknown >
provider ?: MdxRemote . Provider
mdxOptions ?: {
remarkPlugins ?: Pluggable [ ]
rehypePlugins ?: Pluggable [ ]
hastPlugins ?: Pluggable [ ]
compilers ?: Compiler [ ]
filepath ?: string
}
} 在使用getMdxNode或getAllMdxNodes检索节点时， next-mdx将自动从FrontMatter密钥中推断关系数据。
next-mdx.json中定义的密钥相同给定以下MDX文件。
.
└── content
├── categories
│ └── category-a.mdx
│ └── category-b.mdx
└── posts:
└── example-post.mdx
在example-post中，您可以使用以下内容参考相关类别：
---
title : Example Post
category :
- category-a
---然后，您可以访问类别如下：
const post = getMdxNode ( "post" , context )
// post.relationships.category 定义您的节点类型如下：
interface Post extends MdxNode < FrontMatterFields > { } import { MdxNode } from "next-mdx/server"
interface Category
extends MdxNode < {
name : string
} > { }
interface Post
extends MdxNode < {
title : string
excerpt ?: string
category ?: string [ ]
} > {
relationships ?: {
category : Category [ ]
}
}然后，您可以将Post用作getNode ， getAllNodes ， getMdxNode和getAllMdxNode的返回类型：
const post = await getMdxNode < Post > ( "post" , context )
const posts = await getAllNodes < Post > ( "post" ) 根据MIT许可获得许可。
