next mdx
1.0.0
Next-MDX menyediakan satu set fungsi pembantu untuk mengambil dan membuat file MDX lokal. Ini menangani data relasional , mendukung komponen khusus , TypeScript Ready dan sangat cepat .
Next-MDX sangat bagus untuk membangun halaman bertenaga MDX, blog multi-pengguna, halaman kategori..etc.
https://next-mdx-example.vercel.app
Pelajari cara kerja Next-MDX dengan melihat contoh.
next-mdx.json untuk melihat konfigurasi sampel.pages/[[...slug]].tsx untuk melihat bagaimana file MDX diambil dan diterjemahkan.types/index.d.ts untuk TypeScript. Klik untuk memperluas contoh.
{
"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
Buat file next-mdx.json
{
"post" : {
"contentPath" : " content/posts " ,
"basePath" : " /blog " ,
"sortBy" : " date " ,
"sortOrder" : " desc "
},
"category" : {
"contentPath" : " content/categories "
}
}post , category , dan author adalah ID unik yang digunakan sebagai referensi untuk jenis MDX Anda.contentPath (wajib) adalah tempat file MDX Anda berada.basePath (opsional) adalah jalur yang digunakan untuk menghasilkan URL.sortBy (opsional, default ke title ) adalah nama bidang frontmatter yang digunakan untuk menyortir.sortOrder (opsional, default ke asc ) adalah urutan penyortiran. next-mdx memaparkan 6 fungsi pembantu utama:
getMdxPaths(sourceName: string)getNode(sourceName, context)getAllNodes(sourceName)getMdxNode(sourceName, context, params)getAllMdxNodes(sourceName, params)useHydrate(node, params) getMdxPaths(sourceName: string) Mengembalikan array PATH PARAM yang dapat diteruskan langsung ke paths in GetStaticPaths`.
sourceName adalah ID unik yang didefinisikan di 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) Mengembalikan MDXNode dengan frontmatter dan data relasional tetapi tanpa data MDX. Ini sangat cepat dan di -cache.
Gunakan ini alih -alih getMdxNode jika Anda tidak memberikan konten MDX pada halaman.
sourceName adalah ID unik yang didefinisikan di next-mdx.jsoncontext adalah konteks yang diteruskan ke getStaticProps atau Slug sebagai string. // 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) Mengembalikan semua MdxNode dari tipe/sumber yang diberikan dengan frontmatter dan data relasional tetapi tanpa data MDX. Ini juga sangat cepat dan di -cache.
sourceName adalah ID unik yang didefinisikan di next-mdx.json import { getAllNodes } from "next-mdx/server"
export async function getStaticProps ( ) {
return {
props : {
posts : await getAllNodes ( "post" ) ,
} ,
}
} getMdxNode(sourceName, context, params) Mengembalikan MDXNode .
sourceName adalah ID unik yang didefinisikan di next-mdx.jsoncontext adalah konteks yang diteruskan ke getStaticProps atau Slug sebagai string.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) Mengembalikan semua MdxNode dari tipe/sumber yang diberikan.
sourceName adalah ID unik yang didefinisikan di 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) digunakan pada sisi klien untuk menghidrasi konten statis.
node adalah objek 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 >
)
} Gunakan getAllNodes saat Anda membutuhkan node tanpa konten MDX. Ini didukung oleh cache dan sangat cepat. Ini berguna saat Anda membutuhkan daftar node (contoh penggoda posting) dan Anda tidak menggunakan konten MDX.
Untuk menggunakan komponen di dalam file MDX, Anda perlu meneruskan komponen ke getMdxNode/getAllMdxNodes dan 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 ,
} ,
}
} Opsi MDX dapat dilewati sebagai params untuk getMdxNode(sourceName, context, params) dan getAllMdxNodes(sourceName, params) di mana params mengambil bentuk:
export interface MdxParams {
components ?: MdxRemote . Components
scope ?: Record < string , unknown >
provider ?: MdxRemote . Provider
mdxOptions ?: {
remarkPlugins ?: Pluggable [ ]
rehypePlugins ?: Pluggable [ ]
hastPlugins ?: Pluggable [ ]
compilers ?: Compiler [ ]
filepath ?: string
}
} Saat mengambil node dengan getMdxNode atau getAllMdxNodes , next-mdx akan secara otomatis menyimpulkan data relasional dari kunci frontmatter.
next-mdx.jsonMengingat file MDX berikut.
.
└── content
├── categories
│ └── category-a.mdx
│ └── category-b.mdx
└── posts:
└── example-post.mdx
Dalam example-post Anda dapat merujuk kategori terkait menggunakan yang berikut:
---
title : Example Post
category :
- category-a
---Anda kemudian dapat mengakses kategori sebagai berikut:
const post = getMdxNode ( "post" , context )
// post.relationships.category Tentukan tipe simpul Anda sebagai berikut:
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 [ ]
}
} Anda kemudian dapat menggunakan Post sebagai jenis pengembalian untuk getNode , getAllNodes , getMdxNode dan getAllMdxNode :
const post = await getMdxNode < Post > ( "post" , context )
const posts = await getAllNodes < Post > ( "post" ) Berlisensi di bawah lisensi MIT.
