Creating a Next.js Application Using Syncfusion® Components

18 Nov 20184 minutes to read

This section provides a step-by-step guide for setting up a Next.js application and integrating the React File Manager component.

What is Next.js?

Next.js is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web applications. It provides features such as server-side rendering, automatic code splitting, routing, and API routes, making it an excellent choice for building modern web applications.

Prerequisites

Before starting with Next.js, ensure the following prerequisites are met:

  • Node.js 16.8 or later (verify your installed version using node --version).
  • A compatible operating system: macOS, Windows, or Linux.

Create a Next.js application

To create a new Next.js application, use one of the commands that are specific to either NPM or Yarn.

npx create-next-app@latest
yarn create next-app

Using one of the above commands will prompt you to set up additional configurations for the project as below:

1.Define the project name: Users can specify the name of the project directly. Let’s specify the name of the project as ej2-nextjs-file-manager.

√ What is your project named? » ej2-nextjs-file-manager

2.Select the required packages.

√ What is your project named? ... ej2-nextjs-file-manager
? Would you like to use the recommended Next.js defaults?
>   Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router
    No, reuse previous settings
    No, customize settings

3.Once you have completed the above-mentioned steps to create ej2-nextjs-file-manager, navigate to the directory using the below command:

cd ej2-nextjs-file-manager

The application is ready to run with default settings. Now, let’s add Syncfusion® components to the project.

Install Syncfusion® React packages

Syncfusion® React component packages are available at npmjs.com. To use Syncfusion® React components in the project, install the corresponding npm package.

Here, the React File Manager component is used as an example. To install the React File Manager component in the project, use the following command:

npm install @syncfusion/ej2-react-filemanager --save
yarn add @syncfusion/ej2-react-filemanager

Import Syncfusion® CSS styles

Themes for Syncfusion® File Manager component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Tailwind 3 theme package using the following command:

npm install @syncfusion/ej2-tailwind3-theme --save

Then add the following CSS reference to the src/app/globals.css file:

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css";

To know more about built-in themes and CSS reference for individual components, refer to the themes section.

Add Syncfusion® React component

Follow the below steps to add the React File Manager component to the Next.js project:

1.Define the File Manager component in the app/page.tsx file, as shown below:

To enable file operation functionality in the File Manager, configure the url property within the ajaxSettings. This URL handles the file operation requests from the server.

'use client'
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';

function App() {
  let hostUrl: string = "https://physical-service.syncfusion.com/";
  let ajaxSettings: object = {
    url: hostUrl + "api/FileManager/FileOperations",
    getImageUrl: hostUrl + "api/FileManager/GetImage"
  };

  return (
    <div className="control-section">
      <FileManagerComponent id="file" view="LargeIcons" ajaxSettings={ajaxSettings} >
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </div>
  );
}
export default App;

Server-side setup

The sample uses https://physical-service.syncfusion.com/ as the url endpoint in ajaxSettings.

To use your own files, host a File Manager service and replace the url value with your service endpoint. See the File System Provider documentation for setup details.

Run the application

To run the application, use the following command:

npm run dev
yarn run dev

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

View the NEXT.js File Manager sample in the GitHub repository.