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
```

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: