> ## Documentation Index
> Fetch the complete documentation index at: https://docs.audyr.com/llms.txt
> Use this file to discover all available pages before exploring further.
# React / Next.js
> Add the Audyr widget to React and Next.js applications.
## React (Vite or Create React App)
Add the script to your `index.html` file. This loads the widget on every page of your app.
```html title="index.html (Vite)" theme={null}
```
```html title="public/index.html (Create React App)" theme={null}
```
## Next.js — App Router
Use the `next/script` component in your root layout. The `afterInteractive` strategy loads the widget once the page is interactive, so it won't block rendering.
```tsx title="app/layout.tsx" theme={null}
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
## Next.js — Pages Router
Add the widget to `_app.tsx` using `next/script`. It will render on every page.
```tsx title="pages/_app.tsx" theme={null}
import Script from 'next/script'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
)
}
```
Always use `next/script` rather than a plain `