Pages Routerをサポートしていますか？

いいえ。このツールは、Next.js 13で導入されたApp Routerアーキテクチャ専用に設計されており、Server Componentsと`app/`ディレクトリに焦点を当てています。

出力はTypeScriptと互換性がありますか？

はい。生成されたコードには、`params`や`searchParams`などの`PageProps`用の標準TypeScriptインターフェースが含まれており、ルートの型安全性を確保します。

SEOメタデータを含めることはできますか？

はい。ルートの要件に応じて、静的な`Metadata`オブジェクトの組み込み、または動的な`generateMetadata`関数の組み込みを切り替えることができます。

クライアントサイドフックは含まれていますか？

デフォルトでは、ツールはServer Componentsを生成します。`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.

すべて表示フォーマッター＆コード