Использование MDX с NextJS 13 возвращает ошибку useContext
Я пытаюсь использовать файлы mdx в Next.js 13. Я уже выполнил всю необходимую настройку в next.config и создал файл. Внутри папки приложения у меня есть > документы > компоненты > аккордеон > page.mdx
Файл подкачки отображает только заголовок типа «# Title». Когда я перехожу по этому URL-адресу, я получаю следующую ошибку:
node_modules/@mdx-js/react/lib/index.js (34:26) @ Ошибка React — createContext работает только в клиентских компонентах. Добавьте директиву «use client» вверху файла, чтобы использовать его. Подробнее: https://nextjs.org/docs/messages/context-in-server-component
Как я могу это исправить?
мой следующий.config.js
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
options: {
remarkPlugins: [],
rehypePlugins: [],
},
})
/** @type {import('next').NextConfig} */
const nextConfig = {
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
experimental: {
appDir: true,
},
}
module.exports = withMDX(nextConfig)
@YoussoufOumar, как я уже сказал, внутри приложения> документы> компоненты> аккордеон> page.mdx Содержимое файла — это просто заголовок. # Заголовок
Ответы 1
Обязательно добавьте в корень вашего проекта файл mdx-components.tsx:
import type { MDXComponents } from "mdx/types";
// This file is required to use MDX in `app` directory.
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
// Allows customizing built-in components, e.g. to add styling.
// h1: ({ children }) => <h1 style = {{ fontSize: "100px" }}>{children}</h1>,
...components,
};
}
Кроме того, мой next.config.js выглядит так (так же, как в приведенном ниже примере), но я пробовал с вашим, и он также работает нормально:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
};
const withMDX = require("@next/mdx")();
module.exports = withMDX(nextConfig);
Также вы можете взглянуть на этот пример: https://github.com/vercel/next.js/tree/canary/examples/app-dir-mdx
Где вы используете mdx в коде?