پوشه‌های خصوصی (Private folders)
@FrontLine_Developer

پوشه‌های خصوصی (Private folders)

پوشه‌های خصوصی را می‌توان با قرار دادن یک آندرلاین (underscore) در ابتدای نام پوشه ایجاد کرد: _folderName.


این کار نشان می‌دهد که پوشه یک جزئیات پیاده‌سازی خصوصی است و نباید توسط سیستم مسیریابی در نظر گرفته شود، بنابراین پوشه و تمام زیرپوشه‌های آن را از مسیریابی خارج می‌کند.


از آنجایی که فایل‌ها در دایرکتوری app می‌توانند به صورت پیش‌فرض به صورت ایمن هم‌مکان شوند، پوشه‌های خصوصی برای هم‌مکانی اجباری نیستند. با این حال، آن‌ها می‌توانند برای موارد زیر مفید باشند:


جدا کردن منطق UI از منطق مسیریابی.


سازماندهی پایدار فایل‌های داخلی در سراسر یک پروژه و اکوسیستم Next.js.


مرتب‌سازی و گروه‌بندی فایل‌ها در ویرایشگرهای کد.


جلوگیری از تداخل‌های احتمالی نام‌گذاری با قراردادهای فایل Next.js در آینده.



نکات مهم:


گرچه این یک قرارداد فریم‌ورک نیست، ممکن است فایل‌های خارج از پوشه‌های خصوصی را نیز با استفاده از همین الگوی آندرلاین به عنوان "خصوصی" علامت‌گذاری کنید.


می‌توانید سگمنت‌های URL که با آندرلاین شروع می‌شوند را با قرار دادن %5F (شکل URL-encoded آندرلاین) در ابتدای نام پوشه ایجاد کنید: %5FfolderName.


اگر از پوشه‌های خصوصی استفاده نمی‌کنید، بهتر است با قراردادهای فایل‌های خاص Next.js آشنا باشید تا از تداخل‌های نام‌گذاری غیرمنتظره جلوگیری کنید.


#Next_Doc
#5_Lesson
@FrontLine_Developer

گروه‌های مسیر (Route Groups)
@FrontLine_Developer

گروه‌های مسیر (Route Groups)

گروه‌های مسیر با قرار دادن یک پوشه در داخل پرانتز ایجاد می‌شوند: (folderName)


این کار نشان می‌دهد که پوشه صرفاً برای اهداف سازماندهی است و نباید در مسیر URL گنجانده شود.


گروه‌های مسیر برای موارد زیر مفید هستند:


سازماندهی مسیرها بر اساس بخش سایت، هدف یا تیم. به عنوان مثال، صفحات بازاریابی، صفحات مدیریتی، و غیره.


فعال کردن طرح‌بندی‌های تو در تو در یک سطح مسیر. این کار امکان ایجاد طرح‌بندی‌های تو در تو متعدد، از جمله چند طرح‌بندی ریشه را فراهم می‌کند.


افزودن یک طرح‌بندی به زیرمجموعه‌ای از مسیرها در یک سگمنت مشترک.


در این مثال:

پوشه‌ی (admin) به مسیر URL اضافه نمی‌شود. مسیر app/(admin)/dashboard/page.js به /dashboard نگاشت می‌شود.


پوشه‌ی (marketing) نیز به مسیر URL اضافه نمی‌شود. مسیر app/(marketing)/about/page.js به /about و app/(marketing)/blog/page.js به /blog نگاشت می‌شود.


این ویژگی به شما اجازه می‌دهد تا کد خود را به صورت منطقی گروه‌بندی کنید، بدون اینکه ساختار URL تحت تأثیر قرار گیرد.

#Next_Doc
#6_Lesson
@FrontLine_Developer

لیست دستورات گیت
#Git_Doc
@FrontLine_Developer

چه پروژه‌هایی را نباید قبول کرد؟

مواقعی پیش می‌آید که کارفرما برای واگذاری یک پروژه با اصرار می‌گوید: «این پروژه خیلی ساده است.» یا در پاسخ به درخواست شما برای دریافت مستندات، به جای توضیحات شفاف و مکتوب، به صورت پی‌در‌پی فایل‌های صوتی ارسال می‌کند.

این‌ها نشانه‌هایی هشداردهنده هستند. اما چرا باید از این پروژه‌ها دوری کرد؟

