Next.js
Link와 동적 경로로 페이지 연결하기
Link로 경로를 연결하고 대괄호 폴더로 주소의 가변 부분을 표현합니다.
이럴 때 필요해요
목록에서 좌석이나 공연별 상세 페이지로 이동하는 구조를 익힙니다.
어떻게 동작하나요?
next/link의 Link는 앱 안의 페이지를 연결합니다. href에 이동할 경로를 적습니다. 공연 목록의 카드마다 상세 주소를 만들 수 있습니다.
app/concerts/[id]/page.tsx의 [id]는 달라질 수 있는 경로 조각입니다. /concerts/jazz로 들어오면 id가 jazz입니다. Next.js 16에서 페이지의 params는 Promise이므로 await로 읽습니다.
주소에 값이 있다고 해당 공연이 실제로 존재하거나 사용자가 접근할 권한이 있다는 뜻은 아닙니다. 데이터를 찾고 없는 경우를 처리하는 것은 별도 책임입니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
// app/concerts/[id]/page.tsx
import Link from "next/link";
export default async function Concert({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
return <><h1>공연: {id}</h1><Link href="/concerts">목록으로</Link></>;
}jazz 경로에서는 공연: jazz를 표시합니다. 실제 공연 데이터 검사는 포함하지 않습니다.
자주 헷갈리는 포인트
- 동적 주소와 데이터의 실제 존재 여부는 다릅니다.
- 이 예제는 Next.js 16 App Router의 params 형태를 사용합니다.
내 말로 설명해 보기
[id] 폴더 이름에 jazz를 고정해 적어야 할까요?
생각할 단서 대괄호 폴더의 이름과 실제 주소에서 달라지는 부분을 비교해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- Link로 경로를 연결하고 대괄호 폴더로 주소의 가변 부분을 표현합니다.
- jazz 경로에서는 공연: jazz를 표시합니다. 실제 공연 데이터 검사는 포함하지 않습니다.
예시 답변
아닙니다. [id]가 가변 경로를 받으며 실제 주소에 따라 params의 id를 읽습니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.