Get Started with ActiveReportsJS Report Designer 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 Designer component and loads a simple report into it for editing.

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

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

Create the Report Designer Wrapper

To use the React Report Designer 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 ReportDesigner.tsx file with the following code.

import { Designer } from "@mescius/activereportsjs-react";
import { DesignerProps } from "@mescius/activereportsjs-react";
// import the default theme for the report designer
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-designer.css";

const DesignerWrapper = ({ reportUri, ...props }: DesignerWrapperProps) => {
  return <Designer {...props} report={{ id: reportUri }} />;
};

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

export default DesignerWrapper;

The wrapper passes the report to the designer through the report property, and the designer loads the new report whenever this property changes. Avoid calling the designer's setReport() method from a useEffect hook instead: in development mode, React Strict Mode mounts components twice, and the designer can be destroyed while the report is still loading.

Add the Report Designer to the Page

The Report Designer 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 { DesignerWrapperProps } from "./components/ReportDesigner";

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

export default function Home() {
  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <Designer 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 Designer with the report loaded for editing. You can test the basic functionality by adding report items, setting their properties, creating a data source, and so on. Visit the Report Designer Interface page for more information on how to use the Report Designer component.