Get Started with ActiveReportsJS Report Viewer in Next.js

Next.js is a React-based framework that gives your application a well-defined structure and includes optimizations that speed up both development and the final application. In this tutorial, we build a Next.js application that uses the Report Viewer 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 tool. Run one of the following commands in a terminal to create a Next.js TypeScript project.

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

The tool prompts you for a project name, for example arjs-nextjs-viewer-app. If it then asks whether to use the recommended Next.js defaults, choose Yes. This tutorial assumes the default App Router project structure.

Install ActiveReportsJS NPM Packages

We distribute the React Report Viewer component via the @mescius/activereportsjs-react NPM package. It depends on the @mescius/activereportsjs package, which contains the core functionality.

To install the current version of these packages, run the following command from the application's root folder.

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

Add an ActiveReportsJS Report to the Application

ActiveReportsJS report templates are JSON files with the .rdlx-json extension. In the application's public folder, create a new file called report.rdlx-json and insert the following JSON content into it.

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

Files in the public folder are served from the root of the site, so the viewer can load this report from the report.rdlx-json URL.

Create the Report Viewer Wrapper

To use the React Report Viewer in a Next.js application, we create a simple wrapper component. In the app directory, create a folder called components if it does not exist, and add a ReportViewer.tsx file with the following code.

import { Viewer } from "@mescius/activereportsjs-react";
import { Props as ViewerProps } from "@mescius/activereportsjs-react";
import { PdfExport } from "@mescius/activereportsjs";
// import the default theme for the report viewer
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";

// reference the PdfExport module so that the bundler keeps it and the viewer offers PDF export
// eslint-disable-next-line
const pdf = PdfExport;

const ViewerWrapper = ({ reportUri, ...props }: ViewerWrapperProps) => {
  return <Viewer key={reportUri} {...props} report={{ Uri: reportUri }} />;
};

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

export default ViewerWrapper;

Add the Report Viewer to the Page

The Report Viewer runs only in the browser, so it must not be rendered on the server. In the App Router, pages are Server Components by default, and the ssr: false option of next/dynamic is only allowed in Client Components. Therefore, the page starts with the "use client" directive.

Replace the default content of the app/page.tsx file with the following code.

"use client";

import dynamic from "next/dynamic";
import type { ViewerWrapperProps } from "./components/ReportViewer";

// load the report viewer wrapper in the browser only: https://nextjs.org/docs/app/guides/lazy-loading
const Viewer = dynamic<ViewerWrapperProps>(
  () => import("./components/ReportViewer"),
  { ssr: false }
);

export default function Home() {
  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <Viewer reportUri="report.rdlx-json" />
    </div>
  );
}

Run and Test the Application

Run the application with the npm run dev or yarn dev command. By default, the application runs at http://localhost:3000/. When you open this URL in a browser, the page displays the ActiveReportsJS Report Viewer with the report that shows the Hello, ActiveReportsJS Viewer text. You can test the basic functionality by using the Report Viewer User Interface.