Next | Clameyes

Cloudflare PagesでNode.JS Compatibility Errorが出たとき

2025/03/20

Cloudflare PagesでNext.jsプロジェクトをデプロイする際に、Node.JS Compatibility Errorに遭遇して解決したので備忘録。

Image from Gyazo

エラー内容

デプロイ後、以下のようなエラーメッセージがページに表示されました。

このエラーは、Cloudflare PagesプロジェクトでNode.jsの組み込みモジュールにアクセスできないことを示しています。

解決方法

Cloudflareダッシュボードから設定する方法

Cloudflareダッシュボードにログインします。
「Workers & Pages」を選択し、該当するPagesプロジェクトを開きます。
「設定」→「ランタイム」→「互換性フラグ」と進みます。
「nodejs_compat」フラグを追加します。

Image from Gyazo

注意: フラグは nodejs_compat とだけ入力します。引用符やその他の文字は不要です。

wrangler.tomlファイルで設定する方法

プロジェクトのルートディレクトリにある wrangler.toml ファイルに以下の行を追加します：

compatibility_flags = [ "nodejs_compat" ]

注意点

Compatibility Flagsを設定した後は、変更を反映させるために再デプロイが必要です。
設定方法によっては、ダッシュボードの「Functions」オプションが見つからない場合があります。その場合は wrangler.toml ファイルでの設定をお試しください。

参考リンク

このエラーに遭遇した際は、ぜひこの方法をお試しください。デプロイの成功をお祈りしています！

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を更新します。以下のコードを追加してください。

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のサンプル内容です。

# MDXのサンプル

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

<MyComponent />

## セクション

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

コンポーネントの作成

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

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

export default MyComponent;

ページの作成

最後に、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コンポーネントの柔軟性を組み合わせて、よりリッチなコンテンツを作成できます。ぜひ、自分のプロジェクトでも活用してみてください。