How to Fix: “Received `false` for a non-boolean attribute `locale`” when rendering ``

This warning appears because React ends up seeing locale="false" on a rendered anchor element, and non-boolean DOM attributes do not accept the boolean value false. In this case, <Link locale={false} /> is valid at the Next.js routing API level, but a bug causes that prop to be forwarded to the underlying DOM node during rendering.

Understanding the Root Cause

In Next.js, the locale prop on <Link /> is meant to control internationalized routing. Setting locale={false} tells Next.js not to automatically prepend the active locale to the generated URL.

The warning happens when that internal prop is not fully consumed by the framework and instead gets passed down to the rendered <a> element. React then validates the DOM props and reports:

Received `false` for a non-boolean attribute `locale`

Why is that a problem? Because locale is not a recognized boolean HTML attribute like disabled or checked. When React sees:

<a locale={false}>Click me</a>

it warns that the value type does not match what a plain DOM attribute expects.

So the root cause is not that your usage is conceptually wrong. The issue is a prop forwarding bug in the affected Next.js version, where a framework-specific prop leaks into the DOM.

Step-by-Step Solution

The best fix is to avoid the buggy behavior by using one of the following approaches, depending on your setup.

1. Upgrade Next.js to a version where the bug is fixed

If this issue is tied to a specific release, the first and most reliable solution is to upgrade. Check the relevant Next.js issue tracker and release notes for the fix.

npm install next@latest react@latest react-dom@latest

Or with Yarn:

yarn add next@latest react@latest react-dom@latest

Then restart the dev server:

npm run dev

2. Work around the issue by avoiding locale={false} on the affected Link path

If upgrading is not immediately possible, generate the non-localized URL manually and omit the locale prop entirely.

Instead of this:

import Link from 'next/link'

export default function Page() {
  return <Link href="/about" locale={false}>Click me</Link>
}

use this:

import Link from 'next/link'

export default function Page() {
  return <Link href="/about">Click me</Link>
}

If you specifically need a URL without locale prefix, build that route explicitly in your app logic before passing it to href.

3. If you wrap Link, make sure custom components do not forward locale to DOM elements

A very common variation of this bug happens in design system wrappers. For example, this custom component is unsafe:

function NavLink(props) {
  return <a {...props} />
}

If locale reaches NavLink, it will be spread onto the anchor. Filter it out:

function NavLink({ locale, ...props }) {
  return <a {...props} />
}

Or if you combine it with Next.js Link:

import Link from 'next/link'

function AppLink({ href, children, locale, ...anchorProps }) {
  return (
    <Link href={href} locale={locale}>
      <a {...anchorProps}>{children}</a>
    </Link>
  )
}

The key rule is simple: framework-only props should never be blindly spread onto native DOM elements.

4. Verify the fix in development

After applying the change:

npm run dev

1. Open the page.
2. Click the link that previously triggered the warning.
3. Check the browser console.
4. Confirm the warning no longer appears.

If the warning remains, inspect your rendered component tree and look for a custom wrapper that still forwards locale to <a> or another DOM element.

Common Edge Cases

Custom link wrappers

If your app uses a shared navigation component, the warning may come from that wrapper rather than from Next.js directly. Any code using {...props} on an anchor is worth checking.

Mixing App Router and Pages Router patterns

Some projects blend older and newer Link component usage patterns. If a wrapper was written for a previous API shape, props like locale, prefetch, or replace may be forwarded incorrectly.

Server and client rendering differences

You may only notice the warning during development mode. React emits extra diagnostics in dev, while production may appear to work even though the underlying prop handling is still wrong.

Other non-boolean attribute warnings

If you see similar messages for props such as prefetch, replace, or custom flags, the diagnosis is usually the same: a non-DOM prop is leaking into a native element.

Locale-disabled routes with middleware or rewrites

If you remove locale={false} as a workaround, make sure your middleware, rewrites, or manual route generation still produce the intended URL structure. Otherwise, navigation behavior may change even though the warning disappears.

FAQ

Is locale={false} supposed to be valid in Next.js?

Yes. In Next.js routing, locale={false} is a valid API usage for disabling automatic locale prefixing on that specific link. The warning is caused by incorrect prop handling during rendering, not by misuse of the public API.

Why does the app still navigate correctly even though React shows a warning?

Because the navigation logic can still work while React warns about invalid DOM props. The router may resolve the link correctly, but React still flags the leaked attribute on the underlying HTML element.

Should I ignore this warning if everything works?

No. While it may not break navigation immediately, it signals a rendering contract issue. Fixing it prevents noisy logs, avoids future compatibility problems, and ensures your components do not pass invalid attributes to the DOM.

The practical takeaway is this: use a fixed Next.js version if available, and if not, prevent locale from reaching native DOM elements. That removes the React warning and keeps your localized routing behavior predictable.