Pages Router'ı destekliyor mu?

Hayır. Bu araç, Next.js 13'te tanıtılan App Router mimarisi için özel olarak tasarlanmıştır ve ağırlıklı olarak Sunucu Bileşenleri'ne ve `app/` dizinine odaklanır.

Çıktı TypeScript ile uyumlu mu?

Evet. Oluşturulan kod, rotalarınız için tip güvenliği sağlayan `params` ve `searchParams` gibi `PageProps` için standart TypeScript arayüzleri içerir.

SEO meta verileri ekleyebilir miyim?

Evet. Rota gereksinimlerinize bağlı olarak statik bir `Metadata` nesnesinin veya dinamik bir `generateMetadata` fonksiyonunun dahil edilmesini açıp kapatabilirsiniz.

İstemci tarafı hook'lar dahil mi?

Varsayılan olarak, araç Sunucu Bileşenleri oluşturur. `useState` veya `useEffect` gibi kancalara ihtiyacınız varsa, seçeneklerde `"use client"` yönergesini açıp kapatabilirsiniz.

Biçimlendiriciler ve Kod

Next.js App Router Sayfa Oluşturucu

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

Editörün notu

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

Bu ayrıntılı bölüm şu anda yalnızca İngilizce olarak sunulmaktadır. Yukarıdaki dönüştürme aracı sizin dilinizde çalışır; uzun açıklayıcı yazı henüz çevrilmemiştir.

Sıkça sorulan sorular

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.

İnsanlar ayrıca şunları arar

İlgili araçlar

More in this room.

Tümünü gör Biçimlendiriciler ve Kod