[Next.js] Next.js app router error page 무한 새로고침 에러

 
next에 app router가 추가되었다!
기존의 page router도 사용가능 하지만 app router로 정의한 부분이 먼저 우선 적용된다고하기도 하고,
새 프로젝트를 개발하게되어 공식문서 따라하다가 오류난 부분이 있어서 정리해본다.
 
app폴더 하위에 not-found.tsx 파일을 생성했는데 (404페이지인 경우 렌더링됨)
파일은 제대로 나오는데 무한 새로고침의 굴레에 빠졌음..

 

사실 이전 프로젝트할때도 이런 증상이 있긴 했었다... 고질적인 문젠가

개발환경에서만 그렇고 배포되면 별 문제 없길래 그냥 넘어갔었는데
이번엔 검색하다 이틀전에 올라온 해결방법을 찾아서 정리해둠!
 
 
 
추가한 폴더, 파일은 아래 이미지 참고 🤓

 

next 버전 : 13.4.6 

 
1. app폴더 하위에 [...not_found] 라는 폴더를 만듬
2. 위에서 만든 폴더 안에 page.tsx 혹은 page.jsx 파일을 만들어 아래 코드를 넣어준다.

// [...not_found].page.tsx
import { notFound } from "next/navigation";
const NotFoundCatchAll = () => notFound();
export default NotFoundCatchAll;

 

3. app폴더 하위의 not-found.tsx 혹은 not-found.jsx 파일에 아래 코드를 넣어준다.
    (404페이지에 보여줄 화면 코딩해서 넣어면 됨!)

// app/not-found.tsx  or app/not-found.jsx 
export default function NotFound({}: Props) {
  return (
    <div>NotFound</div>
  );
}

 

 

이렇게 되면 무한로딩 없어지고 제대로 나옴!

 

 

추측하기로는 다이나믹 라우팅 이용해서 전체 세그먼트 포함되게 약간의 꼼수를 쓰신것같다..  참고

해결했으니 되었다 최고!!!

 

 

 

---

✔️ 참고 

https://github.com/vercel/next.js/discussions/40000