{"id":83255,"date":"2024-11-10T14:28:10","date_gmt":"2024-11-10T10:58:10","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-style-active-nav-links-in-server-components-in-nextjs-1193\/"},"modified":"2024-11-10T14:28:10","modified_gmt":"2024-11-10T10:58:10","slug":"how-to-style-active-nav-links-in-server-components-in-nextjs-1193","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-style-active-nav-links-in-server-components-in-nextjs-1193\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc Nav \u0641\u0639\u0627\u0644 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 \u062f\u0631 Next.js"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang \u0633\u0644\u0627\u0645\u060c \u0647\u0645\u0647! Next.js \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0633\u06cc\u0627\u0631 \u062f\u0627\u063a \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0628\u0627 \u0646\u0633\u062e\u0647 \u062c\u062f\u06cc\u062f 15\u060c \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062c\u0627\u0644\u0628 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f. \u0627\u0645\u0627 \u0627\u0645\u0631\u0648\u0632 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0646\u06cc\u0633\u062a. \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Next.js \u0631\u0648\u062a\u0631 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u0627\u06cc\u0644 \u0648 SSR \u062f\u0627\u062e\u0644\u06cc (Server-Side Rendering) \u0622\u0646 \u0627\u0633\u062a.<\/p>\n

SSR \u06cc\u06a9 \u0645\u0648\u0636\u0648\u0639 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0635\u062d\u0628\u062a \u0627\u0632 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u0633\u0631\u0648\u0631 \u0648 \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u0641\u0631\u0627\u062f \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc (CSR) \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0627\u0644\u0628\u062a\u0647\u060c \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u0627\u0645\u0627 \u0646\u06a9\u062a\u0647 \u06a9\u0644\u06cc\u062f\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 Next.js \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0631 \u0627\u0633\u0627\u0633 SSR \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 SEO \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u062f\u060c \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0627\u0632 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0633\u0648\u062f \u0645\u06cc\u200c\u0628\u0631\u0646\u062f.<\/p>\n

\u062e\u06cc\u0644\u06cc \u062e\u0648\u0628\u060c \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0648\u0642\u062a\u06cc \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062e\u0627\u0635 \u0647\u0633\u062a\u06cc\u0645 \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u061f \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0631\u0648\u06cc \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u062c\u0633\u062a\u0647 \u06a9\u0646\u06cc\u062f pathname \u0628\u0627 \u0645\u0633\u06cc\u0631 \u0641\u0639\u0644\u06cc \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f. \u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 pathname \u062f\u0631 Next.js \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0634\u0645\u0627 usePathname (useRouter \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0627\u062a \u0631\u0648\u062a\u0631) \u0642\u0644\u0627\u0628. \u0628\u0627 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u060c \u0645\u0627 \u0628\u0647 \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0631\u0633\u06cc\u062f:<\/p>\n

“use client”;
\nimport { cn } from “@\/lib\/utils”;
\nimport { usePathname } from “next\/navigation”;
\nimport Link, { type LinkProps } from “next\/link”;<\/p>\n

type ClientNavProps = {
\n links: LinkProps[];
\n};<\/p>\n

function ClientNav({ links }: ClientNavProps) {
\n const pathname = usePathname();<\/p>\n

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

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

export default ClientNav;<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u06af\u0648\u0646\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f:<\/p>\n

\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u0634\u06a9\u0644 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0634\u062a\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0626\u0648 \u0627\u06cc\u062f\u0647\u200c\u0622\u0644 \u0646\u06cc\u0633\u062a. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0642\u0644\u0627\u0628\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0635\u062f\u0627 \u06a9\u0646\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0633\u0624\u0627\u0644 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f pathname \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u067e\u06cc\u0648\u0646\u062f \u0641\u0639\u0644\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u062c\u0633\u062a\u0647 \u0634\u062f\u0647.<\/p>\n

\u0648 \u067e\u0627\u0633\u062e \u0628\u0647 \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u062f\u0634\u0648\u0627\u0631 \u0646\u06cc\u0633\u062a\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 pathname \u0628\u0647 \u0633\u0631\u0628\u0631\u06af \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u060c \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0641\u0639\u0627\u0644 \u0634\u0648\u062f:<\/p>\n

import { NextResponse } from “next\/server”;
\nimport type { NextRequest } from “next\/server”;<\/p>\n

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

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

return NextResponse.next({ request: { headers: requestHeaders } });
\n}<\/p>\n

