# Next.js 에서 ActiveReportsJS 리포트 디자이너 시작하기

## Content

[Next.js](https://nextjs.org/)는 개발 프로세스 및 최종 애플리케이션을 더 빠르게 만드는 최적화와 함께 애플리케이션에 대해 잘 정의된 구조를 제공하는 React 기반 프레임워크입니다. 이 튜토리얼에서는 [Report Viewer](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Overview) 컴포넌트를 사용하여 간단한 보고서의 출력을 표시하는 Next.js 애플리케이션을 빌드합니다.

### **Next.js 애플리케이션 만들기**

Next.js 애플리케이션을 만드는 가장 쉬운 방법은 [Create Next App](https://nextjs.org/docs/api-reference/create-next-app) 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 [Next.js TypeScript 프로젝트](https://github.com/vercel/next.js/blob/canary/docs/basic-features/typescript.md)를 생성합니다.

```bash
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --ts
```

이 튜토리얼에서는 새로 생성되는 프로젝트 이름을 `arjs-nextjs-viewer-app` 로 하겠습니다.

### **ActivereportsJS NPM 패키지 설치**

[@grapecity/activereports-react](https://www.npmjs.com/package/@grapecity/activereports-react) NPM 패키지를 통해 React 보고서 뷰어 컴포넌트를 제공합니다.

[@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) 패키지는 기본 기능을 포함하고 있습니다.

이러한 패키지의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행합니다.

```bash
npm install @grapecity/activereports-react
# or
yarn add @grapecity/activereports-react
```

### **응용 프로그램에 ActiveReports 보고서 추가하기**

ActiveReportsJS는 보고서 템플릿 파일에 [JSON](https://www.json.org/json-en.html) 형식과 `rdlx-json` 확장자를 사용합니다. 애플리케이션의 'public' 폴더에서 'report.rdlx-json'이라는 새 파일을 만들고 여기에 다음 JSON 콘텐츠를 삽입합니다.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### **응용 프로그램에 React 보고서 뷰어 Wrapper 추가하기**

`React Report Viewer`가 `Next.js`와 함께 작동하도록 하려면 간단한 래퍼를 만들어야 합니다. 애플리케이션 루트에 `components`라는 폴더가 존재하지 않는 경우 생성하고 다음 코드가 포함된 `ReportViewer.tsx` 파일을 추가합니다.

```tsx
import { Viewer } from "@grapecity/activereports-react";
import { Props as ViewerProps } from "@grapecity/activereports-react";
import { PdfExport } from "@grapecity/activereports";
import React from "react";
// import the default theme for the report viewer 
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";

// eslint-disable-next-line
const pdf = PdfExport;

// eslint-disable-next-line react/display-name
const ViewerWrapper = (props: ViewerWrapperProps) => {
  const ref = React.useRef<Viewer>(null);
  React.useEffect(() => {
    ref.current?.Viewer.open(props.reportUri);
  }, [props.reportUri]);
  return <Viewer {...props} ref={ref} />;
};

export type ViewerWrapperProps = ViewerProps & { reportUri: string };

export default ViewerWrapper;
```

### **응용 프로그램에 보고서 뷰어 Wrapper 추가하기**

`pages\index.tsx` 파일의 기본 콘텐츠를 다음 코드로 바꿉니다.

```tsx
import type { NextPage } from "next";
import React from "react";
import styles from "../styles/Home.module.css";
import { ViewerWrapperProps } from "../components/ReportViewer";

// use the dynamic import to load the report viewer wrapper: https://nextjs.org/docs/advanced-features/dynamic-import
import dynamic from "next/dynamic";
const Viewer = dynamic<ViewerWrapperProps>(
  async () => {
    return (await import("../components/ReportViewer")).default;
  },
  { ssr: false }
);

const Home: NextPage = () => {
  return (
    <div
      className={styles.container}
      style={{ width: "100%", height: "100vh" }}
    >
      <Viewer reportUri="report.rdlx-json" />
    </div>
  );
};

export default Home;
```

### **응용프로그램 실행**

`yarn run dev` 또는 `npm run dev` 명령을 사용하여 애플리케이션을 실행할 수 있습니다. 기본적으로 프로젝트는 [http://localhost:3000/](http://localhost:3000/)에서 실행됩니다. 이 URL을 탐색하면 ActiveReportsJS 보고서 뷰어가 페이지에 나타납니다. 뷰어는 'Hello, ActiveReportsJS Viewer' 텍스트를 보여주는 보고서를 표시합니다. [보고서 뷰어 사용자 인터페이스](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Viewer-Interface)를 사용하여 기본 기능을 테스트할 수 있습니다.