next mdx

配x這個項目已退休。考慮使用Next-MDX-Remote或MDX-Bundler或Nextra。

Next-MDX提供了一組用於獲取和渲染本地MDX文件的助手功能。它處理關係數據，支持自定義組件，打字稿已準備就緒，並且確實很快。

Next-MDX非常適合構建MDX供電頁面，多用戶博客，類別頁面..ETC。

目錄

• 演示
• 快速開始
• 例子
• 安裝
• 配置
• 參考
  • getmdxpath
  • getNode
  • getallnodes
  • getmdxnode
  • getallmdxnodes
  • 使用水合物
  • getallnodes vs getAllmdxnodes
• MDX組件
• MDX選項
• 關係數據
• 插件
• 打字稿

演示

https://next-mdx-example.vercel.app

快速開始

通過查看示例，了解下一-MDX的工作方式。

1. 去示例頁面
2. 打開next-mdx.json以查看示例配置。
3. 打開pages/[[...slug]].tsx查看如何獲取和渲染MDX文件。
4. 有關打字稿的types/index.d.ts 。

例子

單擊以擴展示例。

Next-Mdx.json

{
  "post" : {
    "contentPath" : " content/posts " ,
    "basePath" : " /blog " ,
    "sortBy" : " date " ,
    "sortOrder" : " desc "
  },
}

頁/帖子/[... slug] .jsx

 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 "
  }
}

1. post ， category和author密鑰是用作MDX類型的參考的唯一ID。
2. contentPath （必需）是您的MDX文件所在的位置。
3. basePath （可選）是用於生成URL的路徑。
4. sortBy （可選，默認為title ）是用於排序的前肌字段的名稱。
5. sortOrder （可選，默認為asc ）是排序順序。

參考

next-mdx公開了6個主要輔助功能：

• getMdxPaths(sourceName: string)
• getNode(sourceName, context)
• getAllNodes(sourceName)
• getMdxNode(sourceName, context, params)
• getAllMdxNodes(sourceName, params)
• useHydrate(node, params)

getmdxpath

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

getNode(sourceName, context)返回帶有前模和關係數據但沒有MDX數據的MDXNode 。這確實很快且緩存。

如果您沒有在頁面上渲染MDX內容，則使用此而不是getMdxNode 。

• sourceName是next-mdx.json中定義的唯一ID
• context是將上下文傳遞給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

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

getMdxNode(sourceName, context, params)返回MDXNode 。

• sourceName是next-mdx.json中定義的唯一ID
• context是將上下文傳遞給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

getAllMdxNodes(sourceName, params)返回給定類型/源的所有MdxNode 。

• sourceName是next-mdx.json中定義的唯一ID
• params ：

 {
  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 >
  )
} 

getallnodes vs getAllmdxnodes

當您需要沒有MDX內容的節點時，請使用getAllNodes 。它由緩存支持，非常快。當您需要節點列表（示例發布預告片）並且不使用MDX內容時，這很方便。

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選項

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密鑰中推斷關係數據。

習俗

1. FrontMatter字段名稱必須與next-mdx.json中定義的密鑰相同
2. 前肌場必須是值的數組。

例子

給定以下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 

插件

• Next-MDX-TOC：將目錄添加到MDX頁面。

打字稿

定義您的節點類型如下：

 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許可獲得許可。

展開