next mdx
1.0.0
Next-MDX предоставляет набор вспомогательных функций для извлечения и отмены локальных файлов MDX. Он обрабатывает реляционные данные , поддерживает пользовательские компоненты , готовые к типографии и действительно быстро .
Next-MDX отлично подходит для построения страниц с мощностью MDX, многопользовательских блогов, страниц категорий ..etc.
https://next-mdx-example.vercel.app
Узнайте, как работает Next-MDX, просмотрев примеры.
next-mdx.json чтобы увидеть пример конфигурации.pages/[[...slug]].tsx чтобы увидеть, как избираются и отображаются файлы MDX.types/index.d.ts для TypeScript. Нажмите, чтобы развернуть примеры.
{
"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 Keys - это уникальные идентификаторы, используемые в качестве ссылок для ваших типов MDX.contentPath (требуется), где расположены ваши файлы MDX.basePath (необязательно) - это путь, используемый для генерации URL.sortBy (необязательно, по умолчанию на title ) - это название поля FrontMatter, используемого для сортировки.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) возвращает массив параметров пути, который можно перенести непосредственно по paths in GetStaticPaths.
sourceName -это уникальный идентификатор, определенный в next-mdx.json // pages/blog/[...slug].js
import { getMdxPaths } from "next-mdx/server"
export async function getStaticPaths ( ) {
return {
paths : await getMdxPaths ( "post" ) ,
fallback : false ,
}
} getNode(sourceName, context) возвращает MDXNode с передним и реляционным данных, но без данных MDX. Это действительно быстро и кэшируется.
Используйте это вместо getMdxNode , если вы не рендерируете содержимое MDX на странице.
sourceName -это уникальный идентификатор, определенный в next-mdx.jsoncontext - это контекст, переданный для 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) возвращает все MdxNode данного типа/источника с передним механизмом и реляционными данными, но без данных MDX. Это также очень быстро и кэшируется.
sourceName -это уникальный идентификатор, определенный в next-mdx.json import { getAllNodes } from "next-mdx/server"
export async function getStaticProps ( ) {
return {
props : {
posts : await getAllNodes ( "post" ) ,
} ,
}
} getMdxNode(sourceName, context, params) возвращает MDXNode .
sourceName -это уникальный идентификатор, определенный в next-mdx.jsoncontext - это контекст, переданный для 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.jsonparams : {
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 - это объект MdxNodeparams : {
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 , когда вам нужны узлы без содержания MDX. Он подкреплен кэшем и действительно быстро. Это удобно, когда вам нужен список узлов (пример Post Teasers), и вы не используете содержание 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 автоматически выведет реляционные данные из ключей переднего мельницы.
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.
