next mdx

️ Este proyecto ha sido retirado. Considere usar Next-MDX-Remote o MDX-Bundler o Nextra.

Next-MDX proporciona un conjunto de funciones auxiliares para obtener y representar archivos MDX locales. Maneja datos relacionales , admite componentes personalizados , mecanografiados listos y es realmente rápido .

Next-MDX es ideal para construir páginas con MDX, blogs de usuarios múltiples, páginas de categoría ... Etc.

Tabla de contenido

• Manifestación
• Comienzo rápido
• Ejemplos
• Instalación
• Configuración
• Referencia
  • getMdxpaths
  • getNode
  • GetAllnodes
  • getMdxnode
  • getAllMdxnodes
  • Usehidrato
  • getAllnodes vs getAllMdxnodes
• Componentes MDX
• Opciones de MDX
• Datos relacionales
• Complementos
• Mecanografiado

Manifestación

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

Comienzo rápido

Aprenda cómo funciona Next-MDX mirando ejemplos.

1. Ir a la página de ejemplo
2. Abra next-mdx.json para ver la configuración de la muestra.
3. Abra pages/[[...slug]].tsx para ver cómo los archivos MDX se obtienen y se representan.
4. Consulte types/index.d.ts para un mecanografiado.

Ejemplos

Haga clic para expandir ejemplos.

Next-mdx.json

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

páginas/publicaciones/[... Babosa] .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 ,
    } ,
  }

} 

Instalación

npm i --save next-mdx

Configuración

Cree un archivo next-mdx.json en la raíz de su proyecto con lo siguiente:

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

1. Las claves post , category y author son ID únicas utilizadas como referencias para sus tipos MDX.
2. contentPath (requerido) es donde se encuentran sus archivos MDX.
3. basePath (opcional) es la ruta utilizada para generar URL.
4. sortBy (opcional, predeterminado al title ) es el nombre del campo Frontmatter utilizado para la clasificación.
5. sortOrder (opcional, predeterminado a asc ) es el orden de clasificación.

Referencia

next-mdx expone 6 funciones de ayuda principal:

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

getMdxpaths

getMdxPaths(sourceName: string) Devuelve una matriz de parámetros de ruta que se pueden pasar directamente a paths in GetstaticPaths`.

• sourceName es la identificación única definida en next-mdx.json

Ejemplo

 // 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) devuelve un MDXNode con frontmatter y datos relacionales pero sin datos MDX. Esto es realmente rápido y almacenado en caché.

Use esto en lugar de getMdxNode si no está representando contenido MDX en una página.

• sourceName es la identificación única definida en next-mdx.json
• context es el contexto que se pasa a getStaticProps o la babosa como una cadena.

Ejemplo

 // 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) Devuelve todo MdxNode del tipo/fuente dado con los datos frontales y los datos relacionales pero sin datos MDX. Esto también es realmente rápido y almacenado en caché.

• sourceName es la identificación única definida en next-mdx.json

Ejemplo

 import { getAllNodes } from "next-mdx/server"

export async function getStaticProps ( ) {
  return {
    props : {
      posts : await getAllNodes ( "post" ) ,
    } ,
  }
}

getMdxnode

getMdxNode(sourceName, context, params) devuelve un MDXNode .

• sourceName es la identificación única definida en next-mdx.json
• context es el contexto que se pasa a getStaticProps o la babosa como una cadena.
• params :

 {
  components ?: MdxRemote . Components
  scope ?: Record < string , unknown >
  provider ?: MdxRemote . Provider
  mdxOptions ?: {
    remarkPlugins ?: Pluggable [ ]
    rehypePlugins ?: Pluggable [ ]
    hastPlugins ?: Pluggable [ ]
    compilers ?: Compiler [ ]
    filepath ?: string
  }
} 

Ejemplo

 // 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) Devuelve todo MdxNode del tipo/fuente dado.

• sourceName es la identificación única definida en next-mdx.json
• params :

 {
  components ?: { name : React . Component } ,
  scope ?: { } ,
  provider ?: { component : React . Component , props : Record < string , unknown > } ,
  mdxOptions : {
    remarkPlugins : [ ] ,
    rehypePlugins : [ ] ,
    hastPlugins : [ ] ,
    compilers : [ ] ,
  }
} 

Ejemplo

 import { getAllMdxNodes } from "next-mdx/server"

export async function getStaticProps ( ) {
  const posts = await getAllMdxNodes ( "post" )

  return {
    props : {
      posts : posts . filter ( ( post ) => post . frontMatter . featured ) ,
    } ,
  }
}

Usehidrato

useHydrate(node, params) se usa en el lado del cliente para hidratar el contenido estático.

• node es el objeto MdxNode
• params :

 {
  components ?: { name : React . Component } ,
  provider ?: { component : React . Component , props : Record < string , unknown > }
}

Ejemplo

 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

Use getAllNodes cuando necesite nodos sin el contenido MDX. Está respaldado por un caché y es realmente rápido. Esto es útil cuando necesitas una lista de nodos (ejemplo de teasers de publicaciones) y no estás usando el contenido MDX.

Componentes MDX

Para usar componentes dentro de los archivos MDX, debe pasar los componentes a getMdxNode/getAllMdxNodes y useHydrate .

Ejemplo

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

Opciones de MDX

Las opciones de MDX se pueden pasar como params para getMdxNode(sourceName, context, params) y getAllMdxNodes(sourceName, params) donde params toma la forma 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
  }
} 

Datos relacionales

Al recuperar nodos con getMdxNode o getAllMdxNodes , next-mdx inferirá automáticamente los datos relacionales de las claves de frontmatter.

Convención

1. El nombre del campo de la redonma debe ser la misma que la clave definida en next-mdx.json
2. El campo de primera hora debe ser una matriz de valores.

Ejemplo

Dados los siguientes archivos MDX.

 .
└── content
    ├── categories
    │   └── category-a.mdx
    │   └── category-b.mdx
    └── posts:
        └── example-post.mdx

En example-post puede hacer referencia a categorías relacionadas con las siguientes:

 ---
title : Example Post
category :
  - category-a
---

Luego puede acceder a las categorías de la siguiente manera:

 const post = getMdxNode ( "post" , context )

// post.relationships.category 

Complementos

• Next-MDX-TOC: Agregue la tabla de contenido a las páginas MDX.

Mecanografiado

Defina sus tipos de nodo de la siguiente manera:

 interface Post extends MdxNode < FrontMatterFields > { }

Ejemplo

 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 [ ]
  }
}

Luego puede usar Post como el tipo de retorno para getNode , getAllNodes , getMdxNode y getAllMdxNode :

 const post = await getMdxNode < Post > ( "post" , context )

const posts = await getAllNodes < Post > ( "post" ) 

Licencia

Licenciado bajo la licencia del MIT.

Expandir