Why ActiveReportsJS
왜 Next.js App에서 ActiveReportsJS를 선택해야 할까요?
2. Next.js 앱에 React 보고서 뷰어 Wrapper를 추가합니다.
작업을 진행할 Next.js 앱 폴더의 components 폴더에 아래의 코드를 포함하는 ReportViewer.tsx 파일을 추가합니다.
* 루트 폴더에 components 폴더가 존재하지 않는 경우, 폴더를 생성합니다.
* ActiveReportsJS는 서버 사이드 렌더링(SSR)을 지원하지 않으므로, 컴포넌트가 클라이언트 측에서만 렌더링되도록 상단에 'use client'; 지시어를 추가합니다.
3. 보고서 뷰어 Wrapper를 추가합니다.
app/page.tsx 파일 내의 코드를 아래의 코드로 변경합니다.
4. Next.js 앱을 실행하여 결과를 확인합니다.
npm run dev
For Next.js 개발자
ActiveReportsJS 첫 사용자를 위한 추천 튜토리얼
-
ActiveReportsJS Designer를 사용해 보고서 만들기
노코드 리포트 디자이너 프로그램을 사용해 보고서 양식을 만들고, 데이터를 바인딩하는 방법에 대해 설명합니다.
-
Next.js 웹 응용 프로그램에 리포트 디자이너를 추가하는 방법
Next.js 앱에 리포트 디자이너를 추가하는 방법에 대해 설명합니다. 리포트 디자이너를 활용해 최종 사용자가 직접 리포트 양식을 만들고 수정할 수 있습니다.
-
리포트 미리보기 없이 PDF 파일로 내보내는 방법
ActiveReportsJS 뷰어 화면 없이 리포트를 PDF로 내보내서 저장하는 방법에 대해 설명합니다.
ActiveReportsJS Starter Template
커스터마이징이 가능한 샘플 & 템플릿을 통해서
빠르게 개발을 시작해보세요.
ActiveReportsJS를 활용한 다양한 템플릿과 샘플입니다. 실제 데모를 확인하실 수 있으며, 다운로드하여 직접 커스터마이징하여 사용하실 수 있습니다.
Next.js 리포팅 컨트롤 ActiveReportsJS 주요 기능
List of Services
-
강력한 데이터 바인딩List Item 1
향상된 데이터 바인딩 기능을 통해 리포트를 쉽고 빠르게 REST API, OData, GraphQL에 바인딩할 수 있습니다.
-
유연한 리포트 레이아웃List Item 2
두 가지 유형의 레이아웃과 다양한 컨트롤 중에서 선택하여 더욱 완벽한 리포트를 생성할 수 있습니다.
-
데이터 시각화List Item 3
다양한 JSON 데이터 소스를 사용하여 여러분의 웹 어플리케이션에 고성능 JavaScript 리포트를 생성해 보세요. 표, 리스트, 차트를 통해 더 많은 인사이트를 얻을 수 있습니다.
-
맞춤형 보고서List Item 4
사용자가 보고서를 더욱 빠르고 섬세하게 생성할 수 있도록 보고서 디자이너 컴포넌트를 활용하십시오.
-
완벽한 뷰어
뷰어 컴포넌트를 사용하여 최종 사용자에게 최고의 보기, 내보내기 및 인쇄 기능을 제공해 보세요.
-
프론트엔드 프레임워크 지원
ActiveReportsJS는 모든 주요 프레임워크를 지원하여, Angular, React, Svelte, Vue, Nuxt, Next.js, Vite 애플리케이션에 쉽게 통합할 수 있습니다.
