npx create-next-app@latest --use-pnpm

✔ What is your project named? … soulee.dev
✔ Would you like to use TypeScript? … Yes
✔ Which linter would you like to use? › Biome
✔ Would you like to use React Compiler? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No

pnpm add nextra @types/mdx

import nextra from "nextra";
 
const withNextra = nextra({});
 
// withNextra 자체가 아니라 호출 결과를 export
export default withNextra({});

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

├── app/
│   ├── [...mdxPath]/
│   │   └── page.tsx        ← MDX catch-all 라우트
│   ├── page.tsx            ← 홈 (/ 루트, catch-all보다 우선)
│   ├── posts/
│   │   └── page.tsx        ← 포스트 목록 (/posts)
│   ├── tags/
│   │   └── [tag]/
│   │       └── page.tsx    ← 태그별 필터 (/tags/xxx)
│   ├── about/
│   │   └── page.tsx        ← 소개 페이지 (/about)
│   ├── projects/
│   │   └── page.tsx        ← 프로젝트 페이지 (/projects)
│   ├── og/
│   │   └── [...path]/
│   │       └── route.tsx   ← OG 이미지 생성
│   ├── layout.tsx
│   └── globals.css
├── content/
│   └── posts/
│       └── building-blog-with-nextra.mdx   ← MDX 포스트
├── mdx-components.tsx
└── next.config.ts

ReferenceError: MDXContent is not defined

import { generateStaticParamsFor, importPage } from "nextra/pages";
import { useMDXComponents as getMDXComponents } from "@/mdx-components";
 
type Props = {
  params: Promise<{ mdxPath: string[] }>;
};
 
export const generateStaticParams = generateStaticParamsFor("mdxPath");
 
export default async function PostPage(props: Props) {
  const params = await props.params;
  const {
    default: MDXContent,
    toc,
    metadata,
    sourceCode,
  } = await importPage(params.mdxPath);
 
  const Wrapper = getMDXComponents().wrapper;
 
  if (!Wrapper) {
    return <MDXContent {...props} params={params} />;
  }
 
  return (
    <Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
      <MDXContent {...props} params={params} />
    </Wrapper>
  );
}

// lib/types.ts
import type { Item } from "nextra/normalize-pages";
 
export type PostFrontMatter = {
  title: string;
  date: string;
  tags: string[];
  description?: string;
};
 
export type Post = Omit<Item, "frontMatter"> & {
  frontMatter: PostFrontMatter;
};

// lib/get-posts.ts
import { normalizePages } from "nextra/normalize-pages";
import { getPageMap } from "nextra/page-map";
import type { Post } from "./types";
 
export async function getPosts(): Promise<Post[]> {
  const { directories } = normalizePages({
    list: await getPageMap("/posts"),
    route: "/posts",
  });
 
  return directories
    .filter((post) => post.name !== "index")
    .sort((a, b) => {
      const dateA = a.frontMatter?.date
        ? new Date(a.frontMatter.date).getTime()
        : 0;
 
      const dateB = b.frontMatter?.date
        ? new Date(b.frontMatter.date).getTime()
        : 0;
 
      return dateB - dateA;
    }) as Post[];
}

pnpm add -D lint-staged
npx husky init

pnpm lint-staged

"lint-staged": {
  "*.{js,ts,jsx,tsx,json,css}": "biome check --write --no-errors-on-unmatched"
}

Your Worker exceeded the size limit of 3 MiB.

ERROR  packages field missing or empty

packages: []
ignoredBuiltDependencies:
  - sharp
  - unrs-resolver

sh: 1: husky: not found
ELIFECYCLE  Command failed.

{
  "scripts": {
    "prepare": "husky || true"
  }
}