#8 Next.js - Dynamic Routes(동적 라우트) / 현재 경로 가져오기 <Using App Router>

이번에는 폴더 이름을 동적으로 만들어주는 동적 라우트에 대해 간단히 알아보도록 하자. 0. Dynamic Routes(동적 라우트) Next.js는 폴더를 통해 라우팅을 한다.

그럼 예를 들어, SNS 웹사이트를 만든다고 했을 때 한 사람의 포스트에 들어갈 때마다 그 포스트 경로로 라우팅이 된다. 그럼 사람들이 포스트를 만들 때마다 폴더가 계속 생성되는 것일까?

그렇게 하면 무수한 폴더가 계속해서 생성될 것이다. 그럼 어떻게 이 문제를 해결할 수 있을까?

이는 동적 라우팅을 통해 해결할 수 있다. 폴더 이름을 []로 감싸면 폴더 이름이 하나로 지정되는 것이 아니라 동적으로 바뀐다.

이렇게 [username] 폴더를 만들면 어떤 경로로 들어가든 아래 page가 렌더링 된다. // [username] 폴더 하위 page.tsx "use client"; import { usePathname } from "next/navigation"; export default function Name(...