문제점
Next.js 프로젝트에서 React 19을 사용하려고 하였으나
Ant Design v5가 공식적으로 React 16~18까지만 지원하는 문제로 인해 다음과 같은 경고 메시지가 나타났습니다.
Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.그런데 저의 경우, 현재 react 버전이 18.2.0이고, antd@5.22.7을 사용하고 있었습니다.
Ant Design v5는 React 16~18을 지원한다고 명시되어 있었기에, [antd: compatible] 경고가 발생하는 것이 React 19 때문이 아닐 것이라 생각했습니다.
이 문제를 해결하기 위해 React 버전을 한 번 더 낮추는 방법을 시도하였지만 해결되지 않았으며, 차라리 공식문서인https://ant.design/docs/react/v5-for-19 와 같이 React 버전을 React 19로 올리고 Ant Design v5를 사용하려고 하였습니다.
문제의 원인
Ant Design v5는 기본적으로 React 19를 지원하지 않습니다.
따라서 React 19을 사용하면 호환성 문제로 인해 경고 메시지가 출력됩니다.
이 문제를 해결하려면 다음 두 가지 작업이 필요합니다.
- React 19로 업그레이드
- Ant Design v5의 React 19 패치를 적용
해결 방법
1. React 19로 업그레이드
기본적으로 프로젝트에서 사용하는 React 버전을 최신 버전(React 19)으로 업그레이드해야 합니다.
npm install react@latest react-dom@latest업그레이드가 정상적으로 되었는지 확인합니다.
npm list react react-dom출력 예시:
├── react@19.0.0
└── react-dom@19.0.0이제 React 19가 정상적으로 설치되었을 것입니다.
2. Ant Design React 19 패치 적용
React 19와의 호환성을 유지하기 위해 Ant Design에서 제공하는 패치 패키지를 설치해 주었으며
npm install @ant-design/v5-patch-for-react-19 --save
설치가 완료되었는지 아래와 같이 확인해 줍니다.
npm list @ant-design/v5-patch-for-react-19출력 예시:
└── @ant-design/v5-patch-for-react-19@1.0.33. 패치 적용
Ant Design 패치를 Next.js 프로젝트에서 적용하려면, app/layout.tsx 또는 app/page.tsx의 최상단에 다음을 추가합니다.
import '@ant-design/v5-patch-for-react-19';app/layout.tsx 수정 예시
import '@ant-design/v5-patch-for-react-19';
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Providers from "./providers";
import "antd/dist/reset.css";
import "./globals.css";
import TabBar from "@/ui/components/tapbar/tapbar";
import ClientWrapper from "./clientWrapper";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
>
<Providers>
<main className="flex-1 w-full overflow-auto pb-[80px]">
<ClientWrapper>{children}</ClientWrapper>
</main>
<TabBar />
</Providers>
</body>
</html>
);
}4. Next.js 서버 재시작
모든 변경 사항을 적용하려면 Next.js 서버를 다시 시작해주셔야 합니다.
npm run dev서버를 다시 실행한 후 브라우저 콘솔을 확인하여 [antd: compatible] 경고가 사라졌는지 확인해 보시면 될 것 같습니다.
'Back-End > NextJS' 카테고리의 다른 글
| NextJS 실행 방법 (0) | 2024.07.21 |
|---|
