Get Started with ActiveReportsJS Report Designer 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 Designer 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 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-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 @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 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.

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

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/. 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 page for more information on how to use the Report Designer component.