인프런 커뮤니티 질문&답변

에러화면

• /mdx-page 렌더링이 안됩니다...

작업 순서

• 패키지 설치

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

• next.config.ts

  import type { NextConfig } from 'next';
  import createMDX from '@next/mdx';
  
  const nextConfig: NextConfig = {
    /* config options here */
    // experimental: {
    //   typedRoutes: true,
    // },
    images: {
      remotePatterns: [
        {
          hostname: 'picsum.photos',
        },
        {
          hostname: 'images.unsplash.com',
        },
        {
          hostname: 'www.notion.so',
        },
        {
          hostname: 'prod-files-secure.s3.us-west-2.amazonaws.com',
        },
      ],
    },
    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  };
  
  const withMDX = createMDX({
    // Add markdown plugins here, as desired
  });
  
  // Merge MDX config with Next.js config
  export default withMDX(nextConfig);
  

• mdx-components.tsx

  import type { MDXComponents } from 'mdx/types';
  
  export function useMDXComponents(components: MDXComponents): MDXComponents {
    return {
      ...components,
    };
  }

• app/mdx-page/page.mdx

  # Welcome to my MDX page!
  
  This is some **bold** and _italics_ text.
  
  This is a list in markdown:
  
  - One
  - Two
  - Three
  
  Checkout my React component:

• package.json

  {
    "name": "notion-blog-nextjs",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "dev": "next dev --turbopack",
      "build": "next build",
      "start": "next start",
      "lint": "next lint",
      "lint:fix": "next lint --fix",
      "format": "prettier --write ."
    },
    "dependencies": {
      "@mdx-js/loader": "^3.1.0",
      "@mdx-js/react": "^3.1.0",
      "@next/mdx": "^15.3.2",
      "@notionhq/client": "^3.0.1",
      "@radix-ui/react-select": "^2.2.4",
      "@radix-ui/react-separator": "^1.1.6",
      "@radix-ui/react-slot": "^1.2.2",
      "@types/mdx": "^2.0.13",
      "class-variance-authority": "^0.7.1",
      "clsx": "^2.1.1",
      "date-fns": "^4.1.0",
      "lucide-react": "^0.507.0",
      "next": "15.2.5",
      "postcss": "^8.5.3",
      "react": "^19.0.0",
      "react-dom": "^19.0.0",
      "react-icons": "^5.5.0",
      "tailwind-merge": "^3.2.0"
    },
    "devDependencies": {
      "@eslint/eslintrc": "^3",
      "@eslint/js": "^9.26.0",
      "@tailwindcss/postcss": "^4.1.5",
      "@types/node": "^20",
      "@types/react": "^19",
      "@types/react-dom": "^19",
      "eslint": "^9",
      "eslint-config-next": "15.2.5",
      "eslint-config-prettier": "^10.1.2",
      "globals": "^16.0.0",
      "prettier": "^3.5.3",
      "prettier-plugin-tailwindcss": "^0.6.11",
      "tailwindcss": "^4.1.5",
      "tw-animate-css": "^1.2.9",
      "typescript": "^5"
    }
  }