Error: Abort fetching component for route: “…” in Next.js

타입스크립트와 Next.js로 프로젝트를 진행하던 중, API로부터 데이터를 끌어와 인증 여부를 검증하고 라우팅하던 과정에서 에러가 발생했다.

해당 라우트의 컴포넌트를 불러오기를 중단한다는 뜻 같은데, 아래의 문서에서 그 원인을 찾을 수 있었다.

“Abort fetching component for route” error · Discussion #39040 · vercel/next.js

해당 문서에서는 router.push() 혹은 router.replace()가 여러 번 호출되어서 발생할 수 있다고 이야기하고있고, 솔루션으로 useEffect나 다른 이벤트 핸들러를 통해 호출하는 것을 권장하고 있다.

const useUser = () => {
    const [user, setUser] = useState();
    const router = useRouter();
    useEffect(() => {
        fetch("/api/users/me")
            .then((response) => response.json())
            .then((json) => {
                if (!json.status) {
                    return router.replace("/auth", "/");
                }
                setUser(json.profile);
            });
    }, [router]);
    return user;
};

문제가 되는 router.replace()를 호출한 부분의 코드는 이러한데, 처음부터 useEffect를 이용해 호출했기 때문에 이해할 수 없었으나, 두번 렌더링되는 것을 보아하니 React의 StrictMode 때문일 수 도 있다고 생각하고 StrictMode를 false로 변경했다.

Render Twice in Next.js

React의 StrictMode로 인한 컴포넌트의 Double Rendering으로 인해서도 해당 에러가 발생할 수 있을 것이라는 예상이 옳았다. 해당 에러로 하루 넘게 고민했는데, 혹여나 같은 원인으로 인해서 이 글을 보는 사람들은 빠르게 해결할 수 있길 바란다.

원문: Medium