\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0627\u0634\u062a\u0646 x-next-pathname \u0628\u0627 \u062c\u0631\u06cc\u0627\u0646 pathname \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0627\u0628\u0639 \u0647\u062f\u0631 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 (\u0628\u0647 \u062e\u0627\u0637\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 Next 15 \u0648 \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u06a9\u0646\u0648\u0646 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0647\u0633\u062a\u0646\u062f: headers\u060c cookies\u060c params\u060c \u0648 searchParams).<\/p>\n

import { cn } from “@\/lib\/utils”;
\nimport { headers } from “next\/headers”;
\nimport Link, { type LinkProps } from “next\/link”;<\/p>\n

type ClientNavProps = {
\n links: LinkProps[];
\n};<\/p>\n

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

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

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

export default ServerNav;<\/p>\n

\u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u06a9\u0627\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0633\u0631\u0648\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0645\u0631\u0627\u0642\u0628 \u0628\u0627\u0634\u06cc\u062f. \u0627\u06cc\u0646 \u0646\u0645\u0648\u0646\u0647 \u062e\u0627\u0635 \u0641\u0642\u0637 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f page.tsx \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u060c \u0632\u06cc\u0631\u0627 \u0628\u0627\u06cc\u062f \u062f\u0631 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a URL \u062f\u0648\u0628\u0627\u0631\u0647 \u0631\u0646\u062f\u0631 \u0634\u0648\u0646\u062f.<\/p>\n

\u0627\u06cc\u0646 \u0627\u062d\u062a\u0645\u0627\u0644\u0627 \u0633\u0627\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0633\u062a \u06a9\u0647 \u067e\u06cc\u0648\u0646\u062f \u0641\u0639\u0627\u0644 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u062a\u0645\u0627\u0645 \u0634\u062f\u2014\u0645\u0645\u0646\u0648\u0646 \u06a9\u0647 \u062e\u0648\u0627\u0646\u062f\u06cc\u062f\u060c \u062f\u0641\u0639\u0647 \u0628\u0639\u062f \u0645\u06cc \u0628\u06cc\u0646\u0645\u062a!<\/p>\n

\u0633\u0644\u0627\u0645\u060c \u0647\u0645\u0647! Next.js \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0633\u06cc\u0627\u0631 \u062f\u0627\u063a \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0628\u0627 \u0646\u0633\u062e\u0647 \u062c\u062f\u06cc\u062f 15\u060c \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062c\u0627\u0644\u0628 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f. \u0627\u0645\u0627 \u0627\u0645\u0631\u0648\u0632 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0646\u06cc\u0633\u062a. \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Next.js \u0631\u0648\u062a\u0631 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u0627\u06cc\u0644 \u0648 SSR \u062f\u0627\u062e\u0644\u06cc (Server-Side Rendering) \u0622\u0646 \u0627\u0633\u062a.<\/p>\n

SSR \u06cc\u06a9 \u0645\u0648\u0636\u0648\u0639 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0635\u062d\u0628\u062a \u0627\u0632 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u0633\u0631\u0648\u0631 \u0648 \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u0641\u0631\u0627\u062f \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc (CSR) \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0627\u0644\u0628\u062a\u0647\u060c \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0627\u062c\u0632\u0627\u06cc \u0633\u0631\u0648\u0631 \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u0627\u0645\u0627 \u0646\u06a9\u062a\u0647 \u06a9\u0644\u06cc\u062f\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 Next.js \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0631 \u0627\u0633\u0627\u0633 SSR \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 SEO \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u062f\u060c \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0627\u0632 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0633\u0648\u062f \u0645\u06cc\u200c\u0628\u0631\u0646\u062f.<\/p>\n

