@modal/(i) 로 생성/파일이동 후, 무한 GET 출력
148
작성한 질문수 2
강의의 3분 정도 쯤에,
(beforeLogin)/i 폴더와 파일들을 (beforeLogin)/@modal/(i) 로 복사 한 후
http://localhost:3000/i/flow/login 접속시 무한 GET 접속 시도가 터미널 창에 보입니다.
이때, <Link href="login" className={styles.login}>로그인</Link> 입니다.
그런데, <Link href="/i/flow/login" className={styles.login}>로그인</Link> 변경하면,
http://localhost:3000/i/flow/login 접속시, 터미널 창에서는 무한 GET 접속시도는 사라집니다.
어떻게 해서 이렇게 되는지요?
답변 2
0
일단 지금은 인터셉팅 라우트를 발생시키려고 하고 있는 상황입니다. 인터셉팅 라우트는 클라이언트 라우팅에서만 발생합니다. Link는 클라이언트 라우팅이라서 /i/flow/login으로 가면 @modal/(.)i/flow/login이 제대로 인터셉팅 됩니다.
redirect('/i/flow/login')은 서버사이드에서 리다이렉트 하는 것이라 인터셉팅 용도로는 호출되면 안 됩니다. i/flow/login/page.tsx가 렌더링되게 되는데(2분 49초 상황), 추가로 무한 GET 요청이 발생하는 것은 지금 경로도 꼬여있는 상황이라 넥스트가 파일 디렉토리를 잘못 캐싱하고 있는 상황이라 무한 리다이렉트가 발생한 상황으로 보입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 강진모님께서 겪으신 무한 GET 요청 문제는 Next.js의 라우팅 관련 설정에서 발생할 수 있는 일반적인 현상입니다. 이와 관련된 유사한 문제와 해결 방법을 설명드리겠습니다.
무한 GET 요청의 원인
상대 경로와 절대 경로의 차이:
<Link href="login">과 같이 상대 경로로 설정했을 경우, Next.js에서 경로를 잘못 해석하여 무한 루프에 빠질 수 있습니다. 이는 특정 경로를 찾지 못하거나 잘못된 경로로 인식할 수 있기 때문입니다.
<Link href="/i/flow/login">처럼 절대 경로를 사용하면 정확한 위치로 링크가 설정되기 때문에 이러한 문제가 발생하지 않습니다.
인터셉팅 라우트의 잘못된 설정:
- 인터셉팅 라우트 기능을 사용하면서 파일의 위치나 구조가 변경될 경우, 라우트 경로가 수정되어야 한다는 점을 간과할 수 있습니다. 이는 잘못된 설정으로 인해 라우트가 다른 페이지로 무한히 리디렉션 되는 상황을 초래할 수 있습니다.
- 인터셉팅 라우트 기능을 사용하면서 파일의 위치나 구조가 변경될 경우, 라우트 경로가 수정되어야 한다는 점을 간과할 수 있습니다. 이는 잘못된 설정으로 인해 라우트가 다른 페이지로 무한히 리디렉션 되는 상황을 초래할 수 있습니다.
해결 방법
- 경로 설정을 항상 절대 경로로 명시적으로 지정하는 것이 좋습니다. 이는 경로를 더 명확하게 하고 예상치 못한 동작을 방지하는 데 도움이 됩니다.
- Next.js의 공식 문서를 참조하여 라우팅 설정과 관련된 올바른 방법을 숙지하는 것이 좋습니다.
같은 문제를 겪고 있는 유사한 게시물에서 관련된 토론을 확인할 수 있습니다. 실제 사용자들의 경험과 해결 방법을 통해 문제를 이해하는 데 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
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
132
2
next.js 에서 로그인에 관하여
0
139
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2