How to integrate syncfusion correctly to next.js

Hello together,

as a developer I´m very happy found syncfusion libraries. They are making my live much easier.

During my first tries I´ve followed the guides and created integrated a GridComponent to one Page of my next.js project.
After build I´ve figured out that the performance measurement by google lighthouse became very low (around 80). 

Do you have some tips for me how to increase the performance again? 

On the documentation in the installation section is described in step 3 how to map the syncfusion package in the system.config.js. Is there an similar approach for a next.js project? 

Thanks a lot,
Fabian 

1 Reply 1 reply marked as answer

PG Praveenkumar Gajendiran Syncfusion Team April 8, 2021 12:52 PM UTC

Hi Ebuqube,

Greetings from Syncfusion support.

Thanks for the appreciation, we are glad that you are happy with our controls.

Query1: “Do you have some tips for me how to increase the performance again?”

Before proceeding with your query, We would like to inform you that by default in EJ2 Grid, the Grid will be rendered with only the basic features module(i.e, when the GridComponent alone is injected without any additional services the generated file size will be less). So we suggest use react Grid packages based on required module injections(which have separate dependent scripts and features). Refer the below react documentation for more information.

Module injection:
https://ej2.syncfusion.com/react/documentation/grid/getting-started/#module-injection 

The list of feature modules that can be injected in the Grid can be checked from the below documentation link, 


So we need the following details to validate the reported query at our end. kindly share the following details.  

  1. Share your complete Grid rendering code.
  2. If possible share us a simple sample to replicate the problem.
  3. Syncfusion package version used.

Please get back to us with the requested details which will be helpful for us to validate the reported issue at our end and provide solution as early as possible 

Query2: “On the documentation in the installation section is described in step 3 how to map the syncfusion package in the system.config.js. Is there an similar approach for a next.js project?”

Syncfusion React components can be used with NextJs Framework which uses Webpack bundler for compiling the project. So, we are not able to use “system.config.js” like package reference in NextJs. Refer the below react documentation for more information. 


Marked as answer
Loader.
Up arrow icon