1@layer base {
2  .main {
3    display: flex;
4    flex-direction: column;
5    overflow: hidden;
6    word-wrap: break-word;
7    font-size: 1.125rem; /* 기본 본문 크기 = 18px */
8    padding: 30px 0;
9    box-sizing: border-box;
10    line-height: 1.8;
11    color: hsl(var(--foreground));
12    max-width: 1000px;
13  }
14
15  .main h1 {
16    font-size: 2.5rem; /* 약 40px */
17    font-weight: 800;
18    line-height: 1.2;
19    margin: 1rem 0;
20  }
21
22  .main h2 {
23    font-size: 2rem;
24    font-weight: 700;
25    margin: 1rem 0;
26  }
27
28  .main h3 {
29    font-size: 1.75rem;
30    font-weight: 600;
31    margin: 1rem 0;
32  }
33}

1import type { MDXComponents } from "mdx/types";
2import React from "react";
3import { Pre } from "./components/Pre";
4import Header from "./components/Header";
5import Footer from "./components/Footer";
6
7const H1: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = (props) => (
8  <h1 className="text-4xl font-bold my-7" {...props} />
9);
10const H2: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = (props) => (
11  <h2 className="text-3xl font-semibold my-6" {...props} />
12);
13const H3: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = (props) => (
14  <h3 className="text-2xl font-semibold my-5" {...props} />
15);
16. . .
17
18export function useMDXComponents(components: MDXComponents): MDXComponents {
19  return {
20    h1: H1,
21    h2: H2,
22    h3: H3,
23    . . .
24    ...components,
25  };
26}
27

1// mdx-components.tsx
2export function useMDXComponents(components: MDXComponents): MDXComponents {
3  return {
4    h1: H1,
5    . . . .
6    code: InlineCode,
7    pre: CodeBlock,
8    ...components,
9  };
10}
11
12// CodeBlock.tsx
13const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
14  if (!code) return null;
15
16  return (
17    <Highlight theme={themes.shadesOfPurple} code={code} language={language}>
18      {({ style, tokens, getLineProps, getTokenProps }) => (
19        <pre style={style}>
20          {tokens.map((line, i) => (
21            <div key={i} {...getLineProps({ line })}>
22              <span>{i + 1}</span>
23              {line.map((token, key) => (
24                <span key={key} {...getTokenProps({ token })} />
25              ))}
26            </div>
27          ))}
28        </pre>
29      )}
30    </Highlight>
31  );
32};

1{
2  '$$typeof': Symbol(react.transitional.element),
3  type: [Function: InlineCode],
4  key: null,
5  props: {
6    className: 'language-javascript',
7    children: 'function greet(name) {\r\n' +
8      '  return `Hello, ${name}!`;\r\n' +
9      '}\r\n' +
10      '\r\n' +
11      'console.log(greet("World"));\n'
12  },
13  _owner: {
14    name: 'MDXContent',
15    env: 'Server',
16    key: null,
17    owner: null,
18    props: { params: [Promise], searchParams: [Promise] }
19  },
20  _store: {}
21}

1export default function CodeBlock({
2  children, // React 노드 - 코드 데이터 얻기 위함
3
4}: CodeBlockProps): JSX.Element {
5. . .
6const className = children?.props.className; // 코드가 어떤 포맷으로 쓰였는지 확인하기 위함('language-<포맷>' 형태)

1interface CodeElementProps {
2  children?: string;
3  className?: string;
4}

1const { className: codeClassName } = children.props as CodeElementProps;
2const { title, highlight, language } = parseMeta(codeClassName);
3
4const { children: codeString } = children.props as CodeElementProps;
5const code = typeof codeString === "string" ? codeString : "";
6
7return (
8    <Highlight theme={themes.dracula} code={code} language={language}>
9      {({ style, tokens, getLineProps, getTokenProps }) => {
10        const slicedTokens = tokens.slice(0, -1);
11
12        return (
13          <pre
14            style={{
15              ...style,
16              borderRadius: "10px",
17              padding: "10px 0",
18              margin: "20px 0",
19            }}
20          >
21            {slicedTokens.map((line, i) => (
22              <div key={i} {...getLineProps({ line })}>
23                <span style={{ padding: "0 15px 0 10px", color: "#6a6192" }}>
24                  {i + 1}
25                </span>
26                {line.map((token, key) => (
27                  <span key={key} {...getTokenProps({ token })} />
28                ))}
29              </div>
30            ))}
31          </pre>
32        );
33      }}
34    </Highlight>
35  );

1const posts = await Promise.all(
2  slugs.map(async (slug) => {
3    const data = await import(`../app/(contents)/${slug}/page.mdx`);
4    const metadata = data.meta;
5    return { slug, ...metadata } as PostData;
6  })
7);

1// MDX 파일들이 위치한 디렉토리
2const postsDir = path.join(process.cwd(), "src", "app", "(contents)");

1import remarkGfm from "remark-gfm";
2import createMDX from "@next/mdx";
3
4/** @type {import('next').NextConfig} */
5const nextConfig = {
6  // Allow .mdx extensions for files
7  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
8  // Optionally, add any other Next.js config below
9};
10
11const withMDX = createMDX({
12  // Add markdown plugins here, as desired
13  options: {
14    remarkPlugins: [remarkGfm],
15  },
16});
17
18// Combine MDX and Next.js config
19export default withMDX(nextConfig);

1> next dev --turbo
2
3   ▲ Next.js 15.1.7 (Turbopack)
4   - Local:        http://localhost:3000
5   - Network:      http://192.168.35.53:3000
6   - Experiments (use with caution):
7     · turbo
8
9 ✓ Starting...
10[Error: loader /Users/castle_bell/Documents/Github/bellog/node_modules/.pnpm/@next+mdx@15.2.4_@mdx-js+loader@3.1.0_acorn@8.14.1__@mdx-js+react@3.1.0_@types+react@19.0.10_react@19.0.0_/node_modules/@next/mdx/mdx-js-loader.js for match "*.mdx" does not have serializable options. Ensure that options passed are plain JavaScript objects and values.]

1  "scripts": {
2    "dev": "next dev --turbo",
3    "build": "next build",
4    "start": "next start",
5    "lint": "next lint",
6    "prepare": "husky"
7  },