[Next.js] 파일(폴더) 기반 라우팅

URL

URL Segment

/ 로 분류된 URL path의 한 부분을 의미

- http://some.com/dashboard/settings 에서 dashboard, settings 등!

URL path, Pathname

도메인 (~.com) 이후 따라오는 url 부분

File System based Routing

page.tsx는 path별 main ui가 표시될 곳

우리는 각 라우팅마다 page.tsx 파일을 만들게 될 것 -> 그럼 라우팅이 자동으로 만들어짐

static routing (정적 라우팅)

1) app 폴더에 test 폴더 생성

2) test 폴더에 page.tsx 생성

3) localhost:3000/test 로 들어가면 page.tsx의 내용이 렌더링되는 것을 확인할 수 있다!

-> 즉 폴더는 URL Segment를 담당한다

-> localhost:3000/test/a/b 경로를 만들고싶다면? test 폴더 > a 폴더 > b 폴더를 만들어주면 된다

주의사항! page.tsx는 꼭 export default 컴포넌트명 으로 export 해야 함

dynamic routing (동적 라우팅)

리액트에서는 /경로/:id 와같이 사용했다면 Next.js에서는 경로 폴더 > [id] 폴더를 만들면된다!

// app>test>[id]>page.tsx
import React from "react";

const TestDetailPage = ({
  params,
}: {
  params: {
    id: string;
  };
}) => {
  return <div>Detail 페이지 : {params.id}</div>;
};

export default TestDetailPage;

page.tsx가 id를 params로 받아 사용하게 해준다

폴더명의 [id] 와 params의 키를 맞춰줘야함

ex. post > [postId] 로 폴더를 생성했으면 params: { postId: number }

route groups

소괄호로 폴더 이름을 감싸면 그 폴더명은 URL segment로 분류되지 않는다

ex. (admin) 폴더 > about 폴더 > page.tsx 파일 인 경우 도메인/about 만 해주면 해당 페이지에 접근

목적! 단순 그룹화에도 사용할 수 있지만 특정 스코프(서브트리) 내에서만 적용되는 로딩 등의 ui를 적용하기 위한 목적이 큼

페이지 이동

Link

1) prefetching을 지원한다.

- 뷰포트에 링크가 나타나는 순간부터 해당 페이지의 코드와 데이터를 미리 받아옴

- 사용자가 링크를 클릭하기 전에 데이터를 미리 로드하여, 페이지 이동시 거의 즉시 페이지를 확인할 수 있게 함

2) Link 태그는 route 사이에 client-side navigation을 지원한다.

- 링크 태그는 브라우저가 새 페이지를 로드하기 위해 서버에 요청하는 대신 클라이언트 측에서 페이지를 바꿔주기 때문에 페이지 전환시 매우 빠른 UX를 제공

- 페이지의 HTML 을 서버에서 다시 가져올 필요 없이, 필요한 JSON 데이터만 서버로부터 가져와서 클라이언트에서 페이지를 재구성하여 렌더링 함

useRouter (Router)

! 주의사항: useRouter를 사용할 때는 항상 코드 최상단에 'use client'를 삽입해야 함

1) Link를 사용하지 못하는 경우에 사용하는 것이 좋다

- 크롤러가 a 태그를 알아차릴 수 없기 때문에 해당 요소가 이동을 원한다는 것을 알 수 없음 (SEO 불리)

2) 대부분 onclick 같은 이벤트 핸들러에서 사용

3) 클릭 후 로직의 순서에따라 실행하므로, 즉시 이동되지 않음

- 따라서 이동할 요소 클릭 > 특정 로직이 처리되고 > 이동해야할 때 사용할 수도 있다

"use client";

import { useRouter } from "next/navigation";

export default function Test () {
	const router = useRouter();
	
	const handleButtonClick = () => {
		로직1();
		로직2();
		
		...
		
		router.push("/new_location");
	}

	return <button onClick={handleButtonClick}>클릭!</button>
}

router.push

- 새로운 url을 히스토리 스택에 추가

- 사용자가 router.push로 페이지를 이동하면, 이동한 페이지의 url이 히스토리 스택의 맨 위에 쌓임

- 이후 사용자가 브라우저의 뒤로가기 버튼을 클릭하면 스택에서 가장 최근에 추가된 url로부터 이전 페이지로 돌아감

router.replace

- 현재 url을 히스토리 스택에서 새로운 url로 대체

- 현재 페이지의 url이 새로운 url로 교체되며, 뒤로가기를 클릭했을 때 이전 페이지로 이동하지만 교체된 페이지로는 이동할 수 없음

- 현재 페이지를 히스토리에서 완전히 대체

router.back

- 사용자를 히스토리 스택에서 한 단계 뒤로 이동시킴

- 브라우저의 뒤로가기 버튼을 클릭한 것과 같은 효과

- 사용자를 이전에 방문한 페이지로 돌아가게 함

router.reload

- 현재 페이지를 새로고침

- 히스토리 스택에 영향을 미치지 않음

- 페이지의 데이터를 최신 상태로 업데이트하고 싶을 때 사용할 수 있음

URL