Sample Next.js project

This guide will help you run a sample Next.js project from GitHub. It is a ready-to-use application with several live Flexmonster demos. Get the sample project to try out Flexmonster.

To integrate Flexmonster into an existing Next.js project, see integration with Next.js.

Prerequisites

• Node.js 20.9.0 or later
• Flexmonster CLI
  Install it with the following command:

  npm install -g flexmonster-cli

Step 1. Get the sample Next.js project

Download the sample project with the flexmonster create command:

flexmonster create react nextjs -r

This command downloads the Next.js + TypeScript project from GitHub and launches it in the browser. To shut down the project from the console, press Ctrl + C (Control + C on macOS).

The sample project is located inside the flexmonster-react-nextjs-project/ folder in your current working directory.

Step 2. Check out the project’s structure

Our sample project was created using create-next-app, so most of the project’s files are typical of projects created this way.

Now take a look at the files specific to our sample project:

• src/UIElements/ — routes, menus, and toggle elements used in the sample project.
• src/app/ — demos that cover different aspects of Flexmonster usage in React:
  • Creating the pivot table (pivot-table-demo/page.tsx)
  • Handling events (handling-events/page.tsx)
  • Using API calls (using-api-calls/page.tsx)
  • Updating data at runtime (updating-data/page.tsx)
  • Customizing the Toolbar (customizing-toolbar/page.tsx)
  • Customizing the grid (customizing-grid/page.tsx)
  • Integrating with Highcharts (with-highcharts/page.tsx)
  • Integrating with amCharts (with-amcharts/page.tsx — amCharts 5; with-amcharts4/page.tsx — amCharts 4)

Learn more about how these demos work: Usage examples.

Next steps

Integrate into an existing Next.js project or adjust the sample project to your needs:

• Connect to your data source
• Configure Flexmonster
• Save your configurations
• Apply a CSS theme
• Integrate with charting libraries