Next.js의 서버 구성 요소에서 활성 Nav 링크의 스타일을 지정하는 방법-CSS 튜토리얼-php.cn

Next.js의 서버 구성 요소에서 활성 Nav 링크의 스타일을 지정하는 방법

Patricia Arquette

풀어 주다： 2024-11-26 20:04:14

원래의

533명이 탐색했습니다.

안녕하세요 여러분! Next.js는 지금 정말 인기가 많습니다. 특히 멋진 기능이 많이 추가된 새 버전 15에서는 더욱 그렇습니다. 하지만 오늘은 그것에 관한 것이 아닙니다. Next.js의 가장 잘 알려진 기능은 파일 기반 라우터와 내장 SSR(서버 측 렌더링)입니다.

SSR은 복잡한 주제입니다. 특히 앱의 서버 상태와 클라이언트 상태를 동기화하는 경우 많은 사람들이 대신 CSR(클라이언트 측 렌더링)을 선택합니다. 물론 서버 구성 요소가 실현 가능하지 않은 시나리오도 있지만 핵심은 Next.js가 기본적으로 SSR을 중심으로 구축되어 성능과 SEO를 향상시켜 서버 렌더링의 이점을 얻는 애플리케이션에 강력한 선택이 된다는 것입니다.

아, 특정 페이지에 있을 때 강조 표시되는 링크가 포함된 탐색 모음을 어떻게 만들 수 있나요? 기본 접근 방식은 링크 배열을 반복하고 경로 이름이 브라우저의 현재 경로와 일치하는 링크를 강조 표시하는 것입니다. Next.js에서 경로 이름을 얻으려면 Pathname(페이지 라우터에 대해 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;

로그인 후 복사

브라우저에서는 다음과 같이 표시됩니다.

How to style active Nav links in server components in Next.js

그러나 이 접근 방식의 문제점은 구성 요소가 클라이언트 기반이므로 SEO에 적합하지 않다는 것입니다. 서버 구성 요소에서는 클라이언트 후크를 호출할 수 없으므로 현재 링크를 강조 표시된 것으로 렌더링하기 위해 서버 측에서 경로 이름을 얻는 방법에 대한 문제를 해결해야 합니다.

이 질문에 답하는 것은 어렵지 않습니다. 여기서 미들웨어가 유용합니다. 미들웨어를 사용하면 응답 헤더에 경로 이름을 추가하고 모든 페이지 경로에 대해 트리거되도록 구성할 수 있습니다.

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이 있으면 헤더 함수를 사용하여 이에 액세스할 수 있습니다(Next 15 이상에서는 이제 헤더, 쿠키, 매개변수 및 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;

로그인 후 복사

앱에서 서버 탐색 모음을 배치할 위치에 주의하세요. 이 특정 예는 URL 변경 시 다시 렌더링해야 하므로 page.tsx 파일 내에서 사용될 때만 작동합니다.

이것은 현재 활성 링크를 강조 표시하는 서버 측 탐색 모음 구성 요소를 구축하는 가장 간단한 방법일 것입니다. 이상입니다. 읽어주셔서 감사합니다. 다음에 뵙겠습니다!

위 내용은 Next.js의 서버 구성 요소에서 활성 Nav 링크의 스타일을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!