نحوه استایل دادن به پیوندهای Nav فعال در اجزای سرور در Next.js

Summarize this content to 400 words in Persian Lang سلام، همه! Next.js در حال حاضر بسیار داغ است، به خصوص با نسخه جدید 15، که بسیاری از ویژگی های جالب را اضافه کرد. اما امروز در مورد آن نیست. شناخته شده ترین ویژگی های Next.js روتر مبتنی بر فایل و SSR داخلی (Server-Side Rendering) آن است.

SSR یک موضوع پیچیده است، به خصوص زمانی که صحبت از همگام سازی حالت سرور و سرویس گیرنده برنامه شما می شود، در اینجا بسیاری از افراد به جای آن رندر سمت مشتری (CSR) را انتخاب می کنند. البته، سناریوهایی وجود دارد که اجزای سرور امکان‌پذیر نیستند، اما نکته کلیدی این است که Next.js اساساً بر اساس SSR ساخته شده است تا عملکرد و SEO را بهبود بخشد، و آن را به یک انتخاب قدرتمند برای برنامه‌هایی تبدیل می‌کند که از رندرینگ روی سرور سود می‌برند.

خیلی خوب، چگونه می‌توانیم یک نوار ناوبری با پیوندهایی بسازیم که وقتی در یک صفحه خاص هستیم برجسته می‌شوند؟ رویکرد اصلی این است که روی یک آرایه از پیوندها تکرار کنید و پیوندهایی را برجسته کنید pathname با مسیر فعلی در مرورگر مطابقت دارد. برای بدست آوردن pathname در Next.js ما می توانیم به شما usePathname (useRouter برای صفحات روتر) قلاب. با این رویکرد، ما به چیزی شبیه به این خواهیم رسید:

“use client”;
import { cn } from “@/lib/utils”;
import { usePathname } from “next/navigation”;
import Link, { type LinkProps } from “next/link”;

type ClientNavProps = {
links: LinkProps[];
};

function ClientNav({ links }: ClientNavProps) {
const pathname = usePathname();

const isActive = (href: LinkProps[“href”]) => {
const hrefStr = href.toString();
if (hrefStr === pathname) return true;
if (hrefStr.length > 1 && pathname.startsWith(hrefStr)) return true;
return false;
};

return (
<nav className=”space-x-2″>
{links.map((e) => (
<Link
{…e}
key={e.href.toString()}
className={cn(
“px-2 py-1 border rounded-lg”,
isActive(e.href) && “bg-black text-white”
)}
/>
))}
</nav>
);
}

export default ClientNav;

در اینجا چگونه در مرورگر به نظر می رسد:

با این حال، مشکل این رویکرد این است که مؤلفه مبتنی بر مشتری است که برای سئو ایده‌آل نیست. از آنجایی که نمی‌توانیم قلاب‌های کلاینت را در مؤلفه‌های سرور صدا کنیم، باید به این سؤال بپردازیم که چگونه می‌توان آن را دریافت کرد pathname در سمت سرور برای ارائه پیوند فعلی به صورت برجسته شده.

و پاسخ به این سوال دشوار نیست، در اینجا میان افزار مفید است. با استفاده از میان افزار، می توانیم آن را اضافه کنیم pathname به سربرگ های پاسخ، و آن را به گونه ای پیکربندی کنید که برای همه مسیرهای صفحه فعال شود:

import { NextResponse } from “next/server”;
import type { NextRequest } from “next/server”;

export const config = {
matcher: [“/((?!api|_next/static|_next/image|favicon.ico).*)”],
};

export default function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers);
requestHeaders.set(“x-next-pathname”, request.nextUrl.pathname);

return NextResponse.next({ request: { headers: requestHeaders } });
}

در حال حاضر داشتن x-next-pathname با جریان pathname ما می توانیم با استفاده از تابع هدر به آن دسترسی داشته باشیم (به خاطر داشته باشید که Next 15 و بالاتر اکنون ناهمزمان هستند: headers، cookies، params، و searchParams).

import { cn } from “@/lib/utils”;
import { headers } from “next/headers”;
import Link, { type LinkProps } from “next/link”;

type ClientNavProps = {
links: LinkProps[];
};

async function ServerNav({ links }: ClientNavProps) {
const headersList = await headers();
const pathname = headersList.get(“x-next-pathname”) || “/”;

const isActive = (href: LinkProps[“href”]) => {
const hrefStr = href.toString();
if (hrefStr === pathname) return true;
if (hrefStr.length > 1 && pathname.startsWith(hrefStr)) return true;
return false;
};

return (
<nav className=”space-x-2″>
{links.map((e) => (
<Link
{…e}
key={e.href.toString()}
className={cn(
“px-2 py-1 border rounded-lg”,
isActive(e.href) && “bg-black text-white”
)}
/>
))}
</nav>
);
}

export default ServerNav;

در مورد مکان قرار دادن نوار ناوبری سرور در برنامه خود مراقب باشید. این نمونه خاص فقط زمانی کار می کند که در داخل استفاده شود page.tsx فایل‌ها، زیرا باید در تغییرات URL دوباره رندر شوند.

