# Next.js에서 ActiveReportsJS 보고서 디자이너 시작하기

## Content

[Next.js](https://nextjs.org/) 는 개발 프로세스 및 최종 애플리케이션을 더 빠르게 만드는 최적화와 함께 애플리케이션에 잘 정의된 구조를 제공하는 React 기반 프레임워크입니다. [이 자습서에서는 보고서 디자이너](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) 구성 요소 를 사용하는 Next.js 애플리케이션을 빌드하고 편집을 위해 간단한 보고서를 로드합니다.

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

Next.js 애플리케이션을 만드는 가장 쉬운 방법은 [다음 앱 만들기](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-designer-app`또는 다른 이름을 선택할 수 있습니다 .

### ActivereportsJS NPM 패키지 설치

핵심 기능이 포함된 @grapecity/ [activereports 패키지에 의존하는 ](https://www.npmjs.com/package/@grapecity/activereports)[@grapecity/activereports-react](https://www.npmjs.com/package/@grapecity/activereports-react) NPM 패키지를 통해 React Report Designer 구성 요소를 배포합니다 .
이러한 패키지의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하십시오.

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

### 애플리케이션에 ActiveReportsJS 보고서 추가

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 Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### 애플리케이션에 React Report Designer 래퍼 추가

`React Report Designer`작업을 수행하려면 `Next.js`간단한 래퍼를 만들어야 합니다. `components`존재하지 않는 경우 응용 프로그램의 루트에 라는 폴더를 만들고 `ReportDesigner.tsx`다음 코드가 포함된 파일을 추가합니다.

```tsx
import { Designer } from "@grapecity/activereports-react";
import { DesignerProps } from "@grapecity/activereports-react";
import React from "react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-designer.css";

// eslint-disable-next-line react/display-name
const DesignerWrapper = (props: DesignerWrapperProps) => {
  const ref = React.useRef<Designer>(null);
  React.useEffect(() => {
    ref.current?.setReport({id: props.reportUri});
  }, [props.reportUri]);
  return <Designer {...props} ref={ref} />;
};

export type DesignerWrapperProps = DesignerProps & { reportUri: string };

export default DesignerWrapper;
```

### 응용 프로그램에 보고서 디자이너 래퍼 추가

파일 의 기본 내용을 `pages\index.tsx`다음 코드로 바꿉니다.

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

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

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

export default Home;
```

### 애플리케이션 실행 및 테스트

`yarn run dev`또는 명령을 사용하여 응용 프로그램을 실행할 수 있습니다 `npm run dev`. 기본적으로 프로젝트는 [http://localhost:3000/](http://localhost:3000/) 에서 실행됩니다 . 이 URL을 탐색하면 애플리케이션의 시작 페이지에 ActiveReportsJS 보고서 디자이너가 나타나고 보고서 디자인이 표시됩니다. 보고서 항목 추가, 해당 속성 설정, 데이터 소스 생성 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 구성 요소를 사용하는 방법에 대한 자세한 내용은 [보고서 디자이너 인터페이스](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Designer-Interface) 페이지를 참조하십시오 .