Поддерживает ли это Pages Router?

Нет. Этот инструмент специально разработан для архитектуры App Router, представленной в Next.js 13, с акцентом на Server Components и каталог `app/`.

Совместим ли вывод с TypeScript?

Да. Сгенерированный код включает стандартные интерфейсы TypeScript для `PageProps`, такие как `params` и `searchParams`, обеспечивая безопасность типов для ваших маршрутов.

Могу ли я включить SEO-метаданные?

Да. Вы можете переключать включение статического объекта `Metadata` или динамической функции `generateMetadata` в зависимости от требований вашего маршрута.

Включены ли хуки на стороне клиента?

По умолчанию инструмент генерирует Server Components. Если вам нужны хуки, такие как `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.

Смотреть все в Форматтеры и код