reactjs - Bruke MDX med NextJS 13 som gir useContext-feil

Jeg prøver å bruke mdx-filer i Next.js 13. Jeg har allerede gjort all nødvendig konfigurasjon i next.config og opprettet filen. Inne i app-mappen har jeg > docs > components > accordion > page.mdx

Sidefilen viser bare en tittel som «# Title». Når jeg går til denne URL-en, får jeg følgende feil:

node_modules/@mdx-js/react/lib/index.js (34:26) @ React-feil - createContext fungerer bare i klientkomponenter. Legg til "use client"-direktivet øverst i filen for å bruke det. Les mer: https://nextjs.org/docs/messages/context-in-server-component

Hvordan kunne jeg fikse dette?

min next.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)

Svar #1

På roten av prosjektet ditt, sørg for å legge til filen 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,
  };
}

Også, min next.config.js ser slik ut (samme som det oppgitte eksemplet nedenfor), men jeg har prøvd med din og det fungerer også fint:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
};

const withMDX = require("@next/mdx")();
module.exports = withMDX(nextConfig);

Du kan også ta en titt på dette eksempelet: https://github.com/vercel/next.js/tree/canary/examples/app-dir-mdx

Relaterte artikler