Pages Router를 지원하나요?

아니요. 이 도구는 Next.js 13에 도입된 App Router 아키텍처에 특별히 설계되었으며, Server Components 및 `app/` 디렉토리에 중점을 둡니다.

출력이 TypeScript와 호환되나요?

네. 생성된 코드는 `params` 및 `searchParams`와 같은 `PageProps`에 대한 표준 TypeScript 인터페이스를 포함하여 경로에 대한 타입 안전성을 보장합니다.

SEO 메타데이터를 포함할 수 있나요?

네. 경로 요구 사항에 따라 정적 `Metadata` 객체 또는 동적 `generateMetadata` 함수의 포함 여부를 전환할 수 있습니다.

클라이언트 측 훅이 포함되어 있나요?

기본적으로 이 도구는 서버 컴포넌트를 생성합니다. `useState` 또는 `useEffect`와 같은 훅이 필요한 경우 옵션에서 `"use client"` 지시문을 전환할 수 있습니다.

포매터 및 코드

Next.js App Router 페이지 생성기

Scaffold app/route/page.tsx with metadata and loaders.

Runs in your browser

RouteClient component ("use client")Generate metadatagenerateStaticParamsloading.tsx

app/dashboard/[id]/page.tsx

import { type Metadata } from "next";

interface Props {
  params: { id: string };
  searchParams: Record<string, string | string[] | undefined>;
}

export const metadata: Metadata = {
  title: "Page title",
  description: "Page description.",
};

export default async function Page({ params }: Props) {
  return (
    <main className="p-6">
      <h1>Hello {params.id}</h1>
    </main>
  );
}

lines: 20chars: 394size: 394 B

live

app/dashboard/[id]/loading.tsx

export default function Loading() {
  return <div className="p-6 text-muted-foreground">Loading…</div>;
}

lines: 4chars: 106size: 108 B

live

편집자 노트

Understanding · A folder is a route, a file is a level.

이 심층 챕터는 현재 영어로만 제공됩니다. 위의 변환 도구는 귀하의 언어로 작동하지만, 긴 설명 글은 아직 번역되지 않았습니다.

자주 묻는 질문

Quick answers.

›Does this support the Pages Router?

No. This tool is specifically designed for the App Router architecture introduced in Next.js 13, focusing on Server Components and the `app/` directory.

›Is the output TypeScript compatible?

Yes. The generated code includes standard TypeScript interfaces for `PageProps`, such as `params` and `searchParams`, ensuring type safety for your routes.

›Can I include SEO metadata?

Yes. You can toggle the inclusion of a static `Metadata` object or a dynamic `generateMetadata` function depending on your route requirements.

›Are client side hooks included?

By default, the tool generates Server Components. If you need hooks like `useState` or `useEffect`, you can toggle the `"use client"` directive in the options.

사람들이 다음도 검색합니다.

More in this room.

모두 보기 포매터 및 코드