next mdx
1.0.0
Next-MDXは、ローカルMDXファイルを取得およびレンダリングするためのヘルパー関数のセットを提供します。リレーショナルデータを処理し、カスタムコンポーネントをサポートし、タイプスクリプトの準備ができており、非常に高速です。
Next-MDXは、 MDXを搭載したページ、マルチユーザーブログ、カテゴリページを作成するのに最適です。
https://next-mdx-example.vercel.app
次のMDXがどのように機能するかを学びます。例を見てください。
next-mdx.jsonを開いて、サンプルの構成を確認します。pages/[[...slug]].tsx MDXファイルがどのようにフェッチおよびレンダリングされているかを確認します。types/index.d.ts参照してください。 クリックして例を展開します。
{
"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
以下を使用して、プロジェクトのルートでnext-mdx.jsonファイルを作成します。
{
"post" : {
"contentPath" : " content/posts " ,
"basePath" : " /blog " ,
"sortBy" : " date " ,
"sortOrder" : " desc "
},
"category" : {
"contentPath" : " content/categories "
}
}post 、 category 、およびauthorキーは、MDXタイプの参照として使用される一意のIDです。contentPath （必須）は、MDXファイルの配置場所です。basePath （オプション）は、URLを生成するために使用されるパスです。sortBy （オプション、デフォルトはtitleになります）は、ソートに使用されるFrontMatterフィールドの名前です。sortOrder （オプション、デフォルトはasc ）はソート順序です。 next-mdx 6つのメインヘルパー関数を公開します。
getMdxPaths(sourceName: string)getNode(sourceName, context)getAllNodes(sourceName)getMdxNode(sourceName, context, params)getAllMdxNodes(sourceName, params)useHydrate(node, params) getMdxPaths(sourceName: string) getStaticPaths paths inに直接渡すことができるパスパラメーションの配列を返します。
sourceName next-mdx.jsonで定義されている一意のIDです // pages/blog/[...slug].js
import { getMdxPaths } from "next-mdx/server"
export async function getStaticPaths ( ) {
return {
paths : await getMdxPaths ( "post" ) ,
fallback : false ,
}
} getNode(sourceName, context) MDXデータを使用しないFrontMatterおよびRelational Dataを使用してMDXNodeを返します。これは本当に速くてキャッシュされています。
ページでMDXコンテンツをレンダリングしていない場合は、 getMdxNodeの代わりにこれを使用します。
sourceName next-mdx.jsonで定義されている一意のIDです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(sourceName)指定されたタイプ/ソースのすべてのMdxNodeを、mdxデータを使用しないでください。これも非常に高速でキャッシュされています。
sourceName next-mdx.jsonで定義されている一意のIDです import { getAllNodes } from "next-mdx/server"
export async function getStaticProps ( ) {
return {
props : {
posts : await getAllNodes ( "post" ) ,
} ,
}
} getMdxNode(sourceName, context, params) MDXNodeを返します。
sourceName next-mdx.jsonで定義されている一意のIDです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(sourceName, params)指定されたタイプ/ソースのすべてのMdxNodeを返します。
sourceName next-mdx.jsonで定義されている一意のIDです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(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 >
)
} MDXコンテンツなしでノードが必要な場合は、 getAllNodes使用します。それはキャッシュに裏付けられており、本当に速いです。これは、ノードのリスト（ポストティーザーの例）が必要で、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オプションはgetMdxNode(sourceName, context, params)と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キーからリレーショナルデータを自動的に推測します。
next-mdx.jsonで定義されているキーと同じでなければなりません次の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 ノードの種類を次のように定義します。
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 [ ]
}
}その後、 getNode 、 getAllNodes 、 getMdxNode 、およびgetAllMdxNodeのリターンタイプとしてPostを使用できます。
const post = await getMdxNode < Post > ( "post" , context )
const posts = await getAllNodes < Post > ( "post" ) MITライセンスに基づいてライセンスされています。
