چگونگی استفاده از اپ روتینگ در Next.js

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

در این روش هر فایل جدید که درون پوشه pages ساخته می‌شود به صورت خودکار به یک مسیر در اپلیکیشن تبدیل می‌شود. این ویژگی به شما کمک می‌کند تا بدون نیاز به تغییرات خاصی در فایل پیکربندی یا استفاده از کتابخانه‌های اضافی، مدیریت مسیرها را انجام دهید.

برای مثال، اگر فایلی به نام about.js در پوشه pages بسازید، می‌توانید به آن از طریق مسیر /about دسترسی پیدا کنید. این روند شامل ساخت یک سیستم تولید خودکار مسیرهاست که تجربه توسعه را بسیار ساده و بی دغدغه می‌سازد.

همچنین Next.js از قابلیت روتینگ دینامیک هم پشتیبانی می‌کند که به شما امکان می‌دهد تا مسیرهای پویایی مانند /users/[id] ایجاد کنید. این ویژگی برای ساختن صفحات شخصی‌سازی شده یا پروفایل کاربران بسیار مفید است. همه این امکانات در کنار هم باعث می‌شود که Next.js به ابزاری بسیار مناسب برای پروژه‌های متنوع وب تبدیل شود.

استفاده از این امکانات به شما کمک می‌کند تا توسعه سریع‌تری داشته باشید و پروژه‌های پیچیده‌تری را راحت‌تر مدیریت کنید. حال بیایید به یک مثال کاربردی نگاهی بیندازیم که ایمپلیمنتیشن این مفاهیم را نشان می‌دهد.

مثال ساده از روتینگ در Next.js

// فایل pages/about.js
import React from 'react';

function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>Welcome to the about page.</p>
    </div>
  );
}

export default About;

// فایل pages/users/[id].js
import React from 'react';
import { useRouter } from 'next/router';

function User() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>User Profile: {id}</h1>
    </div>
  );
}

export default User;

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