Ce générateur prend-il en charge le Pages Router ?

Non. Cet outil est spécifiquement conçu pour l'architecture App Router introduite dans Next.js 13, se concentrant sur les Server Components et le répertoire `app/`.

La sortie est-elle compatible TypeScript ?

Oui. Le code généré inclut des interfaces TypeScript standard pour les `PageProps`, telles que `params` et `searchParams`, garantissant la sécurité des types pour vos routes.

Puis-je inclure des métadonnées SEO ?

Oui. Vous pouvez activer l'inclusion d'un objet `Metadata` statique ou d'une fonction `generateMetadata` dynamique en fonction des exigences de votre route.

Les hooks côté client sont-ils inclus ?

Par défaut, l'outil génère des Server Components. Si vous avez besoin de hooks comme `useState` ou `useEffect`, vous pouvez activer la directive `"use client"` dans les options.

Formateurs & Code

Générateur de Pages 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

Note de la rédaction

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

Ce chapitre approfondi n'est actuellement disponible qu'en anglais. L'outil de conversion ci-dessus fonctionne dans votre langue ; le long article explicatif n'a pas encore été traduit.

Questions fréquentes

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.

Les internautes recherchent aussi

Outils similaires

More in this room.

Tout voir dans Formateurs & Code