وقتی کارفرما می‌گوید "ساده است": کسی که تخصص لازم را ندارد، اغلب پیچیدگی‌ها و چالش‌های فنی یک پروژه را دست‌کم می‌گیرد. او تصور می‌کند کاری که برایش ساده به نظر می‌رسد، باید با مبلغی بسیار کمتر از ارزش واقعی‌اش انجام شود. در این شرایط، بهترین پاسخ این است که اگر پروژه ساده است، چرا خودشان آن را انجام نمی‌دهند؟

وقتی کارفرما از ارسال مستندات مکتوب طفره می‌رود: ارتباطات شفاهی (ویس) در مورد جزئیات پروژه، یک بستر مناسب برای سوءتفاهم است. بعدها ممکن است کارفرما مدعی شود که منظورش از فلان حرف در آن فایل صوتی، چیز دیگری بوده و شما مجبور به تغییرات ناخواسته شوید. این کارفرما به راحتی می‌تواند جزئیات را تحریف کرده و مسئولیت را به گردن شما بیندازد.

راهکار چیست؟

قبل از شروع هر پروژه‌ای، از کارفرما بخواهید یک سند مکتوب و دقیق از تمام جزئیات و خواسته‌هایش تهیه کند. روی این موضوع تأکید کنید که فقط مواردی را که در این سند ذکر شده است، انجام خواهید داد. این سند باید شامل جزئیات کافی باشد و از کلی‌گویی پرهیز شود.

وقتی کارفرما مجبور به نگارش چنین سندی می‌شود، تازه متوجه پیچیدگی واقعی پروژه شده و درخواست‌های خود را واقع‌بینانه‌تر می‌کند. در نتیجه، حاضر به پرداخت هزینه واقعی آن نیز خواهد شد.

مثال:

فرض کنید کارفرمایی یک داشبورد ساده با React می‌خواهد که در آن سه نمودار، یک جدول و فرم ثبت اطلاعات وجود داشته باشد. او ممکن است بگوید: "فقط یک صفحه است و ساده است."

اما جزئیات فنی که باید در سند مکتوب مشخص شود عبارتند از:

نوع نمودارها (خطی، دایره‌ای، و ...)

منبع داده‌ها (API، JSON Mock و ...)

نوع فیلترها روی جدول و نمودارها

رابط کاربری و UX مورد نظر

تعداد فیلدهای فرم و نوع اعتبارسنجی (Validation) آن‌ها

نحوه ارتباط با API و مدیریت حالت (State Management)

وقتی کارفرما با این جزئیات روبرو می‌شود، متوجه خواهد شد که پروژه "ساده" او در واقع شامل بخش‌های فنی و زمان‌بری است که به آسانی قابل انجام نیست و به بودجه بیشتری نیاز دارد.


#Tip
@Frontline_Developer

createPortal

createPortal به شما امکان می‌دهد تا یک کامپوننت فرزند (children) را در بخش متفاوتی از DOM رندر کنید.

<div>
  <SomeComponent />
  {createPortal(children, domNode, key?)}
</div>

مرجع (Reference)

createPortal(children, domNode, key?)

برای ایجاد یک پورتال، تابع createPortal را فراخوانی کنید. این تابع JSX مورد نظر (که قرار است رندر شود) و گره DOM (DOM node) مقصد را به عنوان آرگومان دریافت می‌کند:

import { createPortal } from 'react-dom';

// ...

<div>
  <p>این فرزند در div والد قرار می‌گیرد.</p>
  {createPortal(
    <p>این فرزند در body سند قرار می‌گیرد.</p>,
    document.body
  )}
</div>

برای مثال‌های بیشتر به بخش‌های پایین‌تر مراجعه کنید.

یک پورتال تنها مکان فیزیکی گره DOM را تغییر می‌دهد. از هر جنبه‌ی دیگر، JSX که شما در یک پورتال رندر می‌کنید، به عنوان یک گره فرزند از کامپوننت React که آن را رندر کرده، عمل می‌کند. به عنوان مثال، کامپوننت فرزند می‌تواند به کانتکست (context) ارائه شده توسط درخت والد دسترسی داشته باشد و رویدادها (events) از فرزندان به والدین بر اساس درخت React به صورت حباب‌وار (bubble up) منتشر می‌شوند.