\u062e\u06cc\u0644\u06cc \u062e\u0648\u0628\u060c \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0648\u0642\u062a\u06cc \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062e\u0627\u0635 \u0647\u0633\u062a\u06cc\u0645 \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u061f \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0631\u0648\u06cc \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u062c\u0633\u062a\u0647 \u06a9\u0646\u06cc\u062f pathname<\/code> \u0628\u0627 \u0645\u0633\u06cc\u0631 \u0641\u0639\u0644\u06cc \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f. \u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 pathname<\/code> \u062f\u0631 Next.js \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0634\u0645\u0627 usePathname<\/code> (useRouter<\/code> \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0627\u062a \u0631\u0648\u062a\u0631) \u0642\u0644\u0627\u0628. \u0628\u0627 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u060c \u0645\u0627 \u0628\u0647 \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0631\u0633\u06cc\u062f:\n<\/p>\n

\n
\"<\/span>use client<\/span>\"<\/span>;<\/span>\nimport<\/span> {<\/span> cn<\/span> }<\/span> from<\/span> \"<\/span>@\/lib\/utils<\/span>\"<\/span>;<\/span>\nimport<\/span> {<\/span> usePathname<\/span> }<\/span> from<\/span> \"<\/span>next\/navigation<\/span>\"<\/span>;<\/span>\nimport<\/span> Link<\/span>,<\/span> {<\/span> type<\/span> LinkProps<\/span> }<\/span> from<\/span> \"<\/span>next\/link<\/span>\"<\/span>;<\/span>\n\ntype<\/span> ClientNavProps<\/span> =<\/span> {<\/span>\n  links<\/span>:<\/span> LinkProps<\/span>[];<\/span>\n};<\/span>\n\nfunction<\/span> ClientNav<\/span>({<\/span> links<\/span> }:<\/span> ClientNavProps<\/span>)<\/span> {<\/span>\n  const<\/span> pathname<\/span> =<\/span> usePathname<\/span>();<\/span>\n\n  const<\/span> isActive<\/span> =<\/span> (<\/span>href<\/span>:<\/span> LinkProps<\/span>[<\/span>\"<\/span>href<\/span>\"<\/span>])<\/span> =><\/span> {<\/span>\n    const<\/span> hrefStr<\/span> =<\/span> href<\/span>.<\/span>toString<\/span>();<\/span>\n    if <\/span>(<\/span>hrefStr<\/span> ===<\/span> pathname<\/span>)<\/span> return<\/span> true<\/span>;<\/span>\n    if <\/span>(<\/span>hrefStr<\/span>.<\/span>length<\/span> ><\/span> 1<\/span> &&<\/span> pathname<\/span>.<\/span>startsWith<\/span>(<\/span>hrefStr<\/span>))<\/span> return<\/span> true<\/span>;<\/span>\n    return<\/span> false<\/span>;<\/span>\n  };<\/span>\n\n  return <\/span>(<\/span>\n    <<\/span>nav<\/span> className<\/span>=<\/span>\"space-x-2\"<\/span>><\/span>\n      {<\/span>links<\/span>.<\/span>map<\/span>((<\/span>e<\/span>)<\/span> =><\/span> (<\/span>\n        <<\/span>Link<\/span>\n          {<\/span>...<\/span>e<\/span>}<\/span>\n          key<\/span>=<\/span>{<\/span>e<\/span>.<\/span>href<\/span>.<\/span>toString<\/span>()<\/span>}<\/span>\n          className<\/span>=<\/span>{<\/span>cn<\/span>(<\/span>\n            \"<\/span>px-2 py-1 border rounded-lg<\/span>\"<\/span>,<\/span>\n            isActive<\/span>(<\/span>e<\/span>.<\/span>href<\/span>)<\/span> &&<\/span> \"<\/span>bg-black text-white<\/span>\"<\/span>\n          )<\/span>}<\/span>\n        \/><\/span>\n      ))<\/span>}<\/span>\n    <\/<\/span>nav<\/span>><\/span>\n  );<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> ClientNav<\/span>;<\/span>\n<\/code><\/pre>\n<\/div>\n
\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u06af\u0648\u0646\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f:<\/p>\n
<\/p>\n
\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u0634\u06a9\u0644 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0634\u062a\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0626\u0648 \u0627\u06cc\u062f\u0647\u200c\u0622\u0644 \u0646\u06cc\u0633\u062a. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0642\u0644\u0627\u0628\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0635\u062f\u0627 \u06a9\u0646\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0633\u0624\u0627\u0644 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f pathname<\/code> \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u067e\u06cc\u0648\u0646\u062f \u0641\u0639\u0644\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u062c\u0633\u062a\u0647 \u0634\u062f\u0647.<\/p>\n
\u0648 \u067e\u0627\u0633\u062e \u0628\u0647 \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u062f\u0634\u0648\u0627\u0631 \u0646\u06cc\u0633\u062a\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u06cc\u0627\u0646 \u0627\u0641\u0632\u0627\u0631\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 pathname<\/code> \u0628\u0647 \u0633\u0631\u0628\u0631\u06af \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u060c \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0641\u0639\u0627\u0644 \u0634\u0648\u062f:\n<\/p>\n
\n
import<\/span> {<\/span> NextResponse<\/span> }<\/span> from<\/span> \"<\/span>next\/server<\/span>\"<\/span>;<\/span>\nimport<\/span> type<\/span> {<\/span> NextRequest<\/span> }<\/span> from<\/span> \"<\/span>next\/server<\/span>\"<\/span>;<\/span>\n\nexport<\/span> const<\/span> config<\/span> =<\/span> {<\/span>\n  matcher<\/span>:<\/span> [<\/span>\"<\/span>\/((?!api|_next\/static|_next\/image|favicon.ico).*)<\/span>\"<\/span>],<\/span>\n};<\/span>\n\nexport<\/span> default<\/span> function<\/span> middleware<\/span>(<\/span>request<\/span>:<\/span> NextRequest<\/span>)<\/span> {<\/span>\n  const<\/span> requestHeaders<\/span> =<\/span> new<\/span> Headers<\/span>(<\/span>request<\/span>.<\/span>headers<\/span>);<\/span>\n  requestHeaders<\/span>.<\/span>set<\/span>(<\/span>\"<\/span>x-next-pathname<\/span>\"<\/span>,<\/span> request<\/span>.<\/span>nextUrl<\/span>.<\/span>pathname<\/span>);<\/span>\n\n  return<\/span> NextResponse<\/span>.<\/span>next<\/span>({<\/span> request<\/span>:<\/span> {<\/span> headers<\/span>:<\/span> requestHeaders<\/span> }<\/span> });<\/span>\n}<\/span>\n<\/code><\/pre>\n<\/div>\n
\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0627\u0634\u062a\u0646 x-next-pathname<\/code> \u0628\u0627 \u062c\u0631\u06cc\u0627\u0646 pathname<\/code> \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0627\u0628\u0639 \u0647\u062f\u0631 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 (\u0628\u0647 \u062e\u0627\u0637\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 Next 15 \u0648 \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u06a9\u0646\u0648\u0646 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0647\u0633\u062a\u0646\u062f: headers<\/code>\u060c cookies<\/code>\u060c params<\/code>\u060c \u0648 searchParams<\/code>).\n<\/p>\n
\n
import<\/span> {<\/span> cn<\/span> }<\/span> from<\/span> \"<\/span>@\/lib\/utils<\/span>\"<\/span>;<\/span>\nimport<\/span> {<\/span> headers<\/span> }<\/span> from<\/span> \"<\/span>next\/headers<\/span>\"<\/span>;<\/span>\nimport<\/span> Link<\/span>,<\/span> {<\/span> type<\/span> LinkProps<\/span> }<\/span> from<\/span> \"<\/span>next\/link<\/span>\"<\/span>;<\/span>\n\ntype<\/span> ClientNavProps<\/span> =<\/span> {<\/span>\n  links<\/span>:<\/span> LinkProps<\/span>[];<\/span>\n};<\/span>\n\nasync<\/span> function<\/span> ServerNav<\/span>({<\/span> links<\/span> }:<\/span> ClientNavProps<\/span>)<\/span> {<\/span>\n  const<\/span> headersList<\/span> =<\/span> await<\/span> headers<\/span>();<\/span>\n  const<\/span> pathname<\/span> =<\/span> headersList<\/span>.<\/span>get<\/span>(<\/span>\"<\/span>x-next-pathname<\/span>\"<\/span>)<\/span> ||<\/span> \"<\/span>\/<\/span>\"<\/span>;<\/span>\n\n  const<\/span> isActive<\/span> =<\/span> (<\/span>href<\/span>:<\/span> LinkProps<\/span>[<\/span>\"<\/span>href<\/span>\"<\/span>])<\/span> =><\/span> {<\/span>\n    const<\/span> hrefStr<\/span> =<\/span> href<\/span>.<\/span>toString<\/span>();<\/span>\n    if <\/span>(<\/span>hrefStr<\/span> ===<\/span> pathname<\/span>)<\/span> return<\/span> true<\/span>;<\/span>\n    if <\/span>(<\/span>hrefStr<\/span>.<\/span>length<\/span> ><\/span> 1<\/span> &&<\/span> pathname<\/span>.<\/span>startsWith<\/span>(<\/span>hrefStr<\/span>))<\/span> return<\/span> true<\/span>;<\/span>\n    return<\/span> false<\/span>;<\/span>\n  };<\/span>\n\n  return <\/span>(<\/span>\n    <<\/span>nav<\/span> className<\/span>=<\/span>\"space-x-2\"<\/span>><\/span>\n      {<\/span>links<\/span>.<\/span>map<\/span>((<\/span>e<\/span>)<\/span> =><\/span> (<\/span>\n        <<\/span>Link<\/span>\n          {<\/span>...<\/span>e<\/span>}<\/span>\n          key<\/span>=<\/span>{<\/span>e<\/span>.<\/span>href<\/span>.<\/span>toString<\/span>()<\/span>}<\/span>\n          className<\/span>=<\/span>{<\/span>cn<\/span>(<\/span>\n            \"<\/span>px-2 py-1 border rounded-lg<\/span>\"<\/span>,<\/span>\n            isActive<\/span>(<\/span>e<\/span>.<\/span>href<\/span>)<\/span> &&<\/span> \"<\/span>bg-black text-white<\/span>\"<\/span>\n          )<\/span>}<\/span>\n        \/><\/span>\n      ))<\/span>}<\/span>\n    <\/<\/span>nav<\/span>><\/span>\n  );<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> ServerNav<\/span>;<\/span>\n<\/code><\/pre>\n<\/div>\n
\u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u06a9\u0627\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0633\u0631\u0648\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0645\u0631\u0627\u0642\u0628 \u0628\u0627\u0634\u06cc\u062f. \u0627\u06cc\u0646 \u0646\u0645\u0648\u0646\u0647 \u062e\u0627\u0635 \u0641\u0642\u0637 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f page.tsx<\/code> \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u060c \u0632\u06cc\u0631\u0627 \u0628\u0627\u06cc\u062f \u062f\u0631 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a URL \u062f\u0648\u0628\u0627\u0631\u0647 \u0631\u0646\u062f\u0631 \u0634\u0648\u0646\u062f.<\/p>\n
\u0627\u06cc\u0646 \u0627\u062d\u062a\u0645\u0627\u0644\u0627 \u0633\u0627\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0633\u062a \u06a9\u0647 \u067e\u06cc\u0648\u0646\u062f \u0641\u0639\u0627\u0644 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u062a\u0645\u0627\u0645 \u0634\u062f\u2014\u0645\u0645\u0646\u0648\u0646 \u06a9\u0647 \u062e\u0648\u0627\u0646\u062f\u06cc\u062f\u060c \u062f\u0641\u0639\u0647 \u0628\u0639\u062f \u0645\u06cc \u0628\u06cc\u0646\u0645\u062a!<\/p>\n","protected":false},"excerpt":{"rendered":"
Summarize this content to 400 words in Persian Lang \u0633\u0644\u0627\u0645\u060c \u0647\u0645\u0647! Next.js \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u0633\u06cc\u0627\u0631 \u062f\u0627\u063a \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0628\u0627 \u0646\u0633\u062e\u0647 \u062c\u062f\u06cc\u062f 15\u060c \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062c\u0627\u0644\u0628 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f. \u0627\u0645\u0627 \u0627\u0645\u0631\u0648\u0632 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0646\u06cc\u0633\u062a. \u0634\u0646\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Next.js \u0631\u0648\u062a\u0631 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0641\u0627\u06cc\u0644 \u0648 SSR \u062f\u0627\u062e\u0644\u06cc (Server-Side Rendering) \u0622\u0646 …<\/p>\n","protected":false},"author":2,"featured_media":83256,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-83255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/83255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=83255"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/83255\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/83256"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=83255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=83255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=83255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}