[NextJS 14] useSearchParams() should be wrapped in a suspense boundary at page 에러 해결해보기

---

Intro

NextJS 14버전으로 새로운 프로젝트를 한창 진행 중이다.

해당 프로젝트는 Vecel을 이용해 CI/CD 파이프라인을 구축해 놓은 상태인데, 개발 모드에서는 괜찮았는데  프로덕션 빌드 시 문제가 발생했다. 그래서 여느 때처럼 에러를 해결 하기 위해 구글을 검색해보았는데 생각보다 한국어로 정리가 되어 있는 글을 만나지 못했다...ㅋㅋ 내가 정리한 글을 보고 누군가가 쉽게 에러를 해결했으면 하는 바람으로 몇 자 적어본다!

 

내가 에러가 발생한 코드

// '/oauth/redirected/kakao'

"use client";
import axios from "axios";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";

const OAuthTokenPage = () => {
  const searchParams = useSearchParams();
  const code = searchParams.get("code");
  const router = useRouter();

  useEffect(() => {
  	// code를 이용해 카카오 로그인 하는 코드
  }, []);

  return <></>;
};

export default OAuthTokenPage;

 

이제 이 코드를 Suspense로 감싸 주면 끝이다!

단, page 내에 return 하는 곳에 Suspense를 넣어 끝내는 것이 아니라, useSearchParams를 사용한 부분을 따로 컴포넌트화 시켜주고, page 내에서 Suspense로 감싸주어야한다!

 

👏 해결 코드

import { Suspense } from "react";
import LoginComponent from "./_component/LoginComponent";

const OAuthTokenPage = () => {
  return (
    <Suspense>
      <LoginComponent />
    </Suspense>
  );
};

export default OAuthTokenPage;

 

"use client";

import axios from "axios";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";

const LoginComponent = () => {
  const searchParams = useSearchParams();
  const code = searchParams.get("code");
  const router = useRouter();

  useEffect(() => {
      // 대충 카카오 로그인 로직
  }, []);

  return <></>;
};

export default LoginComponent;

 

 

 

🤷‍♂️ 또 다른 방법?!

 

NextJS 공식 문서를 살펴보면 위와 같은 에러를 해결하기 위한 또 다른 방법을 제시하고 있다.

그러나 이 방법을 추천하지는 않는다고 하니 웬만하면 위에서 소개한 방법으로 빌드 에러를 해결하면 좋을 것 같다!