¿Esto es compatible con Pages Router?

No. Esta herramienta está diseñada específicamente para la arquitectura App Router introducida en Next.js 13, centrándose en los Server Components y el directorio `app/`.

¿La salida es compatible con TypeScript?

Sí. El código generado incluye interfaces TypeScript estándar para `PageProps`, como `params` y `searchParams`, garantizando la seguridad de tipos para sus rutas.

¿Puedo incluir metadatos SEO?

Sí. Puede activar la inclusión de un objeto `Metadata` estático o una función `generateMetadata` dinámica según los requisitos de su ruta.

¿Se incluyen los hooks del lado del cliente?

Por defecto, la herramienta genera Server Components. Si necesita hooks como `useState` o `useEffect`, puede activar la directiva `"use client"` en las opciones.

Formateadores y código

Generador de Páginas 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

Nota del editor

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

Este capítulo en profundidad está disponible solo en inglés por el momento. La herramienta de conversión de arriba funciona en tu idioma; el artículo explicativo extenso aún no se ha traducido.

Preguntas frecuentes

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.

La gente también busca

Herramientas relacionadas

More in this room.

Ver todo en Formateadores y código