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 16 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.

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.

What’s next?

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