รองรับ Pages Router หรือไม่?

ไม่ เครื่องมือนี้ออกแบบมาโดยเฉพาะสำหรับสถาปัตยกรรม App Router ที่เปิดตัวใน Next.js 13 โดยเน้นที่ Server Components และไดเรกทอรี `app/`

ผลลัพธ์เข้ากันได้กับ TypeScript หรือไม่?

เข้ากันได้ โค้ดที่สร้างขึ้นมีอินเทอร์เฟซ TypeScript มาตรฐานสำหรับ `PageProps` เช่น `params` และ `searchParams` เพื่อให้มั่นใจถึงความปลอดภัยของประเภทสำหรับเส้นทางของคุณ

ฉันสามารถรวม SEO metadata ได้หรือไม่?

ได้ คุณสามารถสลับการรวมออบเจกต์ `Metadata` แบบคงที่หรือฟังก์ชัน `generateMetadata` แบบไดนามิกได้ ขึ้นอยู่กับข้อกำหนดเส้นทางของคุณ

มีการรวม client side hooks หรือไม่?

โดยค่าเริ่มต้น เครื่องมือนี้จะสร้าง Server Components หากคุณต้องการ hooks เช่น `useState` หรือ `useEffect` คุณสามารถสลับคำสั่ง `"use client"` ในตัวเลือกได้

ตัวจัดรูปแบบและโค้ด

ตัวสร้างหน้า 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

หมายเหตุจากบรรณาธิการ

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

บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล

คำถามที่พบบ่อย

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.

ผู้คนยังค้นหา

เครื่องมือที่เกี่ยวข้อง

More in this room.

ดูทั้งหมดใน ตัวจัดรูปแบบและโค้ด