Arco Design 시스템을 기반으로 디자인 토큰을 커스터마이즈할 수 있고 TypeScript 타입을 제공하는 60개 이상의 React UI 컴포넌트 라이브러리입니다.
alibaba-fusion/next
디자이너와 프런트엔드 개발자가 테마를 공유해 협업할 수 있도록 설계된 엔터프라이즈급 백오피스용 React 컴포넌트 라이브러리입니다.
- 스타
- 4,682
- 포크
- 597
- 열린 이슈
- 268
- 마지막 커밋
- 6일 전
어떤 프로젝트인가요?
@alifd/next는 엔터프라이즈 백엔드 인터페이스를 구축하기 위한 React 컴포넌트 라이브러리입니다. 디자이너와 프런트엔드 개발자 사이의 작업 부담을 줄이는 데 초점을 둡니다. 디자이너는 컴포넌트의 외관을 커스터마이징해 npm 테마 패키지로 배포하고, 개발자는 UI 코드를 다시 작성하지 않고 이를 사용할 수 있습니다. 이를 통해 제품 경험의 일관성을 높이고 개발 속도를 개선하는 것이 목표입니다.
이 라이브러리는 React 16 이상이 필요하며, react와 react-dom을 peer dependency로 사용합니다. 날짜 및 시간 컴포넌트는 moment에 의존하며, moment 역시 peer dependency입니다. npm에서 설치하거나 CDN의 전역 스크립트로 불러올 수 있으며, 번들 크기를 줄이려면 babel-plugin-import를 통해 전체 라이브러리 또는 컴포넌트별로 가져올 수 있습니다.
이 프로젝트는 TypeScript로 작성되었으며 Chrome, Firefox, Edge, Safari, Opera, UC와 IE 9 이상에서 동작합니다. 문서에는 테마 설정, 국제화, 폰트 배포에 관한 내용이 포함되어 있습니다. Fusion Design 툴체인과 함께 사용하는 경우가 많습니다.
핵심 기능
- 01백엔드 인터페이스 구축을 위한 다양한 React UI 컴포넌트를 제공합니다.
- 02npm 모듈로 배포하는 커스텀 테마 패키지를 지원합니다.
- 03babel-plugin-import로 라이브러리 전체 또는 개별 컴포넌트를 가져올 수 있습니다.
- 04국제화 및 폰트 배포 가이드를 제공합니다.
- 05script와 link 태그를 사용해 브라우저에서 직접 불러올 수 있습니다.
활용 사례
- 내부 관리 대시보드와 엔터프라이즈 백오피스 시스템을 구축합니다.
- 하나의 디자인 시스템을 공유하는 여러 제품의 UI를 표준화합니다.
- 디자이너가 브랜드 테마 패키지를 배포하고 개발자가 UI를 다시 작업하지 않고 사용할 수 있도록 합니다.
빠른 시작
- 1
npm에서 패키지를 설치합니다
npm install @alifd/next --save - 2
프로젝트에 전체 스타일시트와 컴포넌트를 가져옵니다
import '@alifd/next/dist/next.css';
사용 전 알아둘 점
- React 16 이상이 필요하며, React 16 미만 버전은 지원되지 않습니다.
- react, react-dom, moment는 peer dependency로 별도 설치해야 합니다.
토픽
자주 묻는 질문
- next은(는) 무엇인가요?
- 디자이너와 프런트엔드 개발자가 테마를 공유해 협업할 수 있도록 설계된 엔터프라이즈급 백오피스용 React 컴포넌트 라이브러리입니다. @alifd/next는 엔터프라이즈 백엔드 인터페이스를 구축하기 위한 React 컴포넌트 라이브러리입니다. 디자이너와 프런트엔드 개발자 사이의 작업 부담을 줄이는 데 초점을 둡니다. 디자이너는 컴포넌트의 외관을 커스터마이징해 npm 테마 패키지로 배포하고, 개발자는 UI 코드를 다시 작성하지 않고 이를 사용할 수 있습니다. 이를 통해 제품 경험의 일관성을 높이고 개발 속도를 개선하는 것이 목표입니다.
- next은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- next은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- next은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. next의 마지막 커밋은 2026년 11월 1일입니다.
- next은(는) 어디에 사용할 수 있나요?
- 내부 관리 대시보드와 엔터프라이즈 백오피스 시스템을 구축합니다. 하나의 디자인 시스템을 공유하는 여러 제품의 UI를 표준화합니다. 디자이너가 브랜드 테마 패키지를 배포하고 개발자가 UI를 다시 작업하지 않고 사용할 수 있도록 합니다.
- next는 어떻게 설치하나요?
- npm에서 패키지를 설치합니다: npm install @alifd/next --save 프로젝트에 전체 스타일시트와 컴포넌트를 가져옵니다: import '@alifd/next/dist/next.css';
- next은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/alibaba-fusion/next
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
Tailwind CSS에 클래스 이름으로 바로 사용할 수 있는 UI 컴포넌트를 추가하는 무료 오픈소스 라이브러리입니다.
React, Tailwind CSS, Base UI로 만든 오픈소스 shadcn/ui 컴포넌트, 블록, 대시보드 템플릿으로, CLI나 복사·붙여넣기로 프로젝트에 추가할 수 있습니다.
React 19과 StyleX 기반의 오픈 소스 React 디자인 시스템으로, 접근성 높은 컴포넌트 150개 이상과 테마, CLI를 제공합니다.
다크 모드와 Next.js RSC를 지원해 웹 앱을 빠르게 만들 수 있는 접근성 중심의 React 컴포넌트 라이브러리이자 디자인 시스템입니다.
디자인 시스템과 웹 앱을 만들기 위한, 스타일이 지정되지 않은 접근성 높은 React UI 프리미티브 오픈소스 모음입니다.