GlobalLink#

Next.js Link를 확장한 라우팅 링크 컴포넌트입니다. 클릭 시 RouteLoading의 로딩 상태를 자동으로 활성화합니다.

사용법#

import { GlobalLink } from '@coldsurfers/ocean-road/next'

<GlobalLink href="/concerts">공연 목록</GlobalLink>

// 외부 링크 — target 지정 시 로딩 상태를 활성화하지 않습니다
<GlobalLink href="https://example.com" target="_blank">
  외부 링크
</GlobalLink>

미들웨어 리다이렉트 처리 — initializeGlobalLinkRedirectMap#

Next.js 미들웨어에서 경로를 리다이렉트하는 경우, GlobalLink는 href와 실제 렌더되는 경로가 다르다는 것을 알지 못합니다. 예를 들어 미들웨어가 / → /live-events로 리다이렉트할 때, 사용자가 /live-events에 있는 상태에서 href="/" 링크를 클릭하면 페이지 이동은 없지만 RouteLoading 스피너가 표시됩니다.

이를 해결하려면 initializeGlobalLinkRedirectMap으로 리다이렉트 매핑을 등록합니다. 'use client' 클라이언트 컴포넌트 내에서 호출해야 합니다.

'use client'

import { initializeGlobalLinkRedirectMap } from '@coldsurfers/ocean-road/next'

// 앱 진입점(예: 최상위 Provider 컴포넌트)에서 한 번 호출
initializeGlobalLinkRedirectMap({
  '/': '/live-events',
})

등록 후 GlobalLink는 href="/"를 /live-events로 해석하여, 현재 경로와 동일하면 로딩 상태를 활성화하지 않습니다.

Props#

Next.js LinkProps와 AnchorHTMLAttributes<HTMLAnchorElement>를 모두 상속합니다.