동적 라우팅

Next.js에서 동적으로 라우팅 하는 방법은 아주 간단하다. 그건 폴더에 바로 대괄호([])를 사용해주면 된다.

예시 사진

이전 12 버전에서는 파일에 []를 사용해서 [detail].js 이런식으로 사용했다. 그러나 버전이 13버전으로 넘어오면서 파일 라우팅 개념이 아닌 폴더 라우팅 개념으로 바뀌었기 때문에 폴더에 []를 해준다.

결과

1. localhost:3000/news/1
   

2. localhost:3000/news/2
   

결과를 보면 news 폴더 안에 있는 newsId 폴더에 라우팅이 되어 다른 URL주어도 라우팅이 되는 걸 볼 수 있다.

usePathname

공식 홈페이지 : https://nextjs.org/docs/app/api-reference/functions/use-pathname

이전 12 버전에서는 사용자 요청에 따른 query값을 가져오기 위해서는 useRouter를 사용했다. 그러나 13버전에 들어와서는 usePathname 이라는 훅 함수를 사용한다.

예시

'use client'

import { usePathname } from "next/navigation"

export default function Detail() {
    const path = usePathname();
    console.log(path);

    return (
      <h1>News Detail Page</h1>
    )
  }

12 버전과 다르게 코드에서 해야 할 것이 2가지가 있다. 우선 첫 번째는 가장 처음에 'use client'를 꼭 입력해야 한다.

use client를 입력하는 이유

Next js는 서버 사이드 렌더링을 지원하는 프레임워크다. 그래서 클라이언트 사이드 랜더링을 하기 위해서 use client를 입력하여 컴포넌트처럼 사용할 수 있게 한다.

그리고 next/navigation 에서 usePathname 훅 함수를 import하면 사용자의 요청 url을 가져올 수 있다. (위의 이미지에서 콘솔 부분을 보면 알 수 있다.)

정리하기

이번에는 Next.js에서 동적으로 라우팅하는 방법과 usePathname을 사용하는 방법을 배웠다. 확실히 React만 사용할 때보다 매우 편하게 홈페이지를 제작할 수 있다.

일단은 프로젝트에 맞춰가기 위한 준비이기 때문에 계속해서 공부하고 기록하고 있지 않기 위해 노력해야겠다.