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

1 Answer 172 Views
Grid Licensing
Erik
Top achievements
Rank 1
Erik asked on 17 Jan 2024, 04:18 PM

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!

1 Answer, 1 is accepted

Sort by
0
Wissam
Telerik team
answered on 19 Jan 2024, 12:57 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Erik
Top achievements
Rank 1
commented on 19 Jan 2024, 06:57 PM

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
Telerik team
commented on 23 Jan 2024, 02:10 PM

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
Top achievements
Rank 1
commented on 26 Jan 2024, 04:19 PM

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
Telerik team
commented on 29 Jan 2024, 01:34 PM

You are welcome, Erik. I am glad that my reply was helpful to you.
Tags
Grid Licensing
Asked by
Erik
Top achievements
Rank 1
Answers by
Wissam
Telerik team
Share this question
or