Next.js 15.1.2 -> 14.2.21로 다운그레이드

Auth0를 사용하여 로그인 상태를 서버 컴포넌트에서 확인하기 위해 getSession을 호출했더니 아래와 같은 오류가 발생했습니다.

Route "/api/auth/[auth0]" used `params.auth0`. `params` should be awaited before using its properties

공식 문서에 있는 코드를 똑같이 복사해서 사용해도 똑같은 결과가 나왔습니다.

https://stackoverflow.com/questions/79270854/route-api-auth-auth0-used-params-auth0-params-should-be-awaited-before

Route "/api/auth/[auth0]" used `params.auth0`. `params` should be awaited before using its properties

검색을 통해 알아본 결과, Auth0의 현재 버전이 Next.js 최신 버전을 지원하지 않아서 발생한 문제로 추측됩니다.

이에 Next.js를 다운그레이드하여 문제를 해결했습니다.

1. Next.js 및 React 버전 다운그레이드

Next.js를 15.x에서 14.2.21로, React를 19에서 18로 다운그레이드했습니다.

npm install next@14.2.21 react@18 react-dom@18

 

다운그레이드 후, package.json 확인

"dependencies": {
  "next": "14.2.21",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

2. Next.js 설정 파일 변경

1) next.config.ts → next.config.js

Next.js 14에서는 next.config.ts을 지원하지 않으므로, 설정 파일을 next.config.js 로 변경합니다.

내용은 아래와 같이 수정합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;

 

 

2) Turbopack 제거

package.json의 스크립트에서 Turbopack 관련 옵션을 제거했습니다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

3. 폰트 관련 오류

Next.js 15.1.2에서 app 폴더 아래의 layout.tsx에 기본 폰트로 다음과 같은 코드가 사용됩니다.

import { Geist, Geist_Mono } from 'next/font/google';

하지만 Geist와 Geist_Mono는 next/font/google에서 지원되지 않아 오류가 발생합니다.

이 경우, 다른 폰트를 사용하면 문제가 해결됩니다. 예를 들어, Google Fonts에서 지원하는 폰트로 대체할 수 있습니다.