Next.js에서 'lucide-react' 모듈을 찾을 수 없는 오류 해결 방법

Next.js 프로젝트에서 다음과 같은 오류를 만나는 경우가 있습니다:

Module not found: Can't resolve 'lucide-react'

이 오류는 외부 패키지인 lucide-react가 프로젝트에 설치되지 않았을 때 발생합니다. 이 글에서는 오류의 원인과 해결 방법을 간단하게 정리해보겠습니다.

---

1. 오류 원인

lucide-react는 아이콘 컴포넌트를 제공하는 라이브러리로, 보통 shadcn/ui 기반의 UI 컴포넌트를 생성할 때 함께 사용됩니다. 예를 들어 select, button, input 등 컴포넌트 내에서 다음과 같이 아이콘을 import할 수 있습니다:

import { CheckIcon, ChevronDownIcon } from "lucide-react";

하지만 lucide-react 패키지가 설치되어 있지 않으면, Next.js는 해당 모듈을 찾을 수 없다는 에러를 출력하게 됩니다.

---

2. lucide-react란?

lucide-react는 Feather Icons를 기반으로 만든 React용 오픈소스 아이콘 라이브러리입니다. SVG 아이콘을 컴포넌트 형태로 제공하며, 다음과 같은 특징을 가집니다:

• React 컴포넌트로 손쉽게 아이콘 사용 가능
• Feather 스타일의 미니멀하고 직관적인 디자인
• shadcn/ui에서 기본 아이콘 세트로 자주 사용됨
• 필요에 따라 개별 아이콘만 import하여 번들 크기 최적화 가능

사용 예시:

import { CheckIcon, TrashIcon } from 'lucide-react';

function Example() {
  return <CheckIcon size={24} className="text-green-500" />;
}

공식 GitHub: https://github.com/lucide-icons/lucide

---

3. 해결 방법

아래 명령어를 실행하여 lucide-react 패키지를 설치하면 문제가 해결됩니다.

npm install lucide-react

또는 yarn을 사용하는 경우:

yarn add lucide-react

설치가 완료되면 개발 서버를 재시작하세요:

npm run dev

---

4. 추가 팁: Shadcn UI 사용자라면

shadcn/ui를 이용해 컴포넌트를 생성한 경우, 필요한 의존성(lucide-react, tailwind-variants 등)이 자동으로 설치되지 않는 경우도 있습니다. 따라서 컴포넌트 생성 후 README.md 또는 CLI 안내에 따라 필요한 의존성은 수동으로 설치해야 합니다.