پارامترها (Parameters)

children:
هر چیزی که می‌تواند توسط React رندر شود، مانند یک قطعه JSX (مثلاً <div /> یا <SomeComponent />)، یک Fragment (<>...</>)، یک رشته یا یک عدد، یا آرایه‌ای از این‌ها.

domNode:
یک گره DOM، مانند مواردی که توسط document.getElementById() بازگردانده می‌شوند. این گره باید از قبل وجود داشته باشد. پاس دادن یک گره DOM متفاوت در طول یک به‌روزرسانی باعث بازسازی محتوای پورتال می‌شود.

key (اختیاری): یک رشته یا عدد منحصر به فرد که به عنوان key پورتال استفاده می‌شود.

مقدار بازگشتی (Returns)

createPortal
یک گره React را بازمی‌گرداند که می‌تواند در JSX گنجانده شود یا از یک کامپوننت React بازگردانده شود. اگر React آن را در خروجی رندر مشاهده کند، children ارائه شده را درون domNode مشخص شده قرار خواهد داد.

ملاحظات (Caveats)

رویدادها از پورتال‌ها بر اساس درخت React منتشر می‌شوند و نه درخت DOM. به عنوان مثال، اگر داخل یک پورتال کلیک کنید و پورتال در <div onClick> پیچیده شده باشد، آن هندلر onClick فراخوانی خواهد شد. اگر این موضوع باعث مشکلاتی شد، یا انتشار رویداد را از داخل پورتال متوقف کنید، یا خود پورتال را در درخت React به بالا منتقل کنید.

#React_Dom_Doc
#1_lesson
@Frontline_Developer

کاربرد (Usage)

رندر کردن در بخش متفاوتی از DOM (Rendering to a different part of the DOM)

پورتال‌ها به کامپوننت‌های شما اجازه می‌دهند تا برخی از فرزندان (children) خود را در مکان متفاوتی از DOM رندر کنند.

این قابلیت به بخشی از کامپوننت شما اجازه می‌دهد تا از هر کانتینری که ممکن است در آن باشد "خارج شود". به عنوان مثال، یک کامپوننت می‌تواند یک دیالوگ مودال (modal dialog) یا یک تولتیپ (tooltip) را نمایش دهد که بالاتر و خارج از بقیه‌ی صفحه ظاهر می‌شود.

برای ایجاد یک پورتال، نتیجه‌ی createPortal را با مقداری JSX و گره DOM مقصد رندر کنید:

import { createPortal } from 'react-dom';

function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>این فرزند در div والد قرار می‌گیرد.</p>
      {createPortal(
        <p>این فرزند در body سند قرار می‌گیرد.</p>,
        document.body
      )}
    </div>
  );
}

React، گره‌های DOM مربوط به JSX را که شما پاس داده‌اید، درون گره DOM مشخص شده قرار خواهد داد.

بدون پورتال، پاراگراف دوم (<p>) درون <div> والد قرار می‌گرفت، اما پورتال آن را به document.body "تله‌پورت" کرده است:

// App.js
import { createPortal } from 'react-dom';

export default function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>This child is placed in the parent div.</p>
      {createPortal(
        <p>This child is placed in the document body.</p>,
        document.body
      )}
    </div>
  );
}

توجه کنید که چگونه پاراگراف دوم به صورت بصری خارج از <div> والد با حاشیه ظاهر می‌شود. اگر ساختار DOM را با ابزارهای توسعه‌دهنده (developer tools) بررسی کنید، خواهید دید که <p> دوم مستقیماً در <body> قرار گرفته است:

<body>
  <div id="root">
    ...
      <div style="border: 2px solid black">
        <p>This child is placed inside the parent div.</p>
      </div>
    ...
  </div>
  <p>This child is placed in the document body.</p>
</body>

یک پورتال تنها مکان فیزیکی گره DOM را تغییر می‌دهد.
از هر جنبه‌ی دیگر، JSX که شما در یک پورتال رندر می‌کنید، به عنوان یک گره فرزند از کامپوننت React که آن را رندر کرده، عمل می‌کند.

به عنوان مثال، کامپوننت فرزند می‌تواند به کانتکست (context) ارائه شده توسط درخت والد دسترسی داشته باشد و رویدادها (events) همچنان از فرزندان به والدین بر اساس درخت React به صورت حباب‌وار (bubble up) منتشر می‌شوند.
#React_Dom_Doc
@Frontline_Developer

