원클릭으로 Manus에서 모든 스킬 실행

시작하기

mandu-fs-routes

스타46

포크4

업데이트2026년 4월 22일 04:54

파일 시스템 라우팅 규칙. layout에 html/head/body 금지. app/ 폴더, page.tsx, route.ts, layout.tsx, [id] 작업 시 자동 호출.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

konamgil

konamgil/mandu

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Mandu FS Routes

파일 시스템 기반 라우팅. app/ 폴더의 파일 구조가 URL이 됩니다.

File Naming Conventions

File	Purpose	Export
`page.tsx`	Page component	`default` function component
`route.ts`	API handler	`default` Mandu.filling() chain
`layout.tsx`	Shared layout	`default` function with `children` prop
`loading.tsx`	Loading UI	`default` function component
`error.tsx`	Error UI	`default` function component

URL Mapping

File Path	URL
`app/page.tsx`	`/`
`app/about/page.tsx`	`/about`
`app/blog/[slug]/page.tsx`	`/blog/:slug`
`app/users/[id]/page.tsx`	`/users/:id`
`app/docs/[...path]/page.tsx`	`/docs/*` (catch-all)
`app/(auth)/login/page.tsx`	`/login` (grouped)
`app/api/users/route.ts`	`/api/users`
`app/api/users/[id]/route.ts`	`/api/users/:id`

Layout Rules (CRITICAL)

Layout MUST NOT include <html>, <head>, or <body> tags. Mandu SSR generates these automatically.

// app/layout.tsx - CORRECT
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-background font-sans antialiased">
      {children}
    </div>
  );
}

// app/layout.tsx - WRONG (causes double-wrapping)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>          // <-- DO NOT include
      <head />      // <-- DO NOT include
      <body>        // <-- DO NOT include
        {children}
      </body>
    </html>
  );
}

Nested layouts wrap child pages:

app/layout.tsx              -> wraps ALL pages
app/dashboard/layout.tsx    -> wraps /dashboard/* pages

Page Components

// app/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>
    </main>
  );
}

Pages are server-rendered by default. No "use client" needed unless using Islands.

API Routes

// app/api/users/route.ts
import { Mandu } from "@mandujs/core";

export default Mandu.filling()
  .get((ctx) => ctx.ok({ users: [] }))
  .post(async (ctx) => {
    const body = await ctx.body<{ name: string }>();
    return ctx.created({ user: body });
  });

API routes use .ts extension (NOT .tsx).

Dynamic Routes

// app/users/[id]/page.tsx
export default function UserPage({ params }: { params: { id: string } }) {
  return <h1>User {params.id}</h1>;
}

// app/docs/[...path]/page.tsx
export default function DocsPage({ params }: { params: { path: string[] } }) {
  return <h1>Doc: {params.path.join("/")}</h1>;
}

Route Groups

Parenthesized folders create logical groups without affecting the URL:

app/(marketing)/about/page.tsx   -> /about
app/(marketing)/pricing/page.tsx -> /pricing
app/(app)/dashboard/page.tsx     -> /dashboard

Common Mistakes

Adding <html>/<head>/<body> in layout.tsx (SSR does this)
Using route.tsx instead of route.ts for API handlers
Forgetting to export default from page/layout files
Mixing page.tsx and route.ts in the same directory

Mandu FS Routes

파일 시스템 기반 라우팅. app/ 폴더의 파일 구조가 URL이 됩니다.

File Naming Conventions

File	Purpose	Export
`page.tsx`	Page component	`default` function component
`route.ts`	API handler	`default` Mandu.filling() chain
`layout.tsx`	Shared layout	`default` function with `children` prop
`loading.tsx`	Loading UI	`default` function component
`error.tsx`	Error UI	`default` function component

URL Mapping

File Path	URL
`app/page.tsx`	`/`
`app/about/page.tsx`	`/about`
`app/blog/[slug]/page.tsx`	`/blog/:slug`
`app/users/[id]/page.tsx`	`/users/:id`
`app/docs/[...path]/page.tsx`	`/docs/*` (catch-all)
`app/(auth)/login/page.tsx`	`/login` (grouped)
`app/api/users/route.ts`	`/api/users`
`app/api/users/[id]/route.ts`	`/api/users/:id`

Layout Rules (CRITICAL)

Layout MUST NOT include <html>, <head>, or <body> tags. Mandu SSR generates these automatically.

// app/layout.tsx - CORRECT
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-background font-sans antialiased">
      {children}
    </div>
  );
}

// app/layout.tsx - WRONG (causes double-wrapping)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>          // <-- DO NOT include
      <head />      // <-- DO NOT include
      <body>        // <-- DO NOT include
        {children}
      </body>
    </html>
  );
}

Nested layouts wrap child pages:

app/layout.tsx              -> wraps ALL pages
app/dashboard/layout.tsx    -> wraps /dashboard/* pages

Page Components

// app/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>
    </main>
  );
}

Pages are server-rendered by default. No "use client" needed unless using Islands.

API Routes

// app/api/users/route.ts
import { Mandu } from "@mandujs/core";

export default Mandu.filling()
  .get((ctx) => ctx.ok({ users: [] }))
  .post(async (ctx) => {
    const body = await ctx.body<{ name: string }>();
    return ctx.created({ user: body });
  });

API routes use .ts extension (NOT .tsx).

Dynamic Routes

// app/users/[id]/page.tsx
export default function UserPage({ params }: { params: { id: string } }) {
  return <h1>User {params.id}</h1>;
}

// app/docs/[...path]/page.tsx
export default function DocsPage({ params }: { params: { path: string[] } }) {
  return <h1>Doc: {params.path.join("/")}</h1>;
}

Route Groups

Parenthesized folders create logical groups without affecting the URL:

app/(marketing)/about/page.tsx   -> /about
app/(marketing)/pricing/page.tsx -> /pricing
app/(app)/dashboard/page.tsx     -> /dashboard

Common Mistakes

Adding <html>/<head>/<body> in layout.tsx (SSR does this)
Using route.tsx instead of route.ts for API handlers
Forgetting to export default from page/layout files
Mixing page.tsx and route.ts in the same directory

mandu-fs-routes

Mandu FS Routes

File Naming Conventions

URL Mapping

Layout Rules (CRITICAL)

Page Components

API Routes

Dynamic Routes

Route Groups

Common Mistakes

See also

Mandu FS Routes

File Naming Conventions

URL Mapping

Layout Rules (CRITICAL)

Page Components

API Routes

Dynamic Routes

Route Groups

Common Mistakes

See also

name	mandu-fs-routes
description	파일 시스템 라우팅 규칙. layout에 html/head/body 금지. app/ 폴더, page.tsx, route.ts, layout.tsx, [id] 작업 시 자동 호출.

mandu-fs-routes

Mandu FS Routes

File Naming Conventions

URL Mapping

Layout Rules (CRITICAL)

Page Components

API Routes

Dynamic Routes

Route Groups

Common Mistakes

See also

이 저장소의 다른 Skills

이 저장소의 다른 Skills

Mandu FS Routes

File Naming Conventions

URL Mapping

Layout Rules (CRITICAL)

Page Components

API Routes

Dynamic Routes

Route Groups

Common Mistakes

See also