Skip to content

Next.js integration

Add a Verified Trust Badge to Your Next.js Site

On a Next.js site the badge belongs in the shared footer component of your App Router layout, so every page sends it in the HTML. The details matter here. Use a plain img element, not next/image, and render it on the server, because our crawler reads the HTML your server sends and never runs JavaScript. This guide shows a short JSX example, the page source test that proves it works, and the build and cache issues that delay a pass.

RequirementYou need access to your Next.js code and the ability to deploy it, using a footer that renders on the server.

  1. Step 1

    Find the shared footer

    Open the layout or footer component your whole site uses, usually app/layout.tsx or a Footer component imported by it. Put the badge there so every route includes it. A server component works, and so does any component that renders on the server. Do not add it inside a component that only draws after the page loads in the browser, because the crawler would not see it. The page you gave Entruv should include this footer.

  2. Step 2

    Add the anchor and a plain img

    Add the badge as plain HTML in your footer. The raw version is: <a href="https://entruv.com/p/YOUR-SLUG" target="_blank" rel="noopener"><img src="https://entruv.com/api/badge/YOUR-SLUG.svg" alt="Listed on Entruv" height="44" style="height:44px;width:auto;max-width:100%" /></a> Copy the ready made version from your Entruv owner panel, which already has your real slug. In JSX, write class and style the React way, and keep a normal img element. Do not add rel nofollow. Save, commit and deploy. The JSX example in the list below shows the exact shape.

  3. Step 3

    Deploy, then verify your domain

    After the deploy finishes, open your live page, press the browser's View page source and search for entruv.com. Do not rely on the inspector, which shows the page after JavaScript runs. Once the anchor is in the source, open your Entruv private link and press Verify Domain & Publish. Success looks like a confirmation on the owner panel and a public record page that no longer returns 404.

The one line you paste

<a href="https://entruv.com/p/YOUR-SLUG" target="_blank" rel="noopener"><img src="https://entruv.com/api/badge/YOUR-SLUG.svg" alt="Listed on Entruv" height="44" style="height:44px;width:auto;max-width:100%" /></a>

Copy the ready made version from your owner panel. It already has your real address in place of YOUR-SLUG.

If the check fails on Next.js

  • Use a plain img, not next/image. The default image optimizer rewrites src to /_next/image?url=... and the crawler needs the address to be exactly https://entruv.com/api/badge/YOUR-SLUG.svg. If you must use next/image, set unoptimized. A safe JSX version is: <a href="https://entruv.com/p/YOUR-SLUG" target="_blank" rel="noopener"><img src="https://entruv.com/api/badge/YOUR-SLUG.svg" alt="Listed on Entruv" height={44} style={{ height: 44, width: "auto", maxWidth: "100%" }} /></a>
  • Do not render the badge after mount with useEffect or a client only component. The crawler does not run JavaScript, so a badge that appears only in the browser is invisible to it.
  • Never add rel nofollow, sponsored or ugc to the badge link. Those links are rejected. Keep rel as noopener.
  • On static export or ISR, the page must be rebuilt or revalidated before the crawler sees the new footer. Trigger a fresh build or revalidate the route, then verify.
  • A footer that sits behind a cookie wall, a login check or a redirect is not what the crawler loads. Make sure the public home page returns the footer on a plain request.

Why next/image breaks the check

next/image is great for your own photos, but its default behaviour is to serve a resized copy through its optimizer. The src in the HTML becomes a /_next/image address with a url parameter, not the original image address. Our crawler matches the badge by its exact image address, so the rewritten src does not match.

The badge is a small SVG that Entruv already serves at the right size, so optimising it gains nothing. Skipping the optimizer here costs you no speed. A plain img keeps the address exact and also makes the gold badge swap work, because the same address returns the new image after payment.

Prove the badge is in the HTML

The inspector and View page source answer different questions. The inspector shows the live document after your JavaScript has run. View page source shows what the server sent. The crawler sees the second. Open the live page, use View page source, and search for entruv.com.

If you find the anchor there, you are done. If you only find it in the inspector, it is added on the client, and you need to move it to a server rendered component. A common cause is a footer file marked as a client component that waits for the browser before drawing. You can also run curl against your page address from a terminal and look for the same anchor in the output.

Questions

Can I use next/image for the badge?

Only with unoptimized set, so the src stays exactly the Entruv address. A plain img element is simpler and safer.

Does it work with the Pages Router?

Yes. Put the anchor and img in the footer your pages share, such as in _app or a layout component, as long as the HTML is sent by the server.

My site is a static export. What do I do?

Rebuild and redeploy after adding the footer. The crawler reads the files you have deployed, so the new footer must be in them.

Does paying change my code?

No. The same snippet turns into the gold badge by itself after the one time $39 payment. The payment is final.

Keep reading

Get on the record

About a minute, no account and no password. Publishing is free once your badge is on your site. Upgrade once for $39 when you want the gold credential.

Claim your record