这支持 Pages Router 吗？

不支持。此工具专为 Next.js 13 中引入的 App Router 架构设计，专注于服务器组件和 `app/` 目录。

输出是否与 TypeScript 兼容？

是的。生成的代码包含 `PageProps` 的标准 TypeScript 接口，例如 `params` 和 `searchParams`，确保您的路由类型安全。

可以包含 SEO 元数据吗？

是的。您可以根据您的路由要求切换是否包含静态 `Metadata` 对象或动态 `generateMetadata` 函数。

包含客户端钩子吗？

默认情况下，该工具生成服务器组件。如果您需要像 `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.

查看所有格式化与代码