هوک‌های React DOM 

پکیج react-dom شامل هوک‌هایی (Hooks) است که تنها برای وب‌اپلیکیشن‌ها (که در محیط DOM مرورگر اجرا می‌شوند) پشتیبانی می‌شوند. این هوک‌ها در محیط‌های غیرمرورگری مانند اپلیکیشن‌های iOS، Android یا Windows پشتیبانی نمی‌شوند.

هوک‌های فرم (Form Hooks)

فرم‌ها به شما امکان می‌دهند کنترل‌های تعاملی برای ارسال اطلاعات ایجاد کنید. برای مدیریت فرم‌ها در کامپوننت‌های خود، از یکی از این هوک‌ها استفاده کنید:

useFormStatus: به شما امکان می‌دهد بر اساس وضعیت یک فرم، به‌روزرسانی‌هایی را در UI انجام دهید.

function Form({ action }) {
  async function increment(n) {
    return n + 1;
  }
  const [count, incrementFormAction] = useActionState(increment, 0); // useActionState یک هوک React است، نه React DOM
  return (
    <form action={action}>
      <button formAction={incrementFormAction}>Count: {count}</button>
      <Button />
    </form>
  );
}

function Button() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Submit
    </button>
  );
}
//(در حال حاظر فقط همین هوک وجود داره ) 

#React_Dom_Doc
#2_lesson
@Frontline_Developer

چرا باید به دنبال ترندهای جهانی برنامه‌نویسی باشیم؟

در جامعه‌ای زندگی می‌کنیم که بسیاری از مدرسان برنامه‌نویسی به سمت آموزش ترندهای رایج و جاافتاده حرکت می‌کنند. اغلب، یک سال پس از اینکه یک تکنولوژی جدید دنیا را متحول می‌کند، دوره‌های آموزشی نصفه و نیمه‌ای برای ورود به بازار کار کشورهای غربی ارائه می‌دهند.

اما واقعیت این است که دنیا همیشه جلوتر است. بسیاری از آموزش‌دهندگان ایرانی، به دلیل عدم تخصص کافی در موارد بسیار جدید و نوظهور، همچنان در حال تدریس دوره‌هایی هستند که در عمل قدیمی شده یا در حال منسوخ شدن هستند. این رویکرد، بیشتر بر درآمدزایی متمرکز است تا آماده‌سازی واقعی کاربران برای بازار کار جهانی.

در حالی که در سطح جهانی، تکنولوژی‌های نوظهور و در حال رشد، پس از چند سال به متخصصین نیاز پیدا می‌کنند. تسلط بر این حوزه‌ها می‌تواند مسیرهای جدیدی برای شما باز کند، از جمله فرصت‌های مهاجرت کاری.

چند مثال از حوزه‌های نوظهور و پرتقاضا:

سیستم ECS/DOTS در یونیتی: این رویکرد جدید در توسعه بازی با یونیتی، برای ساخت بازی‌های با عملکرد بالا و مقیاس‌پذیر طراحی شده است. نیاز به متخصصین DOTS در خارج از کشور رو به افزایش است.

زبان‌های برنامه‌نویسی سریع و پیچیده مانند Rust: Rust به دلیل امنیت حافظه و عملکرد بالا، در حوزه‌هایی مانند توسعه سیستم‌عامل، وب‌اسمبلی، بلاکچین و ابزارهای خط فرمان به سرعت در حال رشد است و تقاضای زیادی برای توسعه‌دهندگان آن وجود دارد.

توسعه Web3 و بلاکچین: فراتر از مفاهیم اولیه، تخصص در توسعه قراردادهای هوشمند (Smart Contracts) با زبان‌هایی مانند Solidity، ساخت برنامه‌های غیرمتمرکز (dApps) و کار با فریم‌ورک‌های بلاکچین، یک حوزه نوظهور با پتانسیل بسیار بالاست.

مهندسی داده و پلتفرم‌های بیگ‌دیتا: علاوه بر علم داده، تخصص در ساخت و مدیریت خطوط لوله داده (Data Pipelines)، کار با ابزارهایی مانند Apache Kafka، Spark و Flink برای پردازش داده‌های حجیم، تقاضای بالایی در شرکت‌های بزرگ فناوری دارد.

