Next.js 라우팅

*️⃣ Routing

App router 방식은 파일시스템 베이스 방식으로 라우팅이 작동된다.

즉, 폴더와 파일로 라우팅을 구성하는 것이다.

기본적인 Next.js의 Routing Conventions(관례)이 있다.

• 모든 라우팅은 app 폴더 안에 있어야 한다.
• 라우팅이 매치되는 파일이름은 page.js(pages.tsx) 등 "page"라는 이름이어야 한다.
• 폴더 이름이 브라우저에서 보이는 URL의 path가 된다.

 

*️⃣ 주소의 최상단 페이지

가장 처음 접하는 주소는 바로 '/'이다.

Next.js에서는 app 폴더 바로 밑에 있는 page.tsx 파일이 '/' 주소에 해당한다.

'src/app/page.js'

여기서 app 폴더 바로 밑에 있는 page.js는 바로 브라우저의 최상위 주소인 '/'가 된다.

레이아웃 파일은 레이아웃 라우팅이라고도 한다.

app 폴더 바로 밑에 있는 layout.tsx 파일 안에 있는 걸 RootLayout이라고 하며, html의 기본 구조를 제공해 준다.

이 RootLayout이 있기 때문에 앞으로 라우팅 주소의 page.tsx 파일을 만들 때 따로 html 코드를 작성하지 않아도 된다.

 

 

---

 

*️⃣ Nested Routes(중첩 라우팅)

중첩 라우팅이란 표현은 라우팅 주소 밑에 또 다른 주소가 연이어 나오는 걸 얘기한다.

아래의 경우 'web' 주소 밑에 'first', 'second' 주소가 중첩되어 있다.

localhost:3000/web
localhost:3000/web/first
localhost:3000/web/second

 

중첩 라우팅은 각각의 폴더에 page.tsx파일을 만들어주면 된다.

web/
├── first/
│   └── page.jsx
├── second/
│   └── page.jsx
└── index.jsx

 

 

---

 

*️⃣ Dynamic Routes(다이나믹 라우팅)

다이나믹 라우팅(dynamic routing)은 Next.js에서 특정 경로에 대한 라우팅을 동적으로 처리하는 기능을 말한다. 이는 페이지의 경로가 동적으로 변할 수 있고, 사용자 입력 또는 데이터베이스의 데이터에 따라 경로를 생성하는 데 사용된다.

다이나믹 라우팅을 구현하기 위해서는 pages 디렉토리 내에 대괄호([])로 감싼 파일을 생성한다. 이렇게 생성된 파일은 동적인 경로에 대응된다. 이 디렉토리와 파일의 이름은 URL 경로에 사용된다.

예를 들어, pages/posts/[id].js 파일을 생성하면, 해당 파일은 /posts/:id와 같이 동적인 경로에 대응된다. 여기서 :id는 어떠한 값이라도 될 수 있음을 나타낸다.

이렇게 생성된 파일에서는 useRouter 훅을 사용하여 동적으로 전달된 매개변수에 접근할 수 있다.

다음은 다이나믹 라우팅을 사용한 예시이다.

// pages/posts/[id].js

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
};

export default Post;

 

위의 코드에서 router.query.id는 현재 라우트에 동적으로 전달된 id 매개변수에 접근한다.

 

 

---

 

*️⃣ Route Groups

라우트 그룹은 여러 경로를 하나의 그룹으로 묶어서 관리하거나 설정할 수 있는 기능을 의미한다. 예를 들어 로그인 전과, 후를 분리하고 싶으면 폴더 이름을 (afterLogin), (beforeLogin)으로 작성하면 된다.

괄호로 덮인 폴더는 주소로 인식하지 않고 단순히 그룹화하는 방식으로만 작동된다.

 

*️⃣ Private Folders

Next.js에서 app 폴더 밑에 폴더를 두고 page.tsx 파일을 작성하면 그게 라우팅 주소가 된다.

만약 app 폴더 밑에 있는 폴더가 '_'로 시작하면 그 폴더는 라우팅에서 제외된다.

그래서 app 폴더 밑에 '_lib' 폴더를 만들고 유틸리티 라이브러리 같은 헬퍼 유틸을 모아두면 아주 쉽다.

'_lib' 폴더 밑에 page.tsx 파일을 작성해도 이 파일은 주소창에서 절대 볼 수 없다.

 

 

---

 

*️⃣ Parallel Routes

• 슬롯을 통해 동일한 라우트에서 여러 페이지를 동시에 또는 조건부로 렌더링할 수 있는 기능이다.
• pages 디렉토리 구조가 아닌 app 디렉토리 하위에 작성된 코드에서만 사용할 수 있다.

슬롯은 @folder 폴더를 선언해서 만들수 있다.

 

 

*️⃣ Intercepting Routes

hard navigation

• 전통적인 웹 애플리케이션에서 사용되는 일반적인 페이지 이동 방식이다. 사용자가 링크를 클릭하거나 URL을 직접 입력하여 페이지를 이동할 때 발생한다. hard navigation은 새로운 페이지를 요청하고 서버에서 콘텐츠를 받아와 렌더링한다.

soft navigation

• Next.js의 클라이언트 사이드 라우팅 기능을 사용하여 페이지를 이동하는 방식으로, next/link나 next/router를 사용하여 페이지 간의 이동을 처리한다. 사용자가 링크를 클릭하거나 프로그래밍 방식으로 페이지를 변경할 때 발생한다.
• 페이지 간의 변화를 빠르게 처리하고 새로운 페이지를 렌더링하는 동안 페이지의 상태를 유지

interception routes는 (..) 과 같은 표기를 통해서 생성할 수 있다.