---
title: "Embedding Beamer Script in Next.js"
slug: "embedding-beamer-script-in-next-js"
updated: 2025-10-08T16:41:18Z
published: 2025-10-08T16:41:18Z
canonical: "help.userflow.com/embedding-beamer-script-in-next-js"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://help.userflow.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Embedding Beamer Script in Next.js
Embedding the script in your React application can be done differently based on whether you’re using a vanilla React setup or a Vite + React setup or Nextjs. This guide will help you integrate Beamer with your **Next.js** setup.
Embedding the Beamer script in your Next.js application can be done differently based on whether you’re using the traditional **/pages** directory or the new App Router with the **/app** directory. This guide will help you integrate Beamer with your Next.js project.
### Embedding Beamer Script Without App Router
For a Next.js setup using the traditional `/pages` directory, you need to embed the Beamer script using the `next/script` component in your pages or `_app.js`.
#### Step 1 : Locate to your `_app.js`:
- Open your Next.js project directory.
- Navigate to the `pages` folder.
- If it doesn’t exist, create a new file named `_app.js`.
#### Step 2 : Embed the Beamer Script:
Add the following script tags using the `next/script` component:
```plaintext
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<> );
}
```
#### Step 3 : Save and Run:
- Save the changes to the `_app.js` file.
- Start your Next.js application using `npm run dev` or `yarn dev`.[](//docs/steps-to-inject-user-data-into-beamer-script-in-react)
[Click Here to know about How to Inject User Data into Beamer script in React](/beamer/docs/steps-to-inject-user-data-into-beamer-script-in-react)
### Embedding Beamer Script With App Router
For a Next.js setup using the new App Router with the **/app** directory, you need to embed the Beamer script in the **app/layout.tsx** file.
#### **Step 1. Locate or Create** `layout.tsx`**:**
- Open your Next.js project directory.
- Navigate to the `app` folder.
- If it doesn’t exist, create a new file named `layout.tsx`.
#### Step 2. Embed the Beamer Script:
Add the following script tags using the `next/script` component:
```plaintext
import type { Metadata } from "next";
import Script from "next/script";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
{children} );
}
```
#### Step 3. Save and Run:
- Save the changes to the `layout.tsx` file.
- Start your Next.js application using `npm run dev` or `yarn dev`.
By following these steps, you can effectively embed the Beamer script in your Next.js application, whether you’re using the traditional `/pages` directory or the new App Router with the `/app` directory.[](//docs/steps-to-inject-user-data-into-beamer-script-in-react)
[Click Here to know about How to Inject User Data into Beamer script in React](/beamer/docs/steps-to-inject-user-data-into-beamer-script-in-react)