From f826cf1705ca44d01956f268e79a93786531e876 Mon Sep 17 00:00:00 2001
From: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Date: Fri, 7 Feb 2025 15:44:31 +0100
Subject: [PATCH] [docs] Improve license installation page (#16403)

---
 docs/data/introduction/licensing/licensing.md | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/docs/data/introduction/licensing/licensing.md b/docs/data/introduction/licensing/licensing.md
index 58109d7740554..dcbd444f4a77f 100644
--- a/docs/data/introduction/licensing/licensing.md
+++ b/docs/data/introduction/licensing/licensing.md
@@ -145,6 +145,7 @@ You'll only need to do this once in your app.
 ### Where to install the key
 
 You must call the `setLicenseKey()` function before React renders the first component in your app.
+Because the license is verified when the components mount, this function must be called in the browser (which means, for example, that calling it inside `next.config.js` won't work).
 
 Its bundle size is relatively small, so it should be fine to call it in all of your bundles, regardless of whether a commercial MUI X component is rendered.
 
@@ -154,9 +155,9 @@ Its bundle size is relatively small, so it should be fine to call it in all of y
 
 When using Next.js App Router, you have multiple options to install the license key.
 
-1. If your [`layout.js`](https://nextjs.org/docs/app/api-reference/file-conventions/layout) is using `'use client'`, you can set the license key in it:
+1. If your [`layout.tsx`](https://nextjs.org/docs/app/api-reference/file-conventions/layout) is using `'use client'`, you can set the license key in it:
 
-```tsx
+```tsx title="app/layout.tsx"
 'use client';
 import { LicenseInfo } from '@mui/x-license';
 
@@ -165,7 +166,7 @@ LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');
 
 2. Otherwise (**recommended**), you can create a dummy component called `MuiXLicense.tsx`:
 
-```tsx
+```tsx title="app/components/MuiXLicense.tsx"
 'use client';
 import { LicenseInfo } from '@mui/x-license';
 
@@ -176,10 +177,10 @@ export default function MuiXLicense() {
 }
 ```
 
-And render `<MuiXLicense>` in your [`layout.js`](https://nextjs.org/docs/app/api-reference/file-conventions/layout):
+And render `<MuiXLicense>` in your [`layout.tsx`](https://nextjs.org/docs/app/api-reference/file-conventions/layout):
 
-```tsx
-import MuiXLicense from './MuiXLicense';
+```tsx title="app/layout.tsx"
+import MuiXLicense from '@/components/MuiXLicense';
 
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
@@ -195,16 +196,30 @@ export default function RootLayout(props: { children: React.ReactNode }) {
 
 ### Next.js Pages Router
 
-When using Next.js pages, a great place to call `setLicenseKey` is in [`_app.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-app).
+When using Next.js pages, a great place to call `setLicenseKey` is in [`_app.tsx`](https://nextjs.org/docs/pages/building-your-application/routing/custom-app).
 
-```tsx
+```tsx title="pages/_app.tsx"
+import * as React from 'react';
+import type { NextPage } from 'next';
+import type { AppProps } from 'next/app';
 import { LicenseInfo } from '@mui/x-license';
 
 LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');
 
-export default function MyApp(props) {
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: React.ReactElement) => React.ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+export default function MyApp(props: AppPropsWithLayout) {
   const { Component, pageProps } = props;
-  return <Component {...pageProps} />;
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? ((page) => page);
+
+  return getLayout(<Component {...pageProps} />);
 }
 ```
 
@@ -218,7 +233,8 @@ This method is required if your codebase is "source-available" (to hide the lice
 The license key is validated on the server and client-side so you must expose the environment variable to the browser.
 To do this, you need to prefix the environment variables with `NEXT_PUBLIC_` as explained in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser):
 
-```tsx
+```tsx title="app/layout.tsx"
+'use client';
 import { LicenseInfo } from '@mui/x-license';
 
 LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_X_LICENSE_KEY);