Czy to wspiera Pages Router?

Nie. To narzędzie jest specjalnie zaprojektowane dla architektury App Router wprowadzonej w Next.js 13, koncentrując się na komponentach serwerowych (`Server Components`) i katalogu `app/`.

Czy wynik jest kompatybilny z TypeScript?

Tak. Wygenerowany kod zawiera standardowe interfejsy TypeScript dla `PageProps`, takie jak `params` i `searchParams`, zapewniając bezpieczeństwo typów dla Twoich tras.

Czy mogę uwzględnić metadane SEO?

Tak. Możesz włączyć dodawanie statycznego obiektu `Metadata` lub dynamicznej funkcji `generateMetadata` w zależności od wymagań Twojej trasy.

Czy są uwzględnione client side hooks?

Domyślnie narzędzie generuje komponenty serwerowe (`Server Components`). Jeśli potrzebujesz hooków takich jak `useState` lub `useEffect`, możesz przełączyć dyrektywę `"use client"` w opcjach.

Formatowanie i Kodowanie

Generator stron 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

Notka redakcyjna

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

Ten szczegółowy rozdział jest obecnie dostępny tylko w języku angielskim. Narzędzie konwersji powyżej działa w Twoim języku; długi artykuł objaśniający nie został jeszcze przetłumaczony.

Często zadawane pytania

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.

Ludzie wyszukują również

Powiązane narzędzia

More in this room.

Zobacz wszystkie w Formatowanie i Kodowanie