next mdx
1.0.0
Next-MDX fournit un ensemble de fonctions d'assistance pour récupérer et rendre les fichiers MDX locaux. Il gère les données relationnelles , prend en charge les composants personnalisés , prêts à dresser et est vraiment rapide .
Next-MDX est idéal pour construire des pages alimentées par MDX, des blogs multi-utilisateurs, des pages de catégorie..etc.
https://next-mdx-example.vercel.app
Découvrez comment fonctionne le prochain MDX en examinant des exemples.
next-mdx.json pour voir l'exemple de configuration.pages/[[...slug]].tsx pour voir comment les fichiers MDX sont récupérés et rendus.types/index.d.ts pour TypeScript. Cliquez pour développer des exemples.
{
"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
Créez un fichier next-mdx.json à la racine de votre projet avec les suivants:
{
"post" : {
"contentPath" : " content/posts " ,
"basePath" : " /blog " ,
"sortBy" : " date " ,
"sortOrder" : " desc "
},
"category" : {
"contentPath" : " content/categories "
}
}post , category et les clés author sont des ID uniques utilisées comme références pour vos types MDX.contentPath (requis) est l'endroit où se trouvent vos fichiers MDX.basePath (facultatif) est le chemin utilisé pour générer des URL.sortBy (Facultatif, par défaut de title ) est le nom du champ Frontmatter utilisé pour le tri.sortOrder (Facultatif, par défaut à asc ) est l'ordre de tri. next-mdx expose 6 fonctions d'assistance principales:
getMdxPaths(sourceName: string)getNode(sourceName, context)getAllNodes(sourceName)getMdxNode(sourceName, context, params)getAllMdxNodes(sourceName, params)useHydrate(node, params) getMdxPaths(sourceName: string) Renvoie un tableau de paramètres de chemin qui peuvent être transmis directement aux paths in GetStaticPaths`.
sourceName est l'ID unique défini dans 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) Renvoie un MDXNode avec Frontmatter et Données relationnelles mais sans données MDX. C'est vraiment rapide et mis en cache.
Utilisez-le au lieu de getMdxNode si vous ne rendez pas le contenu MDX sur une page.
sourceName est l'ID unique défini dans next-mdx.jsoncontext est le contexte passé pour getStaticProps ou la limace en tant que chaîne. // 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) renvoie tous MdxNode du type / source donné avec des données de front et des données relationnelles mais sans données MDX. C'est aussi très rapide et mis en cache.
sourceName est l'ID unique défini dans next-mdx.json import { getAllNodes } from "next-mdx/server"
export async function getStaticProps ( ) {
return {
props : {
posts : await getAllNodes ( "post" ) ,
} ,
}
} getMdxNode(sourceName, context, params) renvoie un MDXNode .
sourceName est l'ID unique défini dans next-mdx.jsoncontext est le contexte passé pour getStaticProps ou la limace en tant que chaîne.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) renvoie tous MdxNode du type / source donné.
sourceName est l'ID unique défini dans 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) est utilisé du côté client pour hydrater le contenu statique.
node est l'objet 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 >
)
} Utilisez getAllNodes lorsque vous avez besoin de nœuds sans le contenu MDX. Il est soutenu par un cache et est vraiment rapide. Ceci est pratique lorsque vous avez besoin d'une liste de nœuds (exemple de post-teasers) et que vous n'utilisez pas le contenu MDX.
Pour utiliser les composants dans les fichiers MDX, vous devez passer les composants à getMdxNode/getAllMdxNodes et 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 ,
} ,
}
} Les options MDX peuvent être transmises en params à la fois à getMdxNode(sourceName, context, params) et getAllMdxNodes(sourceName, params) où params prennent la forme de:
export interface MdxParams {
components ?: MdxRemote . Components
scope ?: Record < string , unknown >
provider ?: MdxRemote . Provider
mdxOptions ?: {
remarkPlugins ?: Pluggable [ ]
rehypePlugins ?: Pluggable [ ]
hastPlugins ?: Pluggable [ ]
compilers ?: Compiler [ ]
filepath ?: string
}
} Lors de la récupération des nœuds avec getMdxNode ou getAllMdxNodes , next-mdx déduira automatiquement les données relationnelles des touches FrontMatter.
next-mdx.jsonCompte tenu des fichiers MDX suivants.
.
└── content
├── categories
│ └── category-a.mdx
│ └── category-b.mdx
└── posts:
└── example-post.mdx
Dans example-post vous pouvez référencer les catégories connexes en utilisant les éléments suivants:
---
title : Example Post
category :
- category-a
---Vous pouvez ensuite accéder aux catégories comme suit:
const post = getMdxNode ( "post" , context )
// post.relationships.category Définissez vos types de nœuds comme suit:
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 [ ]
}
} Vous pouvez ensuite utiliser Post comme type de retour pour getNode , getAllNodes , getMdxNode et getAllMdxNode :
const post = await getMdxNode < Post > ( "post" , context )
const posts = await getAllNodes < Post > ( "post" ) Licencié sous la licence du MIT.
