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. 1

   Create your badge in the Maker Badge editor, choose "Updatable" and publish it to get your badge id.

2. 2

   Open your root layout (app/layout.tsx with the App Router, or pages/_app.tsx with the Pages Router).

3. 3

   Add the badge script with next/script as shown below.

4. 4

   Deploy. The badge appears on every page.

app/layout.tsx

Replace YOUR_BADGE_ID with the id from your updatable badge code.

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.

Not showing up?

• Check the published site, not an editor preview: most builders only run custom code on the live site.
• Make sure the whole snippet was pasted, including the closing </script> tag.
• Use "Test page" in the Maker Badge code dialog to confirm the badge itself works.