📌 레이아웃 및 페이지 만들기

중첩된 라우팅

Next.js는 폴더가 중첩된 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용합니다 . 각 폴더는 URL 세그먼트 에 매핑되는 경로 세그먼트를 나타냅니다 .

대시보드 페이지 만들기

더 많은 경로를 만드는 연습을 해 보겠습니다. 
대시보드에서 페이지를 두 개 더 만듭니다:

고객 페이지: 이 페이지는 http://localhost:3000/dashboard/customers 에서 
액세스할 수 있어야 합니다. 
지금은 <p>고객 페이지</p> 요소를 반환해야 합니다.

인보이스 페이지: 인보이스 페이지는 http://localhost:3000/dashboard/invoices 에서 
액세스할 수 있어야 합니다. 
지금은 <p>인보이스 페이지</p> 요소도 반환해야 합니다.

📌 페이지 간 탐색

자동 코드 분할 및 prefetching

탐색 환경을 개선하기 위해 Next.js는 경로 세그먼트별로 애플리케이션을 자동으로 코드 분할합니다. 이는 브라우저가 초기 로드 시 모든 애플리케이션 코드를 로드하는 기존 React SPA와는 다릅니다.

경로별로 코드를 분할한다는 것은 페이지가 격리된다는 것을 의미합니다. 특정 페이지에서 오류가 발생해도 나머지 애플리케이션은 계속 작동합니다.

또한 프로덕션 환경에서 <링크> 컴포넌트가 브라우저의 뷰포트에 표시될 때마다 Next.js는 백그라운드에서 링크된 경로에 대한 코드를 자동으로 프리페치합니다. 사용자가 링크를 클릭할 때쯤이면 대상 페이지의 코드가 이미 백그라운드에서 로드되어 있으므로 페이지 전환이 거의 즉각적으로 이루어집니다!

프로덕션 환경에서 브라우저의 뷰포트에 <링크> 컴포넌트가 나타나면 Next.js가 수행하는 작업은 무엇인가요?

✅ 연결된 경로의 코드를 미리 가져옵니다.

Next.js는 링크된 경로의 코드를 백그라운드에서 자동으로 프리페치합니다. 사용자가 링크를 클릭할 때쯤이면 대상 페이지의 코드가 이미 백그라운드에서 로드되어 있으므로 페이지 전환이 거의 즉각적으로 이루어집니다!

📌 패턴: 활성 링크 표시

일반적인 UI 패턴은 활성 링크를 표시하여 사용자가 현재 어떤 페이지에 있는지 알려주는 것입니다. 이렇게 하려면 URL에서 사용자의 현재 경로를 가져와야 합니다. Next.js는 경로를 확인하고 이 패턴을 구현하는 데 사용할 수 있는 usePathname()이라는 훅을 제공합니다.

usePathname()은 훅이므로 nav-links.tsx를 클라이언트 컴포넌트로 전환해야 합니다. 파일 맨 위에 React의 "use client" 지시문을 추가한 다음, next/navigation에서 usePathname()을 가져옵니다