هل هذا يدعم موجه الصفحات (Pages Router)؟

لا. تم تصميم هذه الأداة خصيصًا لهندسة موجه التطبيقات (App Router) التي تم تقديمها في Next.js 13، مع التركيز على مكونات الخادم ودليل `app/`.

هل الناتج متوافق مع TypeScript؟

نعم. يتضمن الرمز الذي تم إنشاؤه واجهات TypeScript القياسية لـ `PageProps`، مثل `params` و `searchParams`، مما يضمن أمان النوع لمساراتك.

هل يمكنني تضمين بيانات تعريف تحسين محركات البحث (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.

شاهد الكل في المنسقات والكود