[Next.js] 인터셉팅 라우트(Intercepting Route)

SUN·2025년 1월 12일
0

Next.js - app router

목록 보기
17/21

1. 개요

특정 조건일 때 원래 페이지가 아닌 다른 페이지를 랜더링하게 설정하는 기술

사용자가 특정 경로로 접속해 새로운 페이지를 요청할때 페이지를 가로채서 다른 페이지를 대신 랜더링한다.

초기접속요청이 아닐때만 인터셉팅이 된다.
즉, 사용자가 초기 접속이 아닌 클라이언트 방식(link, router push)으로 접근했을 때만 인터셉팅 라우트가 동작

예를 들어 인스타그램에서 피드를 클릭하면 상세 피드가 나오고 뒤로 가기를 하면 다시 피드화면이 나오게 된다. 그리고 상세피드에서 새로고침(클라이언트 방식으로 접근)을 하면 완전히 이동하게 된다.

2. 사용법

1) 세팅

  1. 가로챌 폴더와 똑같은 이름의 폴더를 만들고 앞에 (.)또는 (..)을 붙여준다. ex) (.)book/[id]
    • 점이 하나라면 상대경로로 동일한 경로 상에 있다는 것을 알려준다. (.)
    • 인터셉팅하려는 경로가 한뎁스 더 있다면 점을 두개 붙여주면 상위 경로의 폴더를 인터셉팅한다는 뜻이다. (..)
    • 두 단계 위에 있다면 두번 적어준다. (..)(..)
    • 점이 세개라면 app폴더 바로 밑의 폴더를 인터셉팅한다는 뜻이다. (...)
  2. 만든 폴더 내 page.tsx를 만들어준다.
  3. 그러면 해당 페이지는 인터셉팅이 된다.
  4. 인터셉팅할 페이지에 원래 랜더링 될 페이지를 import 해주면 같은 내용으로 랜더링된다.
    이때 모달창으로 뜨게 하던지 다른 방식으로 나타나게 활용할 수 있다.
profile
안녕하세요!

0개의 댓글