Where should the MUI X Pro license key be installed?

Question

I have a next app and recently bought a license for MUI X. Where is the appropriate place to place the following setter for the license info? Does it have to be in the location of the component which uses it, in which case the key is available for the client browser to view?

import { LicenseInfo } from '@mui/x-data-grid-pro';

LicenseInfo.setLicenseKey(
  'x0jTPl0USVkVZV0SsMjM1kDNyADM5cjM2ETPZJVSQhVRsIDN0YTM6IVREJ1T0b9586ef25c9853decfa7709eee27a1e',
);

Answer 1

Where is the appropriate place to place the following setter for the license info? Does it have to be in the location of the component which uses it

You can set the license anywhere you wish in your application. Only make sure that you set the license key before your render the first component.

in which case the key is available for the client browser to view?

Correct.

Note that the license key is only meant as a reminder for developers to help know when they are not licensed or using an outdated license. More details at https://mui.com/x/introduction/licensing/.

Answer 2

To prevent expose your private license key, my suggestion would be to include it into your .env file, which must be located in the root directory of your application.

For example:

NEXT_PUBLIC_MUI_LICENSE_KEY=yourLicenseKeyMustBeHere

Note that the name starts with NEXT_PUBLIC, which allows to expose that environment variable to your Next.js application without further configuration (source: Next.js docs).

Then you only need to access that environment variable with JavaScript and pass it to the MUI license key setter like this:

import { LicenseInfo } from '@mui/x-data-grid-pro';

LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_API_URL);