[Next.js@14] Vercel 배포 에러 location is not defined

개요

• 배포 초반에 수많은 eslint 관련 오류들과 함께 location is not defined 이라는 오류가 떴다

//...중략
[18:01:06.244] 
   Generating static pages (13/18) 
[18:01:06.771] ReferenceError: location is not defined
[18:01:06.772]     at /vercel/path0/.next/server/chunks/2919.js:11:7988
[18:01:06.773]     at /vercel/path0/.next/server/chunks/2919.js:11:8657
[18:01:06.774]     at t.startTransition (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:105792)
[18:01:06.774]     at Object.replace (/vercel/path0/.next/server/chunks/2919.js:11:8645)
//...중략

• 실제로 프로젝트 코드 중에 location 이라는 변수 선언도 있었고,
• DELETE 요청 성공 시 화면 새로고침을 위한 location.reload() 코드도 있었기 때문에 당연히 이 두 개 중 하나 or 두 개 모두 문제의 원인이겠거니 생각했다
• 그런데 해당 부분을 수정해도 계속 같은 오류 발생 (이제 내 코드에는 location이 없는데;;)
• 그제서야 구글링 시작..

---

문제 및 해결

원인1. import { useRouter } from 'next/router'

• next의 useRouter는 두 개의 import 방식이 있다

import { useRouter } from 'next/router' // x
import { useRouter } from 'next/navigation' // o

• next.js공식문서에서는 app router 버전에서 useRouter hook 사용 시
  next/router 가 아닌 next/navigation 으로 import해야 한다고 말하고 있다
• next/router에서 import 한 useRouter hook 사용 시에도 같은 오류 메세지가 뜬다고 한다
• 하지만 본인은 줄곧 next/navigation 에서만 import 해왔으니 해당 안됨

다른 원인을 찾아 계속 구글링 해보았다..

원인2. useEffect()

• 동일한 오류를 겪고 있는 관련 문서를 읽게 되었고, useRouter hook 사용이 useEffect 내에서 이루어지지 않을 때 같은 오류가 발생한다는 것을 알게 되었다

// 기존 코드 (page.tsx)
'use client'
import { useRouter } from 'next/navigation'
const page = () => {
  const route = useRouter()
  route.replace('/explore')
  return null
}
export default page

• 여기서 라우팅 동작 코드를 useEffect hook 내부로 옮겼다

// 고친 후
'use client'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'
const page = () => {
  const route = useRouter() // 주의*useEffect문 바깥에서 선언 (내부에서 하면 에러남)
  useEffect(() => {
    route.replace('/explore')
  }, [])
  return null
}
export default page

오류 해결