Using KendoReact (Grid) with Next.js Static Site Generation (SSG)

[Erik]

I'm generating a static site with Next.js. When I do so, I get the "No valid license" message on the page with the Grid. I have a valid key, and everything works fine when running the `dev` server. What steps should I take to get this working with SSG?

 

Thanks!

[Wissam]

Hi, Erik,

I believe that you are experiencing this issue when running `npm run build`, and starting the production server using `npm run start`. Can you please confirm if this is correct?

Basically, there are no additional steps to make the licensing work in this case. Therefore, could you please send me sample project where this issue is reproduced so that I can test it further? I could not reproduce it on my side.

Regards,
Wissam
Progress Telerik

[Erik]

Hello Wissam,

 

I'm building using the Static Site Generation method. To do so, you add `output: 'export'` to the `next.config.js`. The default output of the build is in `out`.

[Wissam]

Hi, Erik,

Thank you for getting back to me with more information.

I tested the Grid component and the license with a static export. Basically, I first added the license in the `kendo-ui-license.txt` file and placed it in the root folder of the project. I then run `npx kendo-ui-license activate` in order to activate the license.

After that, I updated `next.config.js`, run npm run build, and then I got this messages after running npm run start - `Error: "next start" does not work with "output: export" configuration. Use "npx serve@latest out" instead.`. Therefore, I used `npx serve @latest out`,  and the Grid rendered without a license warning.

Therefore, I can confirm that the license works with a static export, and . On the other hand, I believe that this could be caused by the `.next` folder that stores the licensing information in the cache. I would suggest deleting it and trying to run the build again.

I am sending my test project as an attachment. You can test it by adding the license in `kendo-ui-license.txt`, and when you run the production server, navigate to the `http://localhost:3000/kendo-grid` URL.

On the other hand, if deleting the `.next` folder does not work, I would suggest following the steps below in order to resolve this issue:

1. Download your license key from the following link
   https://www.telerik.com/kendo-react-ui/components/my-license/#toc-download-your-license-key
   
2. Copy the license key file (kendo-ui-license.txt) to the root folder of your application or alternatively copy the contents of the file to the KENDO_UI_LICENSE environment variable.
3. Delete the `node_modules` folder and the `package-lock.json` files
4. Run npm install
5. Run npm install --save @progress/kendo-licensing
6. Run npx kendo-ui-license activate
7. Delete `.next` and the `out` folder
8. Build the project and run the production server again

If the above does not resolve the license warning, could you please send me your licensing file so that I can test it further?

Regards,
Wissam
Progress Telerik

[Erik]

Wissam,

 

Thank you! I ran through the steps you provided and I'm no longer seeing the license warning on the page using Grid.

Again, thank you very much for the help.

 

Best,
Erik

[Wissam]

You are welcome, Erik. I am glad that my reply was helpful to you.