React

React” の投稿: 1 件

Next.jsのApp RouterでMarkdown(MDX)を使う方法

2025/02/17

Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成を簡単に実現できます。最近、App Routerが導入され、ルーティングの管理がより柔軟になりました。この記事では、Next.jsのApp Routerを使用してMarkdown(MDX)を利用する方法について解説します。

MDXとは？

MDXは、MarkdownとJSXを組み合わせたファイル形式です。Markdownのシンプルさを保ちながら、Reactコンポーネントを埋め込むことで、動的なコンテンツを持つ文書を簡単に作成できます。

Next.jsのセットアップ

まず、Next.jsプロジェクトを作成します。以下のコマンドを実行してください。

npx create-next-app@latest my-next-app
cd my-next-app

次に、MDXを使うために必要なパッケージをインストールします。

npm install @next/mdx @mdx-js/loader

MDXの設定

次に、Next.jsの設定ファイルであるnext.config.jsまたはnext.config.tsを更新します。以下のコードを追加してください。

next.config.js または next.config.ts

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

この設定により、MDXファイルをページとして扱うことができるようになります。

MDXファイルの作成

次に、pagesフォルダ内にpostsという新しいフォルダを作成し、その中にexample.mdxというファイルを作成します。以下は、example.mdxのサンプル内容です。

example.mdx

# MDXのサンプル

これはMDXファイルの例です。以下はReactコンポーネントの例です。

<MyComponent />

## セクション

このセクションでは、MDXの使い方について説明します。

コンポーネントの作成

次に、componentsフォルダを作成し、MyComponent.jsxまたはMyComponent.tsxというファイルを作成します。以下は、MyComponent.jsxのサンプル内容です。

MyComponent.jsx または MyComponent.tsx

const MyComponent = () => {
  return <div>これは埋め込まれたコンポーネントです。</div>
}

export default MyComponent;

ページの作成

最後に、pages/posts/example.jsxまたはpages/posts/example.tsxというファイルを作成し、以下のコードを追加します。

pages/posts/example.jsx または pages/posts/example.tsx

import Example from '../../posts/example.mdx'

const ExamplePage = () => {
  return <Example />
}

export default ExamplePage;

アプリの起動

すべての設定が完了したら、アプリを起動します。

npm run dev

ブラウザでhttp://localhost:3000/posts/exampleにアクセスすると、MDXファイルが正しく表示されることを確認できます。

まとめ

この記事では、Next.jsのApp RouterでMarkdown(MDX)を使う方法を紹介しました。MDXを使用することで、Markdownの利便性とReactコンポーネントの柔軟性を組み合わせて、よりリッチなコンテンツを作成できます。ぜひ、自分のプロジェクトでも活用してみてください。

タグ:

• Next
• React
• JavaScript