در چشم انداز همیشه در حال تحول توسعه وب، URL به عنوان یک قهرمان خاموش ظاهر شده است. همانطور که توسعه‌دهندگان فرانت‌اند چالش‌های ادغام یک state manager در سرور کامپوننت را بررسی می‌کنند، URL یک راه حل تازه در توسعه Next.js ارائه می‌دهد.

URL فراتر از نقش سنتی خود به عنوان یک آدرس وب، به یک ابزار مدیریت state قدرتمند تبدیل شده است که نحوه تعامل کاربران و ذخیره تجربیات آنلاین آن‌ها را متحول می‌کند.

فعالیت‌هایی که در زیر داریم کمک می‌کند تا درک کنیم که URL چگونه می‌تواند چنین کارهایی را در پروژه‌های Next.js انجام دهد و به کاربران و توسعه‌دهندگان کمک کند:

• محتوای مورد نظر خود را با یک لینک ساده به اشتراک می‌گذاریم.
• صفحات را برای مراجعات بعدی bookmark می‌کنیم.
• به طور یکپارچه، نتایج جستجو را ذخیره می‌کنیم.

در ادامه قصد داریم تا این مفهوم را با یک مثال عملی در یک سرور کامپوننت بررسی نماییم.

import Link from 'next/link';

export default function ProductPage({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const selectedColor = (searchParams?.color || 'blue') as string;
  const selectedSize = (searchParams?.size || 'M') as string;

  const sizeVariants = ['S', 'M', 'L', 'XL'];

  return (
    // ...
    <div>
      {sizeVariants.map((size, index) => (
        <Link
          key={index}
          href={`?${new URLSearchParams({
            color: selectedColor,
            size,
          })}`}
          className={`${
            selectedSize === size ? 'bg-blue-500' : 'bg-gray-200'
          } mr-2 inline-block h-8 w-8 text-center leading-8`}
        >
          {size}
        </Link>
      ))}
    </div>
    // ...
  );
}

این کامپوننت یک prop به نام

فرض کنید یک صفحه محصول برای یک پیراهن صورتی در سایز “XL” داریم. URL آن ممکن است شبیه به مثال زیر باشد:

https://www.examplestore.com/product-page?color=pink&size=XL

اکنون می‌خواهیم نحوه کمک کد به این موضوع را بررسی کنیم.

مقادیر پیش‌فرض:

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

const selectedColor = (searchParams?.color || 'blue') as string;
const selectedSize = (searchParams?.size || 'M') as string;

تولید لینک:

این خط ویژگی

با ترکیب

href={`?${new URLSearchParams({ color: selectedColor, size })}`}

استایل‌دهی:

classNameها به صورت پویا به Linkها استایل می‌دهند. به این صورت که سایز مورد نظر را با پس‌زمینه آبی برجسته می‌کنند و در نتیجه یک نشانه بصری ارائه می‌دهند.

className={`${
  selectedSize === size ? 'bg-blue-500' : 'bg-gray-200'
} mr-2 inline-block h-8 w-8 text-center leading-8`}

در ادامه قصد داریم تا مثالی را در سمت کلاینت که دارای ورودی جستجو است بررسی کنیم.

'use client';

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
 
export default function Search() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();
 
  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams);
    if (term) {
      params.set('query', term);
    } else {
      params.delete('query');
    }
    replace(`${pathname}?${params.toString()}`);
  }
}


return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        defaultValue={searchParams.get('query')?.toString()}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

قطعه کدی که داریم از هوک‌های navigation سمت کلاینت نسخه Next.js 14 استفاده می‌نماید.

handleSearch:

تابع

function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams);
    if (term) {
      params.set('query', term);
    } else {
      params.delete('query');
    }
    replace(`${pathname}?${params.toString()}`);
  }

defaultValue:

<input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        defaultValue={searchParams.get('query')?.toString()}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
      />

اکنون به اشتراک گذاری راحت تجربیات مورد نظر کاربران را بررسی خواهیم کرد.

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

برای مثال، آدرس اینترنتی را در نظر بگیرید:

در ادامه فهرستی از نمونه‌هایی وجود دارد که نشان می‌دهد چگونه URL می‌تواند به عنوان یک state manager ایده‌آل، به‌ویژه در زمینه سرور کامپوننت‌ها عمل کند:

• صفحه بندی:
  /products?page=2
  /products?page=2
• ورودی‌های جستجو:
  /search?query=shoes&type=sneaker
  /search?query=shoes&type=sneaker
• گزینه‌های مرتب‌سازی:
  /products?category=clothing&sort=price-asc
  /products?category=clothing&sort=price-asc
• فیلتر کردن بر اساس دسته:
  /products?category=electronics
  /products?category=electronics
• ترجیحات کاربر:
  /profile?theme=dark&language=en
  /profile?theme=dark&language=en
• فرم‌های پویا:
  /form?step=2
  /form?step=2

جمع‌بندی

در این مقاله سعی کردیم تا بررسی کنیم که چرا URL می‌تواند به عنوان یک state manager ایده‌آل در سرور کامپوننت‌ها و کلاینت کامپوننت‌های پروژه‌های Next.js مورد استفاده قرار بگیرد. موارد استفاده زیادی در این مورد وجود دارد که ما فقط به چند نمونه از آن‌ها اشاره کردیم.