Next.js는 리액트 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 SEO에 매우 유리합니다. Next.js의 라우터 기능은 페이지 이동과 URL 관리를 쉽게 해줍니다. `useRouter` 훅을 활용하면 클라이언트 측 라우팅을 손쉽게 구현할 수 있습니다. 이번 가이드에서는 `useRouter`의 사용법, 각 옵션의 종류와 사용법, 그리고 실용적인 활용법에 대해 자세히 알아보겠습니다.
1. useRouter 기본 사용법
`useRouter`는 Next.js에서 제공하는 훅으로, 클라이언트 측 라우팅과 관련된 다양한 기능을 제공합니다.
import { useRouter } from 'next/router';
const MyComponent = () => {
const router = useRouter();
// 현재 경로와 쿼리 파라미터를 가져옵니다.
const { pathname, query } = router;
return (
<div>
<p>Current path: {pathname}</p>
<p>Query parameters: {JSON.stringify(query)}</p>
</div>
);
};
2. router.push 메서드와 옵션
`router.push` 메서드는 페이지 이동을 위해 사용됩니다. URL을 변경하고 페이지를 새로 고침 없이 업데이트할 수 있습니다.
기본 사용법
const handleClick = () => {
router.push('/new-page');
};
쿼리 파라미터 추가
router.push({
pathname: '/new-page',
query: { search: 'keyword' },
});
shallow 옵션
`shallow` 옵션은 페이지를 다시 로드하지 않고 URL만 변경할 때 사용됩니다.
router.push('/new-page', undefined, { shallow: true });
예제 코드 살펴보기
다음은 간단한 샘플 코드입니다:
import { useRouter } from 'next/router';
const router = useRouter();
const type = 'example'; // 예제 type 변수
router.push(
{
pathname: router.pathname,
query: {
...router.query,
searchType: type,
},
},
`/new-path?searchType=${type}`,
{ shallow: true },
);
동작 방식
- 첫 번째 인자:
- `{ pathname: router.pathname, query: { …router.query, searchType: type } }` : 실제로 이동할 경로와 쿼리 파라미터를 정의합니다. 예를 들어, 현재 경로가 `/current-path`이고 쿼리 파라미터가 `{ page: 1 }`인 경우, 이 객체는 `{ pathname: ‘/current-path’, query: { page: 1, searchType: ‘example’ } }`가 됩니다.
- 두 번째 인자:
- `/new-path?searchType=example` : 브라우저 주소 표시줄에 표시될 URL입니다. 이 URL은 브라우저 주소 표시줄에 보이지만, 실제 이동 경로에 영향을 미치지 않습니다.
- 세 번째 인자:
- `{ shallow: true }` : 페이지를 리로드하지 않고 URL만 변경합니다.
결과
- 이동 경로: 실제로 이동하는 경로는 첫 번째 인자에 정의된 경로와 쿼리 파라미터입니다. 즉, Next.js 라우터는 `{ pathname: ‘/current-path’, query: { page: 1, searchType: ‘example’ } }`를 기준으로 페이지를 로드합니다.
- 표시되는 경로: 브라우저 주소 표시줄에는 `/new-path?searchType=example`가 표시됩니다. 이는 사용자가 URL을 쉽게 이해하고 공유할 수 있게 합니다.
3. router.replace 메서드
`router.replace` 메서드는 `router.push`와 유사하지만, 히스토리 스택을 관리하는 방식이 다릅니다. 브라우저 히스토리에 새로운 항목을 추가하지 않고 현재 항목을 교체합니다.
router.replace('/new-page');
4. router.prefetch 메서드
`router.prefetch` 메서드는 특정 페이지를 사전 로드하여 사용자 경험을 향상시킵니다. 링크 태그에 자동으로 적용됩니다.
useEffect(() => {
router.prefetch('/new-page');
}, []);
5. router.events 이벤트
Next.js의 라우터는 페이지 이동 시 다양한 이벤트를 제공합니다. 예를 들어, 로딩 상태를 표시할 수 있습니다.
import { useRouter } from 'next/router';
import { useEffect } from 'react';
const MyComponent = () => {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
console.log('App is changing to: ', url);
};
router.events.on('routeChangeStart', handleRouteChange);
return () => {
router.events.off('routeChangeStart', handleRouteChange);
};
}, []);
return <div>MyComponent</div>;
};
6. 실용적인 활용법
검색 필터링
const handleFilterChange = (filter) => {
router.push({
pathname: router.pathname,
query: { ...router.query, filter },
}, undefined, { shallow: true });
};
동적 경로
router.push('/product/[id]', `/product/${productId}`);
7. SEO 최적화 전략
Next.js의 라우팅 기능을 활용하여 SEO를 최적화할 수 있습니다. 의미 있는 URL 구조를 만들고, 클라이언트 측 네비게이션을 통해 사용자 경험을 향상시키십시오.
- 의미 있는 URL: 예를 들어, `/products/shoes` 대신 `/shoes`로 단순화.
- 메타 태그: 각 페이지에 적절한 메타 태그를 설정하여 검색 엔진에 페이지 정보를 제공.
import Head from 'next/head';
const SEO = () => (
<Head>
<title>My SEO Title</title>
<meta name="description" content="My SEO description" />
<meta name="keywords" content="nextjs, seo, tutorial" />
</Head>
);
마치며
지금까지 Next.js의 `useRouter`살펴보았습니다. 이 가이드를 통해 Next.js의 `useRouter`를 활용한 라우팅 기능을 충분히 이해하고, SEO에 최적화된 웹사이트를 구축하는 데 도움이 되길 바랍니다.