Next.js - 라우팅 개념

project/
├── app/
│   ├── about
│   │   └── page.tsx   "/about" 
│   ├── post
│   │   └── [slug]
│   │       └── page.tsx   "/post/:slug"
│   ├── page.tsx   도메인 루트 "/"
│   ├── layout.tsx

2. layout.tsx

중첩 레이아웃 시스템으로 상위 layout.tsx는 하위 페이지에서도 계속 유지된다.
/about/layout.tsx 같은 하위 경로용 레이아웃도 정의 가능하다.

3. 동적 라우팅

[slug]는 /post/next-js-route 같은 URL을 받아온다.
params.slug를 통해 접근 가능.

route	url	params
app/post/[slug]/page.tsx	/post/a	`{ slug : 'a' }`
app/post/[slug]/page.tsx	/post/b	`{ slug : 'b' }`
app/post/[slug]/page.tsx	/post/c	`{ slug : 'c' }`

4. 중첩 라우팅

중첩 구조를 통해 공통 UI를 쉽게 구성할 수 있다.

project/
├── app/
│   ├── dashboard
│   │   ├── layout.tsx
│   │   ├── page.tsx    "dashboard/layout.tsx + dashboard/page.tsx"
│   │   └── settings
│   │       └── page.tsx    "dashboard/layout.tsx + dashboard/settings/page.tsx"

Link 컴포넌트

Next.js에서 내부 페이지로 이동할 때 사용하는 클라이언트 사이드 라우팅 컴포넌트.

장점

페이지 전체 로드 없이 이동(SPA 방식)하며 history 관리(push/replace) 가능:
Link 컴포넌트는 페이지 이동을 위해 페이지를 새로고침하지 않고, 브라우저 히스토리 스택에 새로운 항목을 추가하여 이전 페이지로 돌아갈 수 있는 탐색 기능을 제공한다. 만약 Link 컴포넌트로 /about 페이지로 이동한다면 브라우저의 히스토리에 새로운 항목이 추가되고 이전 페이지로 돌아 갈 수 있다.
이는 사용자가 뒤로가기 버튼을 사용하여 이전 페이지로 돌아갈 수 있게 해주는 것이다.
검색 엔진 최적화(SEO):
Link 컴포넌트는 클라이언트 사이드 라우팅을 사용하면서도 검색 엔진 최적화에 유리하다.
이 컴포넌트는 표준 <a>로 렌더링되고 <a>는 javascript 실행 없이도 명시적인 링크 경로를 제공하므로 크롤러가 HTML만으로도 경로를 이해하며 쉽게 파악이 가능하다.
자동 prefetching으로 빠른 사용자 경험:
```
<Link href="/about">
    About
</Link>
```
이러한 코드가 있다고 한다면 Next.js는 브라우저의 뷰포트 안에 해당 컴포넌트가 들어왔을때 /about 페이지에 필요한 javascript 파일과 데이터를 백그라운드에서 미리 받아둔다. 사용자가 클릭하기 전 javascript 코드가 미리 로드되어 있으므로 거의 즉시에 가까운 부드러운 전환을 제공하여 사용자 경험 측면에 큰 도움을 준다.

props

href (필수)
이동할 경로 또는 URL을 지정한다.
replace (기본값 false)
history 스택에 새 URL을 추가하지 않고 현재 상태로 대체한다.
scroll (기본값 true)
페이지 이동 후 스크롤을 상단으로 조정한다.
prefetch (기본값 true)
백그라운드에서 연결된 경로의 데이터를 미리 불러와 로드하여 사용자 경험을 향상 시킨다. prefetch는 프로덕션 환경에서만 활성화된다.

locale
페이지를 이동할 때 사용할 언어를 지정한다. 생략하면 현재 사용 중인 locale을 그대로 사용.

<Link href="/about" locale="en">
    영어 about 페이지
</Link>

<Link href="/about" locale="ko">
    한국어 about 페이지
</Link>

onNavigate (15.3.0 버전 이상부터 추가됨)
Link 컴포넌트에서 네비게이션이 실제로 발생할 때 호출되는 콜백 함수이다.
```
<Link 
    href="/about" 
    onNavigate={() => {
        console.log("네비게이션 시작");
    }}
>
    about
</Link>
```
onClick과 차이점은 네비게이션이 실제 발생하지 않아도 onClick 이벤트는 실행되고, onNavigate는 네비게이션이 확실히 발생할 때만 호출된다. 또한 onNavigate는 외부 URL에는 트리거되지 않으며 download 속성이 있는 링크에서도 실행되지 않는다.
정확한 로딩 상태 관리와 같은 사용자 경험 항샹, 혹은 onClick과 조합하여 클릭 이벤트에서 실행된 로직을 네비게이션 발생 후 정리(clean up)하는 식으로 사용할 수 도 있다.

useRouter

useRouter 훅은 클라이언트 컴포넌트에서 현재 라우팅 정보와 라우팅 기능을 제공하는 도구이다.
Next.js 13 이상 버전에서는 next/navigation 에서 가져온다.

push

import { useRouter } from "next/navigation";

const router = useRouter();

const handleClick = () => {
    router.push('/');
};

클라이언트 라우팅을 실행한다.
Link 컴포넌트를 쓰지 않고도 페이지를 이동할 수 있다.
history 스택에 추가된다.(뒤로 가기 가능)

replace

router.replace('/login');

history 스택에 추가하지 않고 덮어쓴다.(뒤로 가기 불가능)
로그인 후 리디렉션 등에 자주 사용한다.

refresh

router.refresh();

현재 페이지를 새로고침한다.
useQuery 등 데이터가 갱신된다.(예: 폼 제출 후 최신 데이터 갱신)

forward & back

router.forward();
router.back();

브라우저 history 앞/뒤로 이동한다.

usePathname & useSearchParams

현재 URL의 경로명과 query string을 읽을 수 있게 해주는 클라이언트 컴포넌트 훅이다.
useRouter와 마찬가지로 next/navigation 에서 가져온다.

import { usePathname, useSearchParams } from 'next/navigation';

const pathname = usePathname(); // "/post/next-js-route"
const searchParams = useSearchParams(); // URLSearchParams 객체

usePathname 예시

URL	return
/	'/'
/post?id=1	'/post'
/post/next-js-route	'post/next-js-route

useSearchParams 예시

URLSearchParams.get(): 검색 파라미터와 연결된 첫 번째 값을 반환

URL	searchParams.get("id")
/post?id=1	'1'
/post?id=	'1'
/post?name=jm	null
/post?id=1&id=2	'1' (모든 값을 가져오려면 getAll() 사용)

URLSearchParams.has(): 주어진 파라미터의 존재 여부 반환

URL	searchParams.has("id")
/post?id=1	true
/post?id=	false

이전 포스트React - 리액트에서 컴포넌트란

다음 포스트NPM에 직접 만든 라이브러리를 배포해보자.(TypeScript, CJS & ESM)

Next.js - 라우팅 개념