We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Integration with Next.js

    This tutorial will help you integrate Flexmonster with Next.js.

    Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component in our sample Next.js project.

    If you are using React without a framework, see Integration with React.

    Prerequisites

    Step 1. (optional) Create a Next.js application

    Skip this step if you already have a Next.js app.

    Create a Next.js app by running the following commands in the console:

    npx create-next-app flexmonster-project --ts --app
    cd flexmonster-project

    You will be prompted to choose optional features for the project. For simplicity, choose No for all the features.

    Step 2. Get Flexmonster

    To get Flexmonster for Next.js, run the following command inside your project:

    flexmonster add react-flexmonster

    This command downloads the react-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.

    Step 3. Embed Flexmonster

    Step 3.1. Import Flexmonster styles into the globals.css file:

    @import "flexmonster/flexmonster.css";

    Step 3.2. In a separate file, create a Client Component called PivotWrapper, which will be a wrapper for FlexmonsterReact.Pivot (if needed, you can name this wrapper differently):

    "use client"
    import * as React from "react"; 
    import * as FlexmonsterReact from "react-flexmonster";
    
    const PivotWrapper: React.FC = () => {
      return (
        <FlexmonsterReact.Pivot/>
      )
    }
    
    export default PivotWrapper;

    Step 3.3. In the same file, create the PivotProps type, which includes an optional pivotRef prop in the list of FlexmonsterReact.Pivot props:

    import Flexmonster from "flexmonster";
    
    type PivotProps = Flexmonster.Params & {
      pivotRef?: React.ForwardedRef<FlexmonsterReact.Pivot>;
    }

    The pivotRef can be used to get a reference to the Flexmonster instance so you can access Flexmonster API.

    Step 3.4. Set the PivotProps as the type of PivotWrapper's props. Then pass these props (e.g., pivotRef and params) to the FlexmonsterReact.Pivot:

    const PivotWrapper: React.FC<PivotProps> = ({ pivotRef, ...params}) => {
      return (
        <FlexmonsterReact.Pivot
          {...params}
          ref={pivotRef}
        />
      )
    }

    Step 3.5. Import the PivotWrapper as a dynamic component (e.g., into app/page.tsx):

    import dynamic from "next/dynamic";
    
    const PivotWrapper = dynamic(() => import("@/app/PivotWrapper"), {
      ssr: false,
      loading: () => <p>Loading Flexmonster...</p>
    });

    This ensures that Flexmonster is loaded only when the page is rendered on the client side. Learn more about dynamic imports in Next.js.

    Note If there is no need to use Flexmonster API, PivotWrapper can be used inside Server Components.

    Step 3.6. Insert the PivotWrapper component (e.g., into app/page.tsx):

    export default function App() {
      return (
        <main className={styles.main}>
          <PivotWrapper
            toolbar={true}
          />
        </main>
      )
    }

    PivotWrapper has the same props as FlexmonsterReact.Pivot. See the list of available props.

    Step 4. Run the application

    Run your application from the console:

    npm start

    Open your project in the browser to see the result.

    Usage examples

    We prepared the following examples of Flexmonster usage:

    See also