Get Started with ActiveReportsJS Report Viewer in Next.js

Next.js 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 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 the following command from the command prompt or terminal to create a Next.js TypeScript project.

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:

√ 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 @grapecity/activereports-react NPM package that depends on the @grapecity/activereports package that includes the core functionality.

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

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

Add an ActiveReportsJS report into the application

ActiveReportsJS uses the JSON 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.

{
  "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.

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;

Add the Report Viewer Wrapper into the application

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

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/. 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.