Getting Started with a Next.js App using React Components

This guide walks you through setting up a Next.js application and integrating Syncfusion^® React components.

What is Next.js?

Next.js is a React framework that simplifies building fast, SEO-friendly, and user-centric web applications. It offers features like server-side rendering, automatic code splitting, routing, and API routes, making it ideal for modern web applications.

Prerequisites

Before getting started with the Next.js application, ensure the following prerequisites are met:

• Node.js 18.17 or higher.

• Compatibility with macOS, Windows, or Linux.

Create a Next.js application

To create a new Next.js app, use either an NPM or Yarn command:

npx create-next-app@latest

After running the command, you'll be prompted to configure the project:

1.Define the project name: Let's specify the name of the project as nextjs-demo.

√ What is your project named? » nextjs-demo

2.Select the required packages.

? Would you like to use the recommended Next.js defaults?
> 'Yes, use recommended defaults'
    No, reuse previous settings
    No, customize settings
Creating a new Next.js app in D:\nextjs-demo.

3.Once set up, navigate to the project directory:

cd nextjs-demo

The application is now ready with default settings. Now, let's add Syncfusion^® components to the project.

Install Syncfusion^® React packages

Syncfusion^® React components are available on npmjs.com. To use the React Scheduler component, install the @syncfusion/react-Scheduler package:

npm install @syncfusion/react-scheduler --save

Import Syncfusion^® CSS styles

Syncfusion^® React components are styled using built-in themes. Import the Material theme into app/globals.css, and remove the existing styles in that file:

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import "../node_modules/@syncfusion/react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/react-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/react-popups/styles/material.css";
@import "../node_modules/@syncfusion/react-inputs/styles/material.css";
@import "../node_modules/@syncfusion/react-navigations/styles/material.css";
@import "../node_modules/@syncfusion/react-calendars/styles/material.css";
@import "../node_modules/@syncfusion/react-scheduler/styles/material.css";

For more on themes and individual component CSS, see the themes section.

Add Syncfusion^® React component

To integrate the React Scheduler component:

1.Import the Scheduler component in app/page.tsx:

import { Scheduler } from '@syncfusion/react-scheduler';

2.Add the Scheduler component to the application. To display events in the Scheduler, import a structured JSON dataset and store it in React state, then assign this data to the eventSettings property. The Scheduler will render these events across Day, Week, Work Week, and Month views.

'use client'
import { DayView, WeekView, WorkWeekView, MonthView, EventSettings, Scheduler } from '@syncfusion/react-scheduler';
import { meetingEvents } from './dataSource';

export default function Home() {
    const [scheduleData, setScheduleData] = useState(meetingEvents);
    const eventSettings: EventSettings = { dataSource: scheduleData };
  return (
        <Scheduler height='34.375rem' eventSettings={eventSettings} defaultSelectedDate={new Date(2025, 9, 30)} startHour='08:00'>
            <DayView />
            <WeekView />
            <WorkWeekView />
            <MonthView />
        </Scheduler>
  )
}

Run the application

Start the application with:

npm run dev

The output will appear as follows:

To learn more about the functionality of the Scheduler component, refer to the documentation.

See also

• Getting Started with Syncfusion^® React UI Component using Vite