인터셉팅 라우팅 폴더 위치 경로 지정 관련 질문
165
작성한 질문수 10
우선 인터셉팅 라우팅을 버튼, 링크 등을 통해 이동 시 인터셉트된 page를 렌더링하고 새로고침이나 주소창을 통해 이동했을 때 정상(?)적인 page를 렌더링하는 것으로 이해했습니다.
인터셉팅 라우팅 폴더를 만들어야 할 위치가 궁금해서 /test1/test2 에서 Link태그를 통해 /test1 으로 이동할 때 새로고침 시 표시 되는 test1과 intercepted test1을 구분하는 코드를 작성했습니다 "(.)test1" 폴더 위치를 바꿔보면서 어떻게 동작하는 지 확인해보는 과정에서 이해가 되지 않는 부분이 있어서 질문드립니다.
이 폴더구조로 해야 작동하고,
이 폴더 구조는 작동이 안되는게 이해가 안됩니다.
뭔가 (.), (..), (..)(..) 이런식으로 경로 지정이 가능하면 인터셉팅 라우팅 폴더는 어디 있든 상관없어도 될 것 같았는데... 아래 폴더구조가 작동을 안되니 디게 혼란스럽네요 ㅠㅠ
답변 2
0
안녕하세요, 인프런 AI 인턴입니다. 섬세한 햄스터님.
인터셉팅 라우팅의 동작 방식과 폴더 구조에 대해 궁금하신 점을 문의해주셨네요. Next.js의 인터셉팅 라우팅 관련 설정은 특정한 폴더 및 파일 구조에 의존하게 됩니다. 이와 관련된 몇 가지 주요 사항을 설명드리겠습니다:
폴더 구조 및 위치: 인터셉팅 라우팅은 특정한 구조에 따라 정의되며, 이는 특정 위계 구조 내에서만 제대로 작동합니다. 폴더 이름에 “(.)“를 사용하는 경우, 해당 폴더는 그 안에 있는 페이지가 아닌 부모 경로와 연결됩니다. 따라서 위치에 따라 동작이 다를 수 있습니다.
특별한 폴더 명 명명 규칙: Next.js에서는 경로 설정 시 괄호
()로 묶인 폴더를 “그룹화” 목적으로 사용합니다. “(.)“로 명명된 폴더는 해당 폴더가 페이지 루트에 있는 것이 아니라 인터셉터 라우트를 설정하기 위한 용도로 사용되며, 페이지 상에서의 경로를 직접 나타내지 않습니다.경로 규칙 이해하기: 인터셉트 라우팅이 정확히 어디에서 작동해야 하는지를 이해하는 것은 복잡할 수 있지만, 주로 “(.)“가 경로의 어떤 위치에 있어야 맞는지를 확인하는 것으로 시작할 수 있습니다. 올바른 폴더 구조가 없으면 라우팅이 예상대로 작동하지 않을 수 있습니다.
비슷한 질문과 상황에 대한 유용한 답변들을 아래 링크에서 확인해 보실 수 있습니다:
이 답변들이 Next.js의 라우팅 및 파일 구조 설정에 대한 이해를 돕는 데 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
74
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
109
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
171
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
108
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
97
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
229
2
fetch 캐싱과 revalidate 관련
0
84
2