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

معرفی Next.js و App Router

Next.js به عنوان یکی از محبوب‌ترین فریم‌ورک‌های React، ابزار قدرتمندی برای ساخت برنامه‌های وب مدرن است. این فریم‌ورک با ارائه ویژگی‌هایی مانند سرور رندرینگ و مسیرهای پویا، توسعه‌دهندگان را در ساخت اپلیکیشن‌هایی سریع و با کارایی بالا یاری می‌کند.

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

کار با Client Components

یکی از ویژگی‌های جذاب Next.js، امکان استفاده از Client Components برای رندر سمت کلاینت است. این ویژگی باعث می‌شود طرحی که نیاز به تعاملات کاربران دارد، به شکل مؤثرتری بارگذاری شود که تجربه کاربری بهتری را ارائه می‌دهد.

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

مثال کاربردی از App Router با استفاده از Client Components

اجازه دهید نگاهی به نمونه کدی بیندازیم که نشانگر استفاده از App Router و Client Components در Next.js است.

import React from 'react';
import { AppRouter } from 'next/router';

const MyPage = () => {
  return (
    <div>
      <h2>Welcome to My Next.js Page</h2>
      <AppRouter>
        <ClientComponent />
      </AppRouter>
    </div>
  );
};

export default MyPage;
  

توضیح خط به خط کد

import React from 'react';
این خط کتابخانه React را برای استفاده از کامپوننت‌ها وارد می‌کند.

import { AppRouter } from 'next/router';
این خط AppRouter را از کتابخانه next/router وارد می‌کند تا مسیرها کنترل شوند.

const MyPage = () => { ... }
یک کامپوننت فانکشنال تعریف می‌کند که صفحه سفارشی شما را نمایش می‌دهد.

<h2>Welcome to My Next.js Page</h2>
یک تیتر با متن "Welcome to My Next.js Page" در حال نمایش است.

<AppRouter>...</AppRouter>
از AppRouter برای مدیریت و نمایش محتویات مسیرهای مختلف استفاده می‌شود.

<ClientComponent />
یک کامپوننت که به شکل سمت کلاینت رندر میشود.

export default MyPage;
این خط کامپوننت را به عنوان خروجی پیش‌فرض این ماژول تعریف می‌کند.