DevOps و زیرساخت‌های Cloud-Native: تسلط بر ابزارهایی مانند Kubernetes، Docker، و سیستم‌های CI/CD برای استقرار و مدیریت برنامه‌ها در محیط‌های ابری، یک مهارت حیاتی و بسیار پرتقاضا در سطح جهانی است.

برای اینکه در این رقابت جهانی عقب نمانید، توصیه می‌شود که همیشه نگاهی به روندهای روز دنیا داشته باشید و بخشی از زمان یادگیری خود را به حوزه‌هایی اختصاص دهید که در حال حاضر کمتر شناخته شده‌اند اما پتانسیل رشد بالایی دارند.



#Tip
@Frontline_Developer

 useActionState 

useActionState
هوکی است که به شما امکان می‌دهد وضعیت (state) کامپوننت را بر اساس نتیجه‌ی یک اکشن فرم (form action) به‌روزرسانی کنید.

tsx 
const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);

نکته: در نسخه‌های قبلی React Canary، این API بخشی از React DOM بود و useFormState نامیده می‌شد.

مرجع (Reference)

useActionState(action, initialState, permalink?)

useActionState
را در بالاترین سطح کامپوننت خود فراخوانی کنید تا یک وضعیت کامپوننت ایجاد کنید که هنگام فراخوانی یک اکشن فرم به‌روزرسانی می‌شود. شما یک تابع اکشن فرم موجود و همچنین یک وضعیت اولیه (initial state) را به useActionState پاس می‌دهید، و این هوک یک اکشن جدید را که در فرم خود استفاده می‌کنید، به همراه آخرین وضعیت فرم و اینکه آیا اکشن هنوز در حالت در حال انتظار (pending) است، بازمی‌گرداند. آخرین وضعیت فرم نیز به تابعی که شما ارائه کرده‌اید، پاس داده می‌شود.

import { useActionState } from "react";

async function increment(previousState, formData) {
  // این تابع به عنوان 'action' به useActionState پاس داده می‌شود
  // previousState: وضعیت قبلی که توسط اکشن برگردانده شده بود (یا initialState در اولین فراخوانی)
  // formData: داده‌های فرم ارسال شده
  return previousState + 1;
}

function StatefulForm({}) {
  // state: وضعیت فعلی که توسط اکشن برگردانده شده است
  // formAction: اکشن جدیدی که باید به prop 'formAction' دکمه یا 'action' فرم پاس داده شود
  const [state, formAction] = useActionState(increment, 0);

  return (
    <form>
      {state} {/* نمایش وضعیت فعلی */}
      <button formAction={formAction}>Increment</button> {/* استفاده از formAction */}
    </form>
  )
}

وضعیت فرم مقداری است که توسط اکشن هنگام آخرین ارسال فرم بازگردانده شده است. اگر فرم هنوز ارسال نشده باشد، این مقدار همان وضعیت اولیه است که شما پاس می‌دهید.

اگر با یک تابع سرور
(Server Function)
استفاده شود، useActionState اجازه می‌دهد که پاسخ سرور از ارسال فرم حتی قبل از تکمیل hydration نمایش داده شود.

برای مثال‌های بیشتر به بخش‌های پایین‌تر مراجعه کنید.

پارامترها (Parameters)
fn:
تابعی که هنگام ارسال فرم یا فشردن دکمه فراخوانی می‌شود. وقتی تابع فراخوانی می‌شود، وضعیت قبلی فرم (در ابتدا initialState که شما پاس می‌دهید و سپس مقدار بازگشتی قبلی آن) را به عنوان آرگومان اولیه دریافت می‌کند، و پس از آن آرگومان‌هایی که یک اکشن فرم به طور معمول دریافت می‌کند.

initialState:
مقداری که می‌خواهید وضعیت در ابتدا داشته باشد. می‌تواند هر مقدار سریالایزبل (serializable) باشد. این آرگومان پس از اولین فراخوانی اکشن نادیده گرفته می‌شود.


permalink
(اختیاری): یک رشته شامل URL صفحه‌ی منحصر به فردی که این فرم آن را تغییر می‌دهد. برای استفاده در صفحات با محتوای داینامیک (مثلاً فیدها) در ترکیب با بهبود تدریجی

