[Next.js] Nextjs의 Route(라우팅 시스템)

 

개요

Nextjs의 routes를 이해하기 위해선 HTTP URL의 기본 구조에 대해 알아야 하기에 잠깐 확인해보고 가도록 하자.

 

 

URL의 구조는 schema://domain:port/path/parameters#anchor 를 갖는다.
⇒ (ex) https://devleoper.mozilla.org/ko/docs/search?q=URL 이라는 주소가 있을 때,

”/ko/docs/search”가 path 가 되고, ? 기호 뒤로부터 이루어진 “q=URL”는 search parameter 가 된다.

 

 

 

Routes (라우팅 시스템)

How to route in Next.js

Nextjs의 route는 심플하다. Nextjs에서는 라우팅 URL은 app 디렉토리 하위 구조의 폴더명에 따른다.

//Example
root directory
  └ app
     └ a
        └ page.tsx
     └ b
        └ page.tsx
     └ c
        └ page.tsx
     └ ...
  └ components
  └ ... 

 

만약 디렉토리 구조가 위의 에시와 같다면, ‘a컴포넌트’ 의 라우팅URL의 주소는 “localhost:3000/a” 가 된다.

 

이때 중요한 점은 “/app/a” 디렉토리 하위에 page.tsx를 Next.js의 프레임워크가 자동으로 라우팅 한다는 것이다. 🤠✨

물론 일반적인 React의 컴포넌트처럼 생성하여 사용해도 되지만, Nextjs에서는 디렉토리 경로 하위에 page.tsx(또는jsx)가 있다면 프레임워크가 해당 화면을 자동으로 찾아 렌더링한다는 흥미로운 점이다.

 

 

Routes group

route groups는 폴더이름을 괄호기호 () 를 통해 묶어 사용한다.

이렇게 괄호를 사용하여 route groups으로 묶으면 URL 생성에 영향을 끼치지 않는다. routes를 괄호로 묶으면 Nextjs의 프레임워크는 괄호를 무시하고 URL을 생성하지 않는다.

 

 

예를 들어, 파일이 많이 생성되어서 폴더링 하여 정리하고싶지만 라우팅 되는 URL에는 영향을 미치게 하고 싶지 않을 때 이렇게 사용해보자.

//Example
root directory
  └ app
     └ a
        └ page.tsx
     └ b
        └ page.tsx
     └ (hidden)
        └ hidden1.tsx
     └ ...
  └ ... 

 

Dynamic Routes(동적라우팅)

 

일반적인 변수를 넘기지 않는 URL 접근방식인 static(정적) route라우팅과 id 또는 parameter를 전달하여 /movie/{id}와 같은 URL로 접근하는 dynamic(동적) route 방식이 있다.

 

그렇다면 Next.js에서는 동적라우팅을 어떻게 할 수 있을까?🧐

 

 

root directory
  └ ...
  └ movie         // '/movie'라는 routing url 생성
     └ [id]       // 대괄호로 묶은 id라는 dir생성
  └ ...           // => '/movie/{id}'의 형태로 라우팅 가능

 

동적 라우팅을 통해 받을 파라미터의 이름을 대괄호[]로 둘러싼 디렉토리를 생성한다. 이렇게 생성된 대괄호 폴더 하위에 존재하는 page.tsx 내에서 props로 넘어오는 값을 확인할 수 있다.

 

 

 

props로 전달되는 객체에는 params 와 searchParams 두가지 객체를 담겨져 오게 된다. 이때 params 는 URL path를 통해서, searchParams 는 URL parameter를 통해서 전달되므로 개인의 상황에 맞게 입력값을 제어하여 사용해보자!

 

 

 

---

 

 

 

참조문서

* Nextjs 공식문서 - Metadata
* MDN 공식문서 - URL이란