Suporta o Pages Router?

Não. Esta ferramenta foi especificamente projetada para a arquitetura App Router introduzida no Next.js 13, focando nos Server Components e no diretório `app/`.

O output é compatível com TypeScript?

Sim. O código gerado inclui interfaces TypeScript padrão para `PageProps`, como `params` e `searchParams`, garantindo segurança de tipo para as suas rotas.

Posso incluir metadados de SEO?

Sim. Pode alternar a inclusão de um objeto `Metadata` estático ou uma função `generateMetadata` dinâmica, dependendo dos requisitos da sua rota.

Estão incluídos os hooks do lado do cliente?

Por padrão, a ferramenta gera Server Components. Se precisar de hooks como `useState` ou `useEffect`, pode alternar a diretiva `"use client"` nas opções.

Formatadores e Código

Gerador 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 do editor

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

Este capítulo aprofundado está disponível apenas em inglês no momento. A ferramenta de conversão acima funciona no seu idioma; o artigo explicativo longo ainda não foi traduzido.

Perguntas frequentes

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.

As pessoas também pesquisam por

Ferramentas relacionadas

More in this room.

Ver tudo em Formatadores e Código