# Get Started with ActiveReportsJS Report Designer in Next.js

Learn how to use the Report Designer component in a Next.js application

## Content

[Next.js](https://nextjs.org/) is a React-based framework that provides a well-defined structure for your application along with optimizations that make the development process and final application faster. In this tutorial, we build a Next.js application that uses the [Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) component and load a simple report for editing into it.

### Create a Next.js Application

The easiest way to create a Next.js application is to use the [Create Next App](https://nextjs.org/docs/api-reference/create-next-app) tool. Run the following command from the command prompt or terminal to create a `Next.js TypeScript project`.

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

It will ask for the name of the newly created project and its features. You could use the answers below:

```text
√ What is your project named? ... arjs-nextjs-designer-app
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias (@/*)? ... No
```

### Install ActivereportsJS NPM packages

We distribute the React Report Designer Component via the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs-react) NPM package that depends on the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) package that includes the core functionality.
To install the current version of these packages, run the following command from the application's root folder.

```bash
npm install @mescius/activereportsjs-react@latest
# or
yarn add @mescius/activereportsjs-react@latest
```

### Add an ActiveReportsJS report into the application

ActiveReportsJS uses the [JSON](https://www.json.org/json-en.html) format and the `rdlx-json` extension for report template files. In the application's `public` folder, create a new file called `report.rdlx-json` and insert the following JSON content into it.

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

### Add the React Report Designer wrapper into the application

To get the `React Report Designer` worked with `Next.js` we need to create a simple wrapper. Create a folder called `components`, if it does not exist, in the applications' root and add the `ReportDesigner.tsx` file with the following code into it.

```tsx
import { Designer } from "@mescius/activereportsjs-react";
import { DesignerProps } from "@mescius/activereportsjs-react";
import React from "react";
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/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;
```

### Add the Report Designer Wrapper into the application

Replace the default content of the `pages\index.tsx` file with the following code

```tsx
import type { NextPage } from "next";
import React from "react";
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 style={{ width: "100%", height: "100vh" }}>
      <Designer reportUri="report.rdlx-json" />
    </div>
  );
};

export default Home;
```

### Run and test the application

You can run the application by using the `yarn run dev` or `npm run dev` commands. By default, the project runs at [http://localhost:3000/](http://localhost:3000/). If you browse this URL, the ActiveReportsJS Report Designer will appear on the start page of the application and display the report design. You could test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the [Report Designer Interface](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface) page for more information on how to use the Report Designer component.