next mdx
1.0.0
NEXT-MDX bietet eine Reihe von Helferfunktionen für das Abrufen und Rendern lokaler MDX-Dateien. Es kümmert sich um relationale Daten , unterstützt benutzerdefinierte Komponenten , Typscript Ready und ist sehr schnell .
NEXT-MDX eignet sich hervorragend zum Aufbau von MDX-Seiten, Multi-User-Blogs, Kategorienseiten..ETC.
https://next-mdx-example.vercel.app
Erfahren Sie, wie Next-MDX funktioniert, indem Sie sich Beispiele ansehen.
next-mdx.json um die Beispielkonfiguration anzuzeigen.pages/[[...slug]].tsx um zu sehen, wie MDX -Dateien abgerufen und gerendert werden.types/index.d.ts für Typscript. Klicken Sie hier, um Beispiele zu erweitern.
{
"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
Erstellen Sie mit Folgendem eine next-mdx.json -Datei zum Stamm Ihres Projekts:
{
"post" : {
"contentPath" : " content/posts " ,
"basePath" : " /blog " ,
"sortBy" : " date " ,
"sortOrder" : " desc "
},
"category" : {
"contentPath" : " content/categories "
}
}post , category und author sind eindeutige IDs, die als Referenzen für Ihre MDX -Typen verwendet werden.contentPath (erforderlich) befinden sich Ihre MDX -Dateien.basePath (optional) ist der Pfad, der zum Erzeugen von URLs verwendet wird.sortBy (optional, Standardeinstellungen zum title ) ist der Name des zum Sortieren verwendeten Frontmatter -Feld.sortOrder (optional, Standardeinstellungen zu asc ) ist die Sortierreihenfolge. next-mdx enthält 6 Haupthelferfunktionen:
getMdxPaths(sourceName: string)getNode(sourceName, context)getAllNodes(sourceName)getMdxNode(sourceName, context, params)getAllMdxNodes(sourceName, params)useHydrate(node, params) getMdxPaths(sourceName: string) gibt ein Array von Pfadparamenten zurück, die direkt an paths in getstaticPaths "übergeben werden können.
sourceName ist die eindeutige ID, die in next-mdx.json definiert ist // pages/blog/[...slug].js
import { getMdxPaths } from "next-mdx/server"
export async function getStaticPaths ( ) {
return {
paths : await getMdxPaths ( "post" ) ,
fallback : false ,
}
} getNode(sourceName, context) gibt einen MDXNode mit Frontmatter- und relationalen Daten zurück, jedoch ohne MDX -Daten. Das ist sehr schnell und zwischengespeichert.
Verwenden Sie dies anstelle von getMdxNode , wenn Sie keinen MDX -Inhalt auf einer Seite rendern.
sourceName ist die eindeutige ID, die in next-mdx.json definiert istcontext ist der Kontext, der an getStaticProps oder die Schnee als String übergeben wurde. // 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) gibt alle MdxNode des angegebenen Typs/die angegebene Quelle mit Frontmatter- und Relationaldaten zurück, jedoch ohne MDX -Daten. Dies ist auch sehr schnell und zwischengespeichert.
sourceName ist die eindeutige ID, die in next-mdx.json definiert ist import { getAllNodes } from "next-mdx/server"
export async function getStaticProps ( ) {
return {
props : {
posts : await getAllNodes ( "post" ) ,
} ,
}
} getMdxNode(sourceName, context, params) gibt einen MDXNode zurück.
sourceName ist die eindeutige ID, die in next-mdx.json definiert istcontext ist der Kontext, der an getStaticProps oder die Schnee als String übergeben wurde.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) gibt alle MdxNode des angegebenen Typs/die angegebene Quelle zurück.
sourceName ist die eindeutige ID, die in next-mdx.json definiert istparams : {
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) wird auf der Client -Seite zur Feuchtigkeit des statischen Inhalts verwendet.
node ist das MdxNode -Objektparams : {
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 >
)
} Verwenden Sie getAllNodes , wenn Sie Knoten ohne MDX -Inhalt benötigen. Es wird von einem Cache unterstützt und ist sehr schnell. Dies ist praktisch, wenn Sie eine Liste von Knoten benötigen (Beispiel -Post -Teaser) und den MDX -Inhalt nicht verwenden.
Um Komponenten in MDX -Dateien zu verwenden, müssen Sie die Komponenten übergeben, um sowohl getMdxNode/getAllMdxNodes als auch useHydrate zu erhalten.
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 -Optionen können als params über getMdxNode(sourceName, context, params) und getAllMdxNodes(sourceName, params) übergeben werden, wobei params die Form von:
export interface MdxParams {
components ?: MdxRemote . Components
scope ?: Record < string , unknown >
provider ?: MdxRemote . Provider
mdxOptions ?: {
remarkPlugins ?: Pluggable [ ]
rehypePlugins ?: Pluggable [ ]
hastPlugins ?: Pluggable [ ]
compilers ?: Compiler [ ]
filepath ?: string
}
} Beim Abrufen von Knoten mit getMdxNode oder getAllMdxNodes schließt next-mdx die relationalen Daten automatisch von Frontmatter-Tasten ab.
next-mdx.json definiert istAngesichts der folgenden MDX -Dateien.
.
└── content
├── categories
│ └── category-a.mdx
│ └── category-b.mdx
└── posts:
└── example-post.mdx
In example-post können Sie verwandte Kategorien mit Folgendem verweisen:
---
title : Example Post
category :
- category-a
---Sie können dann wie folgt auf die Kategorien zugreifen:
const post = getMdxNode ( "post" , context )
// post.relationships.category Definieren Sie Ihre Knotentypen wie folgt:
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 [ ]
}
} Sie können dann den Post als Rückgabetyp für getNode , getAllNodes , getMdxNode und getAllMdxNode verwenden:
const post = await getMdxNode < Post > ( "post" , context )
const posts = await getAllNodes < Post > ( "post" ) Lizenziert unter der MIT -Lizenz.
