DHTMLX React Gantt Quick Start with Next.js

This project demonstrates how to integrate the DHTMLX React Gantt component with Next.js framework. Built with React 19+ and Next.js 16+, this demo provides a solid foundation for building powerful project management applications with full TypeScript support for enhanced code quality and maintainability.

Features:

• Powerful Gantt chart UI for project planning and task management.

• Next.js App Router integration.

• React component driven approach with props controlling Gantt configuration.

• Support for multiple time scales (day, month, year) for flexible project visualization.

• Interactive drag-and-drop functionality for task management.

• Tailwind CSS integration for modern, responsive styling.

• Strong TypeScript support for type-safe usage.

Project Structure:

dhx-react-gantt-nextjs-demo/
├── app/
│   ├── page.tsx             # Main page with Gantt chart integration
│   ├── layout.tsx           # Root layout with global styles
│   └── globals.css          # Global styles and Tailwind configuration
├── components/
│   └── Gantt/
│       └── Gantt.tsx        # Client-side Gantt chart component
├── data/
│   └── demoData.ts          # Sample tasks and links data
├── next.config.ts           # Next.js configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Project dependencies

How to install using npm/yarn

Install dependencies:

npm install

or

yarn

Run the demo on the local server and explore it

npm run dev

or

yarn dev

License

Source code in this repo is released under the MIT License.

DHTMLX React Gantt is a commercial library - use under a valid DHTMLX license or evaluation agreement.

Useful links

DHTMLX React Gantt product page

DHTMLX Gantt product page

Documentation

React Gantt Documentation

Next.js Documentation

Blog

Forum