Supporta il Pages Router?

No. Questo strumento è progettato specificamente per l'architettura App Router introdotta in Next.js 13, focalizzandosi sui Server Components e sulla directory `app/`.

L'output è compatibile con TypeScript?

Sì. Il codice generato include interfacce TypeScript standard per `PageProps`, come `params` e `searchParams`, garantendo la sicurezza dei tipi per le tue rotte.

Posso includere metadati SEO?

Sì. Puoi attivare l'inclusione di un oggetto `Metadata` statico o di una funzione `generateMetadata` dinamica a seconda dei requisiti della tua rotta.

Sono inclusi gli hook lato client?

Per impostazione predefinita, lo strumento genera Server Components. Se hai bisogno di hook come `useState` o `useEffect`, puoi attivare la direttiva `"use client"` nelle opzioni.

Formattatori e Codice

Generatore di Pagine 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 dell'editore

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

Questo capitolo approfondito è attualmente disponibile solo in inglese. Lo strumento di conversione qui sopra funziona nella tua lingua; il lungo articolo esplicativo non è stato ancora tradotto.

Domande frequenti

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.

Le persone cercano anche

Strumenti correlati

More in this room.

Vedi tutto in Formattatori e Codice