این احتمالا ساده ترین راه برای ساختن یک مؤلفه نوار ناوبری سمت سرور است که پیوند فعال فعلی را برجسته می کند. تمام شد—ممنون که خواندید، دفعه بعد می بینمت!

سلام، همه! Next.js در حال حاضر بسیار داغ است، به خصوص با نسخه جدید 15، که بسیاری از ویژگی های جالب را اضافه کرد. اما امروز در مورد آن نیست. شناخته شده ترین ویژگی های Next.js روتر مبتنی بر فایل و SSR داخلی (Server-Side Rendering) آن است.

SSR یک موضوع پیچیده است، به خصوص زمانی که صحبت از همگام سازی حالت سرور و سرویس گیرنده برنامه شما می شود، در اینجا بسیاری از افراد به جای آن رندر سمت مشتری (CSR) را انتخاب می کنند. البته، سناریوهایی وجود دارد که اجزای سرور امکان‌پذیر نیستند، اما نکته کلیدی این است که Next.js اساساً بر اساس SSR ساخته شده است تا عملکرد و SEO را بهبود بخشد، و آن را به یک انتخاب قدرتمند برای برنامه‌هایی تبدیل می‌کند که از رندرینگ روی سرور سود می‌برند.

خیلی خوب، چگونه می‌توانیم یک نوار ناوبری با پیوندهایی بسازیم که وقتی در یک صفحه خاص هستیم برجسته می‌شوند؟ رویکرد اصلی این است که روی یک آرایه از پیوندها تکرار کنید و پیوندهایی را برجسته کنید pathname با مسیر فعلی در مرورگر مطابقت دارد. برای بدست آوردن pathname در Next.js ما می توانیم به شما usePathname (useRouter برای صفحات روتر) قلاب. با این رویکرد، ما به چیزی شبیه به این خواهیم رسید:

"use client";
import { cn } from "@/lib/utils";
import { usePathname } from "next/navigation";
import Link, { type LinkProps } from "next/link";

type ClientNavProps = {
  links: LinkProps[];
};

function ClientNav({ links }: ClientNavProps) {
  const pathname = usePathname();

  const isActive = (href: LinkProps["href"]) => {
    const hrefStr = href.toString();
    if (hrefStr === pathname) return true;
    if (hrefStr.length > 1 && pathname.startsWith(hrefStr)) return true;
    return false;
  };

  return (
    <nav className="space-x-2">
      {links.map((e) => (
        <Link
          {...e}
          key={e.href.toString()}
          className={cn(
            "px-2 py-1 border rounded-lg",
            isActive(e.href) && "bg-black text-white"
          )}
        />
      ))}
    </nav>
  );
}

export default ClientNav;

در اینجا چگونه در مرورگر به نظر می رسد:

با این حال، مشکل این رویکرد این است که مؤلفه مبتنی بر مشتری است که برای سئو ایده‌آل نیست. از آنجایی که نمی‌توانیم قلاب‌های کلاینت را در مؤلفه‌های سرور صدا کنیم، باید به این سؤال بپردازیم که چگونه می‌توان آن را دریافت کرد pathname در سمت سرور برای ارائه پیوند فعلی به صورت برجسته شده.

و پاسخ به این سوال دشوار نیست، در اینجا میان افزار مفید است. با استفاده از میان افزار، می توانیم آن را اضافه کنیم pathname به سربرگ های پاسخ، و آن را به گونه ای پیکربندی کنید که برای همه مسیرهای صفحه فعال شود:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

export default function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("x-next-pathname", request.nextUrl.pathname);

  return NextResponse.next({ request: { headers: requestHeaders } });
}

در حال حاضر داشتن x-next-pathname با جریان pathname ما می توانیم با استفاده از تابع هدر به آن دسترسی داشته باشیم (به خاطر داشته باشید که Next 15 و بالاتر اکنون ناهمزمان هستند: headers، cookies، params، و searchParams).

import { cn } from "@/lib/utils";
import { headers } from "next/headers";
import Link, { type LinkProps } from "next/link";

type ClientNavProps = {
  links: LinkProps[];
};

async function ServerNav({ links }: ClientNavProps) {
  const headersList = await headers();
  const pathname = headersList.get("x-next-pathname") || "/";

  const isActive = (href: LinkProps["href"]) => {
    const hrefStr = href.toString();
    if (hrefStr === pathname) return true;
    if (hrefStr.length > 1 && pathname.startsWith(hrefStr)) return true;
    return false;
  };

  return (
    <nav className="space-x-2">
      {links.map((e) => (
        <Link
          {...e}
          key={e.href.toString()}
          className={cn(
            "px-2 py-1 border rounded-lg",
            isActive(e.href) && "bg-black text-white"
          )}
        />
      ))}
    </nav>
  );
}

export default ServerNav;

در مورد مکان قرار دادن نوار ناوبری سرور در برنامه خود مراقب باشید. این نمونه خاص فقط زمانی کار می کند که در داخل استفاده شود page.tsx فایل‌ها، زیرا باید در تغییرات URL دوباره رندر شوند.

این احتمالا ساده ترین راه برای ساختن یک مؤلفه نوار ناوبری سمت سرور است که پیوند فعال فعلی را برجسته می کند. تمام شد—ممنون که خواندید، دفعه بعد می بینمت!