지역화된 페이지 간 링크 연결

사용자가 선택한 언어 유지하기

문제

언어 코드가 URL의 일부일 때, 내부 링크를 생성하는 것이 복잡해집니다. <a href="/about">와 같은 간단한 링크는 잘못된 방식입니다. 이는 지역화된 경로를 깨뜨려서 사용자를 /fr/contact에서 /fr/about이 아닌 /about으로 보내게 됩니다. 이로 인해 사용자는 선택한 언어 환경에서 벗어나게 됩니다.

해결책

Next.js의 Link 컴포넌트를 감싸는 커스텀 래퍼 컴포넌트를 만듭니다. 이 새로운 컴포넌트는 useParams 훅을 사용하여 URL에서 현재 언어를 가져오고, 받은 모든 href에 자동으로 언어 코드를 앞에 추가하여 모든 내부 링크가 올바르게 지역화되도록 합니다.

단계

새 파일 app/components/LocalizedLink.tsx를 생성합니다. 이는 useParams 훅을 사용하기 위해 클라이언트 컴포넌트여야 합니다.

// app/components/LocalizedLink.tsx
'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import type { ComponentProps } from 'react';

type LinkProps = ComponentProps<typeof Link>;

export default function LocalizedLink({ href, ...rest }: LinkProps) {
  const params = useParams();
  const lang = params.lang as string;

  let localizedHref = href;

  // Check if href is a string and needs prefixing
  if (typeof href === 'string' && href.startsWith('/')) {
    localizedHref = `/${lang}${href}`;
  } else if (
    typeof href === 'object' &&
    href !== null &&
    href.pathname?.startsWith('/')
  ) {
    // Re-create the object with a prefixed pathname
    localizedHref = {
      ...href,
      pathname: `/${lang}${href.pathname}`,
    };
  }
  // Absolute URLs or other cases are passed through

  return <Link href={localizedHref} {...rest} />;
}

이 컴포넌트는 표준 Link 속성들을 가져옵니다. href가 문자열(예: /about)인지 또는 객체(예: { pathname: '/about' })인지 확인하고, 현재 lang(예: es)을 지능적으로 앞에 추가합니다.

2. 페이지에서 컴포넌트 사용하기

이제 페이지에서 표준 next/link 대신 LocalizedLink를 가져옵니다. 일반 Link 컴포넌트와 동일하게 사용할 수 있지만 언어 접두사에 대해 걱정할 필요가 없습니다.

// app/[lang]/page.tsx
import LocalizedLink from '@/app/components/LocalizedLink';

export default function Home({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Home page</h1>
      <p>Current language: {params.lang}</p>
      
      <nav>
        <ul>
          <li>
            {/* 이것은 /en/about 또는 /es/about 등으로 렌더링됩니다. */}
            <LocalizedLink href="/about">About page</LocalizedLink>
          </li>
          <li>
            {/* 이것도 작동합니다 */}
            <LocalizedLink href={{ pathname: '/contact' }}>
              Contact page
            </LocalizedLink>
          </li>
        </ul>
      </nav>
    </div>
  );
}

이제 <LocalizedLink href="/about">를 사용하면 /{current_lang}/about으로 올바르게 링크가 렌더링되어 사용자가 사이트를 탐색할 때 선택한 언어를 유지할 수 있습니다.