Unterstützt dies den Pages Router?

Nein. Dieses Tool wurde speziell für die App Router-Architektur entwickelt, die in Next.js 13 eingeführt wurde, wobei der Schwerpunkt auf Server Components und dem `app/`-Verzeichnis liegt.

Ist die Ausgabe TypeScript-kompatibel?

Ja. Der generierte Code enthält standardmäßige TypeScript-Interfaces für `PageProps`, wie `params` und `searchParams`, wodurch die Typsicherheit für Ihre Routen gewährleistet ist.

Kann ich SEO-Metadaten einbinden?

Ja. Sie können die Einbindung eines statischen `Metadata`-Objekts oder einer dynamischen `generateMetadata`-Funktion je nach Ihren Routenanforderungen umschalten.

Sind clientseitige Hooks enthalten?

Standardmäßig generiert das Tool Server Components. Wenn Sie Hooks wie `useState` oder `useEffect` benötigen, können Sie die Anweisung `"use client"` in den Optionen umschalten.

Formatierer & Code

Next.js App Router Seiten-Generator

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

Anmerkung der Redaktion

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

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

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.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Formatierer & Code