ایجاد کامپوننت صفحه

1. به دایرکتوری اپ ناوبری کنید
   در پوشه src/app, تصمیم بگیرید که صفحه جدید شما کجا باید قرار گیرد. برای مثال، اگر صفحه نیاز به احراز هویت دارد، آن را در دایرکتوری src/app/(protected-pages) قرار دهید. اگر احراز هویت لازم ندارد، از دایرکتوری src/app/(public-pages) استفاده کنید.

2. فایل جدید ایجاد کنید
   فایلی با نام مسیر جدید ایجاد کنید. برای مثال:

   • برای یک مسیر استاتیک، src/app/new-page/page.tsx ایجاد کنید.
   • برای یک مسیر دینامیک، از براکت‌ها برای تعریف پارامترها استفاده کنید، مانند src/app/new-page/[id]/page.tsx.

3. کد صفحه خود را اضافه کنید
   کامپوننت ریکت برای صفحه خود را تعریف کنید. مثال:

   const Page = () => {
       return (
           <div>
               <h1>به صفحه جدید خوش آمدید</h1>
               <p>این یک صفحه سفارشی است.</p>
           </div>
       );
   };
   
   export default Page;

پیکربندی مسیریابی اضافه کنید

پیکربندی مسیریابی را گسترش دهید، فایل src/configs/route.config/routes.config.ts protectedRoutes یا publicRoutes را برای شامل کردن صفحه جدید خود به روز رسانی کنید. برای مثال:

import { ADMIN, USER } from '@/constants/roles';

export const protectedRoutes = {
    ...protectedRoutes,
    '/new-page': {
        key: 'newPage',
        authority: [ADMIN, USER],
        meta: {
            pageContainerType: 'contained',
        },
    },
};

در Next.js، ایجاد یک صفحه جدید به سادگی اضافه کردن یک دایرکتوری و یک فایل page.tsx است

یادداشت‌های اضافی

به جای اعمال 'use client' مستقیماً به فایل صفحه، توصیه می‌شود که یک کامپوننت کلاینت جداگانه ایجاد کنید و آن را به صفحه وارد کنید. این رویکرد اجازه می‌دهد که صفحه خود به صورت رندر شده در سرور باقی بماند، رندر سرور (SSR) را بهینه می‌کند و فقط منطق سمت کلاینت را در کامپوننت کلاینت مدیریت می‌کند. برای مثال:

// src/app/(protected-pages)/new-page/page.tsx
import ClientComponent from './ClientComponent';

const NewPage = () => {
    return (
        <div>
            <h1>صفحه جدید</h1>
            <ClientComponent />
        </div>
    );
};

export default NewPage;

// src/app/(protected-pages)/new-page/_components/ClientComponent.tsx
'use client';

const ClientComponent = () => {
    return <p>این کامپوننت در کلاینت اجرا می‌شود.</p>;
};

export default ClientComponent;

اینگونه، صفحه می‌تواند قبل از رندر کردن کامپوننت‌های سمت کلاینت، کارهای SSR را انجام دهد.