📚 Next.js에서는 페이지 라우팅을 어떻게 처리할까?
Next.js에서는 다양한 기능을 통해 개발자가 더욱 효율적으로 웹 애플리케이션을 개발 할 수 있도록 도와준다. 그 중, 핵심적인 기능으로, Next.js에서는 다양한 라우팅 시스템을 제공해주고 있다.
이에 이번 글을 통해서, Next.js에서 제공중인 다양한 라우팅 기능들을 살펴보며 이러한 기능들이 어떻게 동작하고, 어떻게 활용될 수 있는지에 대해 자세히 알아보고자 한다.
Next.js에서의 라우팅
📌 파일시스템 기반 라우팅이란?
프론트엔드 개발에서 라우팅이란 어떤 주소에 어떤 페이지를 매칭해서 보여줄지를 말한다.
이에 확장해서, 파일시스템 기반 라우팅을 이해해보자. 파일시스템 기반 라우팅이란 파일의 경로가 주소에 매칭되는 라우팅 방식이다. 즉, 파일의 경로가 주소가 되는 방식인 것이다.
Nextjs에서는 파일시스템 기반 라우팅을 제공하는데, 이를 통해 React router를 사용할 때보다 편리하게 라우팅을 할 수 있게 도와준다.
📌 Dynamic 라우팅
Dynamic 라우팅이란
Dynamic 라우팅이란 여러 주소를 하나의 컴포넌트 페이지에서 처리하는 것이다. 예를 들어, 블로그 포스트의 경우 포스트마다 고유한 URL을 가지게 되는데, 이럴 때 동적 라우트를 쓰면 간편하게 이를 처리 가능하다.
구현 방법
Dynamic 라우팅을 구현하기 위해서는 폴더 이름을 [id]나 [slug] 같은 형태로 대괄호로 감싸면 된다.
Next.js에서는 이렇게 설정된 id나 slug를 param이라고 부르는데, 이렇게 생성된 param을 통해 Dynamic 라우팅을 다룰 수 있게 되는 것이다.
예시 코드
// pages/posts/[id].js
export default function Post({ params }) {
return <div>Post: {params.id}</div>;
}📌 Link 컴포넌트
Next.js에서는 링크를 연결하는데 <a> 태그 대신에 <Link> 컴포넌트를 사용한다.
<a> 태그를 사용하면 페이지를 이동할 때 페이지 전체를 다시 로딩하기 때문에 속도가 느리고, 빈 화면이 잠깐 보이면서 깜빡거림이 생기지만, <Link> 컴포넌트는 Next.js에서 내부적으로 여러 가지 최적화를 해주기 때문에 빠르고 부드러운 페이지 전환이 가능하다.
Link 컴포넌트를 통해 이러한 동작이 가능한 이유는 Pre-randering(프리랜더링) 덕분인데, 이에 관해서는 추후 글을 통해 더욱 자세히 다뤄보고자 한다.
예시 코드
// components/NavLink.js
import Link from 'next/link';
export default function NavLink({ href, children }) {
return <Link href={href}>{children}</Link>;
}📌 useRouter 쿼리
useRouter는 Next.js에서 제공하는 Hook으로, 현재 페이지의 라우터 정보에 쉽게 접근할 수 있게 해주는 기능이다.
UseRouter Hook을 활용하면, URL에 접근하거나, 쿼리 파라미터를 사용하거나, 라우트 매개변수를 활용할 수 있다.
활용 예시
-
라우트 매개변수 활용: Next.js의 Dynamic 라우팅을 통해 추출한 param을 활용 가능하다. 예를 들어, 블로그 게시물의 ID나 제품의 slug 등을 param으로 사용하여 해당 데이터에 접근할 수 있게 된다. -
쿼리 파라미터 사용: useRouter를 사용하면 URL의 쿼리 파라미터에 접근할 수 있다. 이러한 쿼리 파라미터는 검색, 필터링, 정렬 등에 유용하게 사용될 수 있으며, 페이지의 동적인 데이터 로딩이나 상태 업데이트에 활용될 수 있다. -
현재 페이지의 URL 접근: useRouter를 통해 현재 페이지의 경로에 접근할 수 있다. 이를 활용하여 특정 경로에 따라 다른 컴포넌트를 렌더링하거나 페이지의 특정 부분을 강조하는 등의 작업을 수행할 수 있습니다.
예시 코드
// pages/posts/[id].js
import { useRouter } from 'next/router';
export default function Post() {
const router = useRouter();
const { id } = router.query;
return <div>Post ID: {id}</div>;
}페이지 이동
이 때, router.push()함수를 사용하면 코드로 페이지를 이동할 수 있다.
import { useState } from 'react';
import { useRouter } from 'next/router';
export default function SearchForm() {
const [value, setValue] = useState();
const router = useRouter();
function handleChange(e) {
setValue(e.target.value);
}
function handleSubmit(e) {
e.preventDefault();
if (!value) {
return router.push('/');
}
return router.push(`/search?q=${value}`);
}
return (
<form onSubmit={handleSubmit}>
<input name="q" value={value} onChange={handleChange} />
<button>search</button>
</form>
);
}
Outro
Next.js는 이와 같이 프리렌더링, 최적화된 서버 호스팅, 파일 시스템 기반 라우팅 등의 기능을 통해 개발자들에게 큰 이점을 제공한다. 특히 Dynamic 라우팅은 다양한 URL을 효과적으로 관리할 수 있게 해주며, Link 컴포넌트와 useRouter Hook은 개발의 편의성을 높여준다.
Next.js의 이러한 라우팅 기능들을 효과적으로 활용하여, 더욱 가독성 있고 최적화된 개발을 이어나가보자.
참고 문서: https://nextjs.org/docs/app/building-your-application/routing
