How to Integrate Report Designer into a Next.js Application

Next.js is a React framework that enables you to build fast and user-friendly static websites and web applications. This article explains how to integrate a report designer into a Next.js application by following the steps below.

Prerequisites

Before creating the application, ensure your development environment includes the following:

• Node.js (version 8.x or 10.x)
• NPM (version 3.x.x or higher)

Create a New Next.js React Application

1. To create a Next.js app using npm, first install the create-next-app CLI tool:

    npm install create-next-app
   

2. Then, create a new Next.js project:

   npx create-next-app nextjs-react-report-designer
   

3. Navigate to the newly created directory.

     cd nextjs-react-report-designer
   

4. Similar to React application documents, add the required dependencies for Bold Reports using the following commands.

    npm install create-react-class --save
   

    npm install @boldreports/react-reporting-components --save
   

5. Bold Reports requires the window.jQuery object to render React components. Import jQuery into the index.js file as shown below. Additionally, import the Bold Report Designer script and style files to run the Web Report Designer.

   import createReactClass from 'create-react-class';
   import ReactDOM from 'react-dom';
   import React, { Component } from 'react';
   import dynamic from 'next/dynamic'
   
   var designerStyle = { height: '700px', width: '100%' };
   
   
   class HomePage extends Component {
      componentWillMount() {
          if (typeof window !== 'undefined') {
              window.React = React;
              window.createReactClass = createReactClass;
              window.ReactDOM = ReactDOM;
              window.$ = window.jQuery = require('jquery');
              
              require('@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-designer.min.css');         
   
              require('@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min');
              require('@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min');
   
              require('@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min');
              require('@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min');
   
              require('@boldreports/react-reporting-components/Scripts/bold.reports.react.min');
              
             
          }
      }
   
          
    
   

6. To set up a Web API service, open the index.js file and add the service URL and report path as shown below.

   render() {
   
      return (
    <div style={designerStyle}>{typeof window !== 'undefined' ? <BoldReportDesignerComponent
    id="reportdesigner_container"
    serviceUrl={'https://demos.boldreports.com/services/api/ReportingAPI'} >
    </BoldReportDesignerComponent> : false}
    </div>
    )
   }
   }
   export default dynamic(() => Promise.resolve(HomePage), {
    ssr: false,
   });
   

7. The Report Designer requires a Web API service to process the report files. You can choose any one of the following Web API services to run this application.

   • ASP.NET Web API Service
   • ASP.NET Core Web API Service

8. Finally, run the application using the following command.

   npm run dev
   

9. For the sample application, you can download it here.