(progressive enhancement):

اگر fn یک تابع سرور باشد و فرم قبل از بارگذاری باندل جاوا اسکریپت ارسال شود، مرورگر به جای URL صفحه‌ی فعلی، به URL permalink مشخص شده ناوبری می‌کند. اطمینان حاصل کنید که همان کامپوننت فرم در صفحه‌ی مقصد رندر می‌شود (شامل همان action fn و permalink) تا React بداند چگونه وضعیت را منتقل کند. پس از تکمیل hydration فرم، این پارامتر هیچ اثری ندارد.

مقدار بازگشتی (Returns)

useActionState یک آرایه با مقادیر زیر را بازمی‌گرداند:

وضعیت فعلی (current state):
در طول اولین رندر، با initialState که شما پاس داده‌اید مطابقت خواهد داشت. پس از فراخوانی اکشن، با مقدار بازگشتی اکشن مطابقت خواهد داشت.

یک اکشن جدید که می‌توانید آن را به عنوان پراپ action به کامپوننت form خود یا پراپ formAction به هر کامپوننت button درون فرم پاس دهید. این اکشن همچنین می‌تواند به صورت دستی درون startTransition فراخوانی شود.

فلگ isPending: که به شما می‌گوید آیا یک Transition در حال انتظار وجود دارد یا خیر.

ملاحظات (Caveats)

هنگامی که با فریم‌ورکی که از React Server Components پشتیبانی می‌کند استفاده می‌شود، useActionState به شما امکان می‌دهد فرم‌ها را قبل از اجرای جاوا اسکریپت در کلاینت تعاملی کنید. هنگامی که بدون Server Components استفاده می‌شود، معادل وضعیت محلی کامپوننت (component local state) است.

تابعی که به useActionState پاس داده می‌شود، یک آرگومان اضافی، یعنی وضعیت قبلی یا اولیه را به عنوان آرگومان اول خود دریافت می‌کند. این باعث می‌شود امضای آن با حالتی که مستقیماً به عنوان یک اکشن فرم بدون استفاده از useActionState استفاده می‌شد، متفاوت باشد.

کاربرد (Usage)

استفاده از اطلاعات بازگردانده شده توسط یک اکشن فرم (Using information returned by a form action)
useActionState را در بالاترین سطح کامپوننت خود فراخوانی کنید تا به مقدار بازگشتی یک اکشن از آخرین باری که یک فرم ارسال شده است، دسترسی پیدا کنید.

import { useActionState } from 'react';
import { action } from './actions.js'; // فرض بر اینکه تابع 'action' از این فایل ایمپورت می‌شود

function MyComponent() {
  // state: وضعیت فعلی فرم
  // formAction: اکشن جدیدی که به <form> یا <button> پاس داده می‌شود
  const [state, formAction] = useActionState(action, null);
  // ...
  return (
    <form action={formAction}>
      {/* ... محتوای فرم ... */}
    </form>
  );
}
```

useActionState` یک آرایه با موارد زیر را بازمی‌گرداند:

1. `current state` (وضعیت فعلی): وضعیت فعلی فرم، که در ابتدا به initial state (وضعیت اولیه‌ی) ارائه شده توسط شما تنظیم می‌شود، و پس از ارسال فرم، به مقدار بازگشتی action (اکشن) ارائه شده توسط شما تنظیم می‌شود.
2. `new action` (یک اکشن جدید): که آن را به عنوان پراپ action به <form> یا پراپ formAction به هر کامپوننت button درون فرم پاس می‌دهید یا به صورت دستی درون startTransition فراخوانی می‌کنید.
3. `pending state` (وضعیت در حال انتظار): یک فلگ که می‌توانید در حالی که اکشن شما در حال پردازش است، از آن استفاده کنید.

هنگامی که فرم ارسال می‌شود، تابع اکشن که شما ارائه کرده‌اید فراخوانی خواهد شد. مقدار بازگشتی آن به وضعیت فعلی جدید فرم تبدیل می‌شود.

اکشنی که شما ارائه می‌کنید، یک آرگومان اول جدید نیز دریافت خواهد کرد، یعنی وضعیت فعلی فرم. اولین باری که فرم ارسال می‌شود، این آرگومان همان وضعیت اولیه‌ی ارائه شده توسط شما خواهد بود، در حالی که در ارسال‌های بعدی، این مقدار بازگشتی از آخرین باری است که اکشن فراخوانی شده بود. بقیه‌ی آرگومان‌ها همانند حالتی هستند که useActionState استفاده نمی‌شد.

function action(currentState, formData) {
  // currentState: وضعیت فعلی فرم (یا initialState در اولین ارسال)
  // formData: آبجکت FormData حاوی داده‌های فرم
  // ...
  return 'next state'; // مقداری که به عنوان وضعیت جدید فرم تنظیم می‌شود
}

#React_Full_Doc
#1_lesson
@FrontLine_Developer

آشنایی با SEO: چرا برای شما مهم است؟ 🤔

SEO چیست؟

SEO
مخفف Search Engine Optimization یا بهینه‌سازی برای موتورهای جستجو است. هدف اصلی SEO ایجاد استراتژی‌هایی است که موقعیت رتبه‌بندی وب‌سایت شما را در نتایج موتورهای جستجو (مانند گوگل) افزایش دهد. هر چه رتبه‌ی شما بالاتر باشد، ترافیک ارگانیک (Organic Traffic) بیشتری به سایت شما هدایت می‌شود که نهایتاً منجر به رشد و موفقیت بیشتر برای شما خواهد شد! 📈

در اینجا چه چیزهایی را کشف خواهید کرد:

در ادامه‌ی این بحث‌ها، ما درباره‌ی موضوعات کلیدی زیر صحبت خواهیم کرد تا شما با دنیای SEO آشنا شوید و بدانید چرا به آن نیاز دارید:

سیستم‌های جستجو و ربات‌های موتورهای جستجو مانند Googlebot.

تأثیر داشتن یک استراتژی SEO بر روی سایت شما.

چگونگی به‌کارگیری بهترین شیوه‌های SEO.

مفاهیم خزیدن (Crawling)، ایندکس‌گذاری (Indexing)، رندرینگ (Rendering) و رتبه‌بندی (Ranking)، به ویژه در ارتباط با Next.js.

مباحث عملکرد وب (Web Performance) شامل Core Web Vitals.

با آشنایی با این مباحث، می‌توانید درک بهتری از چگونگی دیده شدن وب‌سایت خود در فضای آنلاین به دست آورید و کاربران بیشتری را جذب کنید. 🚀

#Seo
@Frontline_Developer

فصل ۱: چرا SEO اینقدر مهم است؟
SEO کلید افزایش نرخ تبدیل (conversion) و افزایش اعتماد به برند شماست. جایگاه بالاتر در رتبه‌بندی نتایج جستجو، به معنای بازدیدکنندگان ارگانیک (organic visitors) بیشتر است.

ترافیک ارگانیک موتورهای جستجو – بازدیدکنندگانی که با کلیک بر روی یک نتیجه در موتور جستجو به سایت شما می‌آیند – به سه دلیل برای بسیاری از کسب‌وکارها حیاتی است:


کیفیت (Qualitative): افزایش احتمال تبدیل بازدیدکنندگان به مشتری.


قابل اعتماد بودن (Trustable): افزایش اعتماد به برند یا ماموریت شما.


کم‌هزینه (Low-Cost): جدا از زمان و تلاش صرف شده، داشتن شیوه‌های SEO خوب که منجر به رتبه‌ی بالاتر در موتور جستجو می‌شود، رایگان است. هیچ هزینه‌ی مستقیمی برای ظاهر شدن در جایگاه‌های برتر نتایج جستجوی ارگانیک وجود ندارد.


بهینه‌سازی برای موتورهای جستجو (SEO) با بازاریابی موتورهای جستجو (Search Engine Marketing - SEM) متفاوت است؛ در SEM، محتوای بالای نتایج جستجو ۱۰۰٪ پولی است و با برچسب "Sponsored" از نتایج ارگانیک متمایز می‌شود.



سه ستون بهینه‌سازی (Three Pillars of Optimization)
فرآیند بهینه‌سازی یک وب‌سایت را می‌توان به سه ستون اصلی تقسیم کرد:

فنی (Technical): وب‌سایت خود را برای خزیدن (crawling) و عملکرد وب (web performance) بهینه کنید.

