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

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

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

? 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

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 Message component, install the @syncfusion/react-notifications package:

npm install @syncfusion/react-notifications --save

npm install @syncfusion/react-notifications --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-notifications/styles/material.css';

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-notifications/styles/material.css';

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

Add Syncfusion^® React component

To integrate the React Message component:

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

import { Message } from '@syncfusion/react-notifications';

import { Message } from '@syncfusion/react-notifications';

2.Then, add the Message component in the application using the following code sample.

'use client'
import { Message, Severity } from '@syncfusion/react-notifications';

export default function Home() {
  return (
    <div className="component-section">
        <Message severity={Severity.Success}>Your message has been sent successfully</Message>
    </div>
  )
}

'use client'
import { Message, Severity } from '@syncfusion/react-notifications';

export default function Home() {
  return (
    <div className="component-section">
        <Message severity={Severity.Success}>Your message has been sent successfully</Message>
    </div>
  )
}

Run the application

Start the application with:

npm run dev

npm run dev

The output will appear as follows:

Your message has been sent successfully

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