# How to add a "Made by" badge to Next.js

In a Next.js app, load the badge from your root layout so it appears on every route and survives client-side navigation.

## Steps

1. Create your badge in the Maker Badge editor, choose "Updatable" and publish it to get your badge id.
2. Open your root layout (app/layout.tsx with the App Router, or pages/_app.tsx with the Pages Router).
3. Add the badge script with next/script as shown below.
4. Deploy. The badge appears on every page.

## app/layout.tsx

```tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://madebybadge.netlify.app/v1/badge.js" data-badge="YOUR_BADGE_ID" strategy="afterInteractive" />
      </body>
    </html>
  );
}
```

## Good to know

- The badge renders outside your React tree, so it has no effect on hydration or your bundle size.

Create a badge: https://madebybadge.netlify.app/create · For AI agents: https://madebybadge.netlify.app/agents.md