تولید محتوا (Creation): یک استراتژی محتوا برای هدف قرار دادن کلمات کلیدی (keywords) خاص ایجاد کنید.

محبوبیت (Popularity): حضور سایت خود را در فضای آنلاین افزایش دهید تا موتورهای جستجو بدانند که شما یک منبع قابل اعتماد هستید. این کار از طریق استفاده از بک‌لینک‌ها (backlinks) انجام می‌شود؛ سایت‌های شخص ثالثی که به سایت شما لینک می‌دهند.


زمینه‌ی SEO گسترده است و جنبه‌های بسیاری دارد، اما به عنوان یک توسعه‌دهنده‌ی Next.js، اولین قدم این است که درک کنید چگونه می‌توانید وب‌اپلیکیشن خود را با برخی از بهترین شیوه‌ها برای SEO آماده کنید.

#Seo
@FrontLine_Developer

سیستم‌های جستجو و عملکرد آن‌ها

سیستم‌های جستجو همان چیزی هستند که شما معمولاً از آن‌ها به عنوان موتورهای جستجو (Search Engines) نام می‌برید (مثل Google، Bing، DuckDuckGo و غیره). این‌ها سیستم‌هایی فوق‌العاده پیچیده هستند که به برخی از بزرگ‌ترین چالش‌های تاریخ فناوری می‌پردازند.

سیستم‌های جستجو چهار مسئولیت اصلی دارند:

۱. خزیدن (Crawling) 🕷

خزیدن (Crawling) فرآیند پیمایش در وب و تجزیه و تحلیل محتوای (parsing) تمام وب‌سایت‌ها است. این یک وظیفه‌ی بسیار بزرگ است؛ زیرا بیش از ۳۵۰ میلیون دامنه در دسترس است. ربات‌های موتور جستجو (مثل Googlebot) لینک‌ها را دنبال می‌کنند و محتوای صفحات را جمع‌آوری می‌کنند.

۲. ایندکس‌گذاری (Indexing) 🗄

ایندکس‌گذاری (Indexing) به فرآیند یافتن مکان‌هایی برای ذخیره‌سازی تمام داده‌های جمع‌آوری شده در مرحله‌ی خزیدن اشاره دارد تا بتوان به آن‌ها دسترسی پیدا کرد. این داده‌ها در پایگاه‌های داده‌ی عظیمی سازماندهی می‌شوند تا جستجوهای بعدی سریع و کارآمد باشند.

۳. رندرینگ (Rendering) 🖼

رندرینگ (Rendering) به اجرای هرگونه منبع در صفحه مانند جاوا اسکریپت (JavaScript) اشاره دارد که ممکن است ویژگی‌ها را افزایش داده و محتوا را در سایت غنی‌تر کند. این فرآیند برای همه‌ی صفحاتی که خزش می‌شوند اتفاق نمی‌افتد و گاهی اوقات قبل از اینکه محتوا واقعاً ایندکس‌گذاری شود، رخ می‌دهد. اگر در زمان خزش منابع کافی برای انجام وظیفه وجود نداشته باشد، رندرینگ ممکن است پس از ایندکس‌گذاری انجام شود.

۴. رتبه‌بندی (Ranking) 🏆

رتبه‌بندی (Ranking) به فرآیند پرس‌وجو از داده‌ها برای ساخت صفحات نتایج مرتبط بر اساس ورودی کاربر (جستجوی کاربر) اشاره دارد. در این مرحله است که معیارهای مختلف رتبه‌بندی در موتورهای جستجو اعمال می‌شوند تا بهترین پاسخ را برای قصد کاربر (user intent) ارائه دهند.

در بخش بعدی، به طور خاص‌تر با نحوه‌ی عملکرد Googlebot آشنا خواهیم شد. Googlebot خزنده‌ی اینترنتی گوگل است، بخشی از سیستم جستجو که تمام اطلاعات مورد نیاز برای ایجاد پایگاه داده‌ی عظیم محتوا را برای ارائه‌ی نتایج جستجو جمع‌آوری می‌کند.
#Seo
@FrontLine_Developer

تا پایان امروز میتونید از این تخفیف استفاده کنید :)

@FrontLine_Developer

تمرین ری اکت
هوک های مورد نیاز :
useCallback, useState ,useReducer,useRef
@Frontline_Developer

خزنده وب چیست ؟
@FrontLine_Developer