URL의 구조와 next.js의 navigation 및 동적 라우팅

웹페이지의 이동간에 URL에는 많은 정보를 담아둘 수 있다.

path와 query를 활용하면 여러가지 정보를 URL에 담아 특정 페이지 렌더링에 사용하거나 API 요청에도 활용할 수 있다.

기본 URL의 구조는 다음과 같다.

• 프로토콜 : 브라우저가 리소스 요청에 사용하는 프로토콜을 명시. (HTTP, HTTPS, FTP 등)
• 도메인 : 요청할 웹서버의 도메인
• 포트번호 : 웹 서버 리소스 접근에 필요한 게이트인 포트번호
• 패스(path) : 웹서버에 있는 리소스의 경로를 표시
• 파라미터(query string) : 웹 서버에 추가적으로 제공하는 매개변수(파라미터). 이하 쿼리로 작성
• 프래그먼트(앵커) : 리소스 내부의 일정 요소를 표시

 

패스와 쿼리의 차이

• 패스(path) : 웹서버 특정 리소스의 위치를 지정하는데 사용된다. 페이지의 위치를 명확히 표현하여 서버에 요청하는 용도이다. 명시적인 내용들을 작성해두면 SEO(검색엔진최적화)에도 도움이 될 수 있다.
• 쿼리(query) : URL 파라미터 라고 하면 보통 이 쿼리를 의미한다. ?뒤에 작성하며 &로 구분한다. 하나의 용례로는 필터기능이 있다. url~~?color=red&language=ko 로 작성하면 { color : "red", language : "ko" } 의 객체형태로 이용할 수 있다.

 

 

 

next.js에서의 URL 활용

React를 기반으로 한 Next.js 에서는 URL에 담긴 여러가지 정보를 다양한 방법으로 활용할 수 있다. path부분에도 변수를 사용할 수 있고 query 부분에도 변수를 사용할수 있는데 아래 글에서는 두가지를 패스 변수, 쿼리 변수로 한다.

 

1. props (Dynamic routes) (App routes 기준)

아래 URL에 담긴 정보는 192384와 color=red&language=ko 가 있다.

localhost:3000/detail/192384?color=red&language=ko

 

Next.js 에서는 Dynamic routes 기능을 제공한다. app 디렉토리에 아래와 같이 폴더와 파일을 생성하면 자동으로 /detail 페이지의 라우팅이 되며 detailNum부분에 대한 동적 라우팅도 제공한다.

 

page.js의 export default된 컴포넌트는 props로 192384와 color=red&language=ko를 모두 가지고 있다.

• props : { params : { detailNum : '192384' }, searchParams : { color: 'red', language: 'ko' } }
• props.params.detailNum : 192384
• props.searchParams.color : red

기본 props를 활용하면 객체를 이용할때와 같은 방식으로 URL의 정보들을 활용할 수 있다.

 

2. navigation (Next.js 13 이후)

기존의 라우팅 기능을 제공한 next/router 모듈을 개선하여 Next.js 13버전부터는 next/navigation을 사용하고 있다.

페이지 전환 같은 사용자 경험 상승과 성능 최적화가 된 모듈이다.

 

navigation모듈에서 URL의 정보를 가져오려면 클라이언트 컴포넌트를 사용해야하므로 문서 상단에 'use client를 작성한다.

localhost:3000/detail/192384?color=red&language=ko

위와 동일한 예시의 URL에서 아래 코드를 실행한다.

'use client'

import { usePathname, useParams, useSearchParams } from "next/navigation";

export default function Detail(props) {
    const pathName = usePathname();
    const params = useParams();
    const searchParams = useSearchParams();

    console.log("pathname = ", pathName);
    console.log("params = ", params);
    console.log("searchParams = ", searchParams);
    console.log("searchParamsGet = ", searchParams.get("language"));
    
    return ();
}

usePathname, useParams, useSearchParams는 아래와같이 출력된다.

• usePathname : 현재 경로의 path를 그대로 출력한다.
• useParams : 위 항목 props의 params와 동일한 값을 가지고있다. 경로명의 대괄호로 받아오는 Dynamic routes 값을 이용할 수 있다.
• useSearchParams.get("language") : 쿼리를 이용할 수 있다. URL에 작성되어있는 쿼리에서 원하는 키값을 넣어주면 키에 대응하는 값(value)을 이용할 수 있다.