next mdx
1.0.0
Next-MDX는 로컬 MDX 파일을 가져오고 렌더링하기위한 도우미 기능 세트를 제공합니다. 관계형 데이터를 처리하고 사용자 정의 구성 요소를 지원하고 TypeScript가 준비되며 실제로 빠릅니다 .
Next-MDX는 MDX 구동 페이지, 다중 사용자 블로그, 카테고리 페이지를 구축하는 데 적합합니다.
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 에 정의 된 고유 ID입니다context getStaticProps 또는 슬러그를 문자열로 전달하는 컨텍스트입니다. // 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 에 정의 된 고유 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 에 정의 된 고유 ID입니다context getStaticProps 또는 슬러그를 문자열로 전달하는 컨텍스트입니다.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 에 정의 된 고유 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 >
)
} MDX 컨텐츠가 없는 노드가 필요한 경우 getAllNodes 사용하십시오. 캐시로 뒷받침되며 정말 빠릅니다. 노드 목록이 필요할 때 (예 : 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 옵션은 getMdxNode(sourceName, context, params) 및 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 라이센스에 따라 라이센스.
