next mdx

️ تم تقاعد هذا المشروع. فكر في استخدام MDX-Remote أو MDX-Bundler أو Nextra.

يوفر Next-MDX مجموعة من وظائف المساعد لجلب ملفات MDX المحلية وتقديمها. إنه يتعامل مع البيانات العلائقية ، ويدعم المكونات المخصصة ، ويستعد TypeScript وسريع حقًا .

يعد Next-MDX رائعًا لبناء الصفحات التي تعمل بالطاقة MDX ، والمدونات متعددة المستخدمين ، وصفحات الفئة .. TEC.

جدول المحتويات

• العرض التوضيحي
• بداية سريعة
• أمثلة
• تثبيت
• إعدادات
• مرجع
  • getmdxpaths
  • getNode
  • getallnodes
  • getMdxnode
  • getallmdxnodes
  • usehydrate
  • getallnodes vs getAllMdxnodes
• مكونات MDX
• خيارات MDX
• البيانات العلائقية
• الإضافات
• TypeScript

العرض التوضيحي

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

بداية سريعة

تعرف على كيفية عمل MDX التالي من خلال النظر في الأمثلة.

1. انتقل إلى الصفحة على سبيل المثال
2. افتح next-mdx.json لرؤية تكوين العينة.
3. فتح pages/[[...slug]].tsx لمعرفة كيفية جلب ملفات MDX وتقديمها.
4. انظر types/index.d.ts لـ TypeScript.

أمثلة

انقر لتوسيع الأمثلة.

التالي mdx.json

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

صفحات/منشورات/[... Slug] .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 ,
    } ,
  }

} 

تثبيت

npm i --save next-mdx

إعدادات

قم بإنشاء ملف next-mdx.json على جذر مشروعك بما يلي:

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

1. تعتبر مفاتيح post و category author معرفات فريدة من نوعها تستخدم كمراجع لأنواع MDX الخاصة بك.
2. contentPath (مطلوب) هو المكان الذي توجد فيه ملفات MDX.
3. basePath (اختياري) هو المسار المستخدم لإنشاء عناوين URL.
4. sortBy (اختياري ، الافتراضيات title ) هو اسم حقل Frontmatter المستخدم للفرز.
5. sortOrder (اختياري ، الافتراضيات إلى asc ) هو ترتيب الفرز.

مرجع

يعرض next-mdx 6 وظائف المساعد الرئيسي:

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

getmdxpaths

getMdxPaths(sourceName: string) إرجاع مجموعة من معاملات المسار التي يمكن تمريرها مباشرة إلى paths in getStaticPaths`.

• sourceName هو المعرف الفريد المحدد في 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

getNode(sourceName, context) إرجاع MDXNode مع المواجهة والبيانات العلائقية ولكن بدون بيانات MDX. هذا حقا سريع واخحتر به.

استخدم هذا بدلاً من getMdxNode إذا لم تقم بتقديم محتوى MDX على صفحة.

• sourceName هو المعرف الفريد المحدد في next-mdx.json
• context هو السياق الذي تم تمريره إلى getStaticProps أو Slug كسلسلة.

مثال

 // 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) بإرجاع جميع MdxNode من النوع/المصدر المحدد مع البيانات الأمامية والبيانات العلائقية ولكن بدون بيانات MDX. هذا هو أيضا سريع حقا وتخزين مؤقت.

• sourceName هو المعرف الفريد المحدد في next-mdx.json

مثال

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

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

getMdxnode

getMdxNode(sourceName, context, params) إرجاع MDXNode .

• sourceName هو المعرف الفريد المحدد في next-mdx.json
• context هو السياق الذي تم تمريره إلى getStaticProps أو Slug كسلسلة.
• 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

getAllMdxNodes(sourceName, params) إرجاع جميع MdxNode من النوع/المصدر المحدد.

• sourceName هو المعرف الفريد المحدد في next-mdx.json
• 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

يتم استخدام 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 >
  )
} 

getallnodes vs getAllMdxnodes

استخدم getAllNodes عندما تحتاج إلى عقد بدون محتوى MDX. إنه مدعوم بذاكرة التخزين المؤقت وسريع حقًا. هذا مفيد عندما تحتاج إلى قائمة من العقد (مثال على النشر المليءات) وأنت لا تستخدم محتوى MDX.

مكونات 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

يمكن تمرير خيارات MDX params لكل من getMdxNode(sourceName, context, 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.

مؤتمر

1. يجب أن يكون اسم حقل FrontMatter هو نفسه المفتاح المحدد في next-mdx.json
2. يجب أن يكون حقل Frontmatter مجموعة من القيم.

مثال

بالنظر إلى ملفات 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 

الإضافات

• Next-MDX-TOC: إضافة جدول المحتويات إلى صفحات MDX.

TypeScript

حدد أنواع العقدة الخاصة بك على النحو التالي:

 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" ) 

رخصة

مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.

يوسع