Next.js Git Blog (2): 라우팅 구현

소개#

라우팅 방식에 대해 살펴보고자 하는데, 크게 어렵진 않았다. 먼저 Next.js에서 라우팅을 하는 방식으로 아래 두 가지를 확인할 수 있는데

• App Router (새로운 방식, 디렉토리 기반)
• Pages Router (기존 방식, 파일 기반)

블로그는 정적 파일을 보여주는 방식으로도 충분해서 파일 기반의 Pages Router가 더 적절하다고 한다.

Pages Router#

Pages Router를 사용하는 경우, src/pages 디렉터리 내부의 파일 구조가 곧 URL 경로가 된다. 아래와 같이 스크립트 파일을 생성하면 별도의 설정 없이 자동으로 라우팅 경로로 인식된다.

root
└── src
    └── pages
        ├── _app.tsx
        ├── _document.tsx
        ├── index.tsx       # localhost:3001
        ├── home.tsx        # localhost:3001/home
        └── docs
            ├── doc-1.tsx   # localhost:3001/docs/doc-1
            ├── doc-2.tsx   # localhost:3001/docs/doc-2
            └── index.tsx   # localhost:3001/docs

가령 src/pages/docs/doc-1.tsx 파일의 내용이 아래와 같다고 가정하자.

export default function Doc1() {
	return <div>this is document 1</div>;
}

직접 URL 경로로 접근한다면, 아래와 같이 파일 내용이 정상적으로 나타나는 것을 볼 수 있다. 이는 별도의 라우팅 설정 없이 파일 경로만으로 페이지가 매핑되었음을 의미한다:

그림 1. 라우팅이 정상적으로 적용된 모습

페이지 이동#

페이지 간 이동은 <a> 태그를 사용할 수도 있지만, 이는 새로고침을 발생시켜 사용자 경험을 떨어트린다. 그래서 Next.js에서는 클라이언트 사이드 네비게이션을 지원하는 Link 컴포넌트 사용을 권장한다.

import Link from 'next/link';
 
export default function Doc1() {
	return (
		<div>
			<span>this is document 1</span>
			{/* 전체 페이지 새로고침 발생 */}
			<a href='/home'>link1</a>
 
			{/* 새로고침 없이 페이지 전환 */}
			<Link href='/home'>link2</Link>
		</div>
	);
}

Link 컴포넌트를 사용하면 페이지 전체를 다시 로드하지 않고, 필요한 부분만 전환되어 더 좋은 사용자 경험을 제공할 수 있다.

마무리#

페이지 간 이동은 가능해졌지만, 현재 구조에서는 글 내용을 스크립트 파일(.tsx) 내부에 직접 작성해야 한다. 이 방식은 페이지마다 유사한 코드가 반복되는 문제를 만들 수 있다.
다음 글에서는 이를 방지하기 위해, 내용을 markdown 파일로 작성하고 스크립트에서 불러와 사용하는 방식에 대해 살펴보도록 하겠다.