آموزش کار با App Router در نکست جی اس

App Router در Next.js یک مدل جدید برای ساخت برنامه‌ها با استفاده از ویژگی‌های جدید React مانند کامپوننت‌های سرور، استریمینگ با Suspense و اکشن‌های سرور معرفی می‌کند.

این مدل به شما امکان می‌دهد تا برنامه‌های پیچیده‌تری با ساختار بهتر و عملکرد بهینه‌تر بسازید.

ویژگی‌های کلیدی App Router ╥ 

کامپوننت‌های سرور (Server Components) ╔

کامپوننت‌های سرور به شما امکان می‌دهند تا بخش‌هایی از UI را در سرور رندر کنید و سپس به کلاینت ارسال کنید. این کار باعث کاهش بار روی کلاینت و بهبود عملکرد می‌شود.

استریمینگ با Suspense ╔

با استفاده از Suspense، می‌توانید بخش‌هایی از UI را به صورت تدریجی بارگذاری کنید. این ویژگی به شما امکان می‌دهد تا تجربه کاربری بهتری ارائه دهید،

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

اکشن‌های سرور (Server Actions) ╔

اکشن‌های سرور به شما امکان می‌دهند تا عملیات‌های پیچیده را در سرور انجام دهید و نتایج را به کلاینت ارسال کنید. این ویژگی به شما کمک می‌کند تا منطق برنامه را بهینه‌تر و امن‌تر پیاده‌سازی کنید.

ساختار پوشه ها و فایل ها ╥ 

در App Router، پوشه app برای تعریف مسیرها استفاده می‌شود. هر پوشه در app یک بخش از مسیر را نشان می‌دهد.

مثال:

• page.js به مسیر / (صفحه اصلی) اشاره دارد.
• layout.js برای کامپوننت های اشتراکی است مثلا منوی وبسایت در این فایل قرار می گیرد.
• about/page.js به مسیر /about اشاره دارد. 

ناوبری (Navigation) ╥  

برای ناوبری بین صفحات، می‌توانید از کامپوننت <Link> استفاده کنید که از next/link وارد می‌شود.

مثال:

import Link from 'next/link';

export default function Home() {
  return (
    
      صفحه اصلی
      برو به صفحه درباره ما
    
  );
}

استفاده از useRouter ╥   

برای ناوبری برنامه‌نویسی، می‌توانید از هوک useRouter استفاده کنید که از next/navigation وارد می‌شود.

مثال:

import { useRouter } from 'next/navigation';

export default function About() {
  const router = useRouter();

  return (
    <div>
      <h1>درباره ما</h1>
      <button onClick={() => router.push('/')}>بازگشت به صفحه اصلی</button>
    </div>
  );
} 

این یک توضیح ساده از نحوه مسیریابی و ناوبری در Next.js با استفاده از App Router بود .

امیدوارم براتون مفید بوده باشه 😊