استفاده از App Router در Next.js: ساخت برنامه با پردازش در Edge و Node.js

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

در Next.js، شما امکان این را دارید که از دو مدل پردازش Edge و Node.js به صورت انتخابی استفاده کنید. پردازش Edge به شما اجازه می‌دهد که برنامه‌های خود را در نقاطی نزدیک به کاربر نهایی اجرا کنید که این موضوع می‌تواند بهبود عملکرد و کاهش زمان بارگذاری را به دنبال داشته باشد. از سوی دیگر، پردازش Node.js به شما امکان می‌دهد که از امکانات سرور قدرتمند برای پردازش‌های سنگین و پیچیده استفاده کنید.

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

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

import { createRouter } from 'next/app-router';

const appRouter = createRouter({
  routes: [
    {
      path: '/',
      component: 'Home',
      edge: true // تعیین می‌کند که این مسیر در Edge اجرا شود.
    },
    {
      path: '/about',
      component: 'About',
      node: true // تعیین می‌کند که این مسیر در Node.js اجرا شود.
    }
  ]
});

export default appRouter;

import { createRouter } from 'next/app-router';
از بسته `next/app-router` تابع createRouter را وارد می‌کنیم.

const appRouter = createRouter({
یک نمونه از router با استفاده از تابع createRouter ایجاد می‌کنیم.

routes: [{ path: '/', component: 'Home', edge: true }]
در اینجا یک مسیر تعریف کرده‌ایم که با استفاده از تنظیم `edge: true` مشخص می‌کنیم در Edge پردازش شود.

{ path: '/about', component: 'About', node: true }
برای مسیر دوم `/about` مشخص می‌کنیم که به صورت سرور-ساید یا Node.js پردازش شود.

export default appRouter;
router تعریف شده را به صورت پیش‌فرض صادر می‌کنیم تا در جای دیگر پروژه از آن استفاده شود.