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

Node.js 16 or later
Flexmonster CLI
Install it with the following command:
```
npm install -g flexmonster-cli
```

Specifics of integrating with Next.js

For this integration, we will use the Flexmonster React wrapper.

Like Flexmonster itself, this wrapper is a client-side-only component and is not compatible with server-side rendering (SSR), which is enabled by default in Next.js. Directly importing and using the Flexmonster React wrapper in Next.js components can cause runtime errors.

To address this, we will create a wrapper around the Flexmonster React component and dynamically import the wrapper with SSR explicitly disabled. This guarantees that Flexmonster is only rendered in the browser and not during the server-side rendering phase.

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 app/globals.css file:

@import "flexmonster/flexmonster.css";

Step 3.2. Flexmonster cannot be used directly in Next.js components due to SSR, so you need to create a client-side wrapper around FlexmonsterReact.Pivot. Create a new file and define a Client Component (e.g., PivotWrapper) to wrap FlexmonsterReact.Pivot:

"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 current PivotWrapper implementation, it’s not possible to configure Flexmonster from outside the wrapper. To fix this, update the PivotWrapper to accept Flexmonster configuration parameters and the ref prop and pass them to FlexmonsterReact.Pivot:

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

The ref is used to get a reference to the Flexmonster instance, which is needed to access the Flexmonster API.

Step 3.4. Since we are using TypeScript, we need to explicitly define the type of the wrapper’s props. In the same file, create the PivotProps type, which combines FlexmonsterReact.Pivot props with an optional ref prop:

import Flexmonster from "flexmonster";

type PivotProps = Flexmonster.Params & {
  ref?: React.Ref<FlexmonsterReact.Pivot>;
}

Step 3.5. Update the PivotWrapper component to use the PivotProps type:

const PivotWrapper: React.FC<PivotProps> = ({ ref, ...fmConfigs}) => {
  // The implementation remains the same as in Step 3.3
}

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

"use client"
import dynamic from "next/dynamic";

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

The ssr: false config ensures that Flexmonster is loaded only when the page is rendered on the client side. Learn more about dynamic imports in Next.js.

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

export default function App() {
  return (
    <main>
      <FlexmonsterPivot
        toolbar={true}
      />
    </main>
  )
}

FlexmonsterPivot 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 run dev

Open your project in the browser to see the result.

Usage examples

We prepared the following examples of Flexmonster usage: