useRouter

Next.js의 useRouter를 확장한 라우터 훅입니다.

Import

import { useRouter } from '@liner-engineering/orbit-core';

설치

Next.js peer dependency 설치가 필요합니다:

pnpm add next

확장 기능

기존 Next.js useRouter의 모든 기능에 추가로 asPathname 속성을 제공합니다.

asPathname

router.asPath에서 query string을 제거한 pathname입니다.

// URL: /projects/123?tab=overview
const { asPathname, asPath } = useRouter();

console.log(asPath); // '/projects/123?tab=overview'
console.log(asPathname); // '/projects/123'

API

interface ExtendedRouter extends NextRouter {
  /**
   * router.asPath에서 query string을 제거한 pathname
   * 예: '/projects/123?tab=overview' → '/projects/123'
   *
   * middleware rewrite와 무관하게 브라우저에 표시된 실제 경로 반환
   */
  asPathname: string;
}

function useRouter(): ExtendedRouter;

사용법

Query만 업데이트

URL 경로는 유지하면서 query만 변경할 때 유용합니다:

import { useRouter } from '@liner-engineering/orbit-core';

function TabNavigation() {
  const { asPathname, replace, query } = useRouter();

  const handleTabChange = (tab: string) => {
    replace({ pathname: asPathname, query: { ...query, tab } }, undefined, { shallow: true });
  };

  return (
    <Tabs value={query.tab} onChange={handleTabChange}>
      <Tab value="overview">개요</Tab>
      <Tab value="settings">설정</Tab>
    </Tabs>
  );
}

현재 경로 매칭

import { useRouter } from '@liner-engineering/orbit-core';

function NavigationLink({ href, children }: { href: string; children: ReactNode }) {
  const { asPathname } = useRouter();
  const isActive = asPathname === href;

  return (
    <Link href={href} className={isActive ? 'active' : ''}>
      {children}
    </Link>
  );
}

일반 useRouter와의 비교

import { useRouter as useNextRouter } from 'next/router';
import { useRouter } from '@liner-engineering/orbit-core';

// Next.js 기본 - query string 직접 제거 필요
const nextRouter = useNextRouter();
const pathname = nextRouter.asPath.split('?')[0];

// orbit-core - asPathname 바로 사용
const { asPathname } = useRouter();

middleware rewrite

asPathname은 middleware rewrite와 무관하게 브라우저에 표시된 실제 경로를 반환합니다. 예: 내부적으로 /_scholar/projects/123으로 rewrite되어도 /projects/123을 반환합니다.