Apakah ini mendukung Pages Router?

Tidak. Alat ini dirancang khusus untuk arsitektur App Router yang diperkenalkan di Next.js 13, dengan fokus pada Komponen Server dan direktori `app/`.

Apakah outputnya kompatibel dengan TypeScript?

Ya. Kode yang dihasilkan mencakup antarmuka TypeScript standar untuk `PageProps`, seperti `params` dan `searchParams`, memastikan keamanan tipe untuk rute Anda.

Bisakah saya menyertakan metadata SEO?

Ya. Anda dapat mengaktifkan penyertaan objek `Metadata` statis atau fungsi `generateMetadata` dinamis tergantung pada persyaratan rute Anda.

Apakah hook sisi klien disertakan?

Secara default, alat ini menghasilkan Komponen Server. Jika Anda memerlukan hook seperti `useState` atau `useEffect`, Anda dapat mengaktifkan direktif `"use client"` di opsi.

Formatter & Kode

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

Catatan editor

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

Bab mendalam ini saat ini hanya tersedia dalam bahasa Inggris. Alat konversi di atas berfungsi dalam bahasa Anda; artikel penjelasan panjangnya belum diterjemahkan.

Pertanyaan yang sering diajukan

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.

Orang juga mencari

Fitur terkait

More in this room.

Lihat semua di Formatter & Kode