# Get Started with ActiveReportsJS Report Viewer in Next.js

Learn how to use ActiveReportsJS Report Viewer component within 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 Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Overview) component to display the output of a simple report.

### 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-viewer-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 Viewer Component via the [@mescius/activereportsjs-react](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 Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

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

To get the `React Report Viewer` 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 `ReportViewer.tsx` file with the following code into it.

```tsx
import { Viewer } from "@mescius/activereportsjs-react";
import { Props as ViewerProps } from "@mescius/activereportsjs-react";
import { PdfExport } from "@mescius/activereportsjs";
import React from "react";
// import the default theme for the report viewer 
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/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;
```

### Add the Report Viewer 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 { 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 style={{ width: "100%", height: "100vh" }}>
      <Viewer 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 Viewer will appear on the page. The viewer will display the report that shows the `Hello, ActiveReportsJS Viewer` text. You can test the basic functionality by using the [Report Viewer User Interface](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Viewer-Interface).