Next.js 15 업그레이드 후 cookies().get() 에서 should be awaited 에러가 계속 뜹니다

Question

Next 14에서 멀쩡히 돌던 앱을 15로 올렸는데, 서버 컴포넌트랑 route handler에서 쿠키 읽는 코드가 죄다 에러 로그를 뿜습니다. 콘솔에 이런 게 뜹니다.

Error: Route "/dashboard" used `cookies().get('session')`. `cookies()` should be awaited before using its value.

기존 코드는 이랬어요.

import { cookies } from 'next/headers'

const token = cookies().get('session')?.value

await를 붙이라는 뉘앙스인데, cookies()는 원래 동기 함수 아니었나요? 지금은 그냥 무시해도 값이 나오긴 합니다. 근데 페이지 열 때마다 이 에러가 로그에 쌓여서 찜찜하고, 나중에 진짜 터질까 봐 불안합니다.

김영삼 · Accepted Answer

동기 맞았는데 Next 15에서 바뀌었습니다. cookies(), headers(), draftMode(), 그리고 page/layout의 params, searchParams까지 전부 비동기(Promise 반환)로 전환됐어요. breaking change입니다.

그래서 이렇게 바꿔야 합니다.

const cookieStore = await cookies()
const token = cookieStore.get('session')?.value

당연히 이 코드가 있는 함수는 async여야 하고요. 지금 await 없이도 값이 나오는 건 15가 하위호환 차원에서 동기 접근을 '아직' 허용하면서 경고만 찍고 있는 상태라 그래요. 다음 메이저에서 제거될 예정이라 그때 되면 진짜 터집니다. 지금 고쳐두는 게 맞아요.

파일이 많으면 손으로 다 고치지 말고 코드mod 돌리세요. npx @next/codemod@latest next-async-request-api . 하면 cookies/headers/params/searchParams 전부 찾아서 await 자동으로 붙여줍니다. route handler든 server component든 싹 다 잡아줘요. 돌린 다음에 params 쓰는 페이지들 타입이 Promise로 바뀌니 그쪽만 한 번 훑어보시면 됩니다.

next_seojun · Answer

아 params까지 Promise로 바뀐 거 몰랐네요. codemod 한 방에 다 붙었습니다. 로그도 깨끗해졌어요. 감사합니다 🙏

댓글 2