Why does Chrome autofill not work on Next.js?

Next.js has two compounding problems: React ignores Chrome's direct DOM write because it never receives the input event, and hydration can overwrite any values Chrome filled before the JavaScript bundle hydrated the page.

Why does autofill work locally but fail in production on Next.js?

Local development reloads pages more frequently via hot module replacement, so Chrome's scanner runs more often. Production users navigate via client-side routing and never trigger a full page load after the first route, so Chrome's scanner never fires on subsequent forms.

Does adding autocomplete attributes fix Next.js autofill?

It helps the browser and assistive tech identify the field per WCAG 1.3.5, but it does not fix hydration timing or the missing input event. The attribute alone does not resolve either Next.js-specific failure mode.

Do I need to write code to use QuickForm?

No. Record Mode captures your keystrokes as you fill the form once, then replays them with the events React expects, timed after hydration. No native-setter code, no useEffect guards, no config files.

Chrome Autofill Not Working on Next.js? How to Fix It

Next.js is built on React, which reached 82% usage among developers in the State of JS 2024 survey (State of JS, "State of JavaScript 2024: Front-end Frameworks"), and Next.js is where most production React applications actually live. It powers a large share of the web's login pages, checkout flows, and signup forms, which is precisely where Chrome's autofill matters most. Yet Next.js introduces two failure modes that plain React does not have: React hydration that resets values Chrome filled before the JavaScript bundle landed, and client-side navigation that never fires the page-load events Chrome's autofill scanner needs.

Key Takeaways

Chrome writes a field's .value directly; React (and therefore Next.js) only updates state from a dispatched input event, so the direct write is invisible to the framework.

Next.js layered on React 82% usage (State of JS 2024) means this hits an enormous share of production web apps.

You must fill forms after hydration completes on Next.js, or the fields are not yet interactive and any fill is overwritten by React reconciliation.

The autocomplete attribute helps accessibility and field matching but does not change which event Chrome fires after filling.

Across 93 million tracked sessions, the average form completes just 51.7% of the time (Zuko, "25 Conversion Rate Statistics You Need"). Broken autofill is a direct driver of that gap.

Why does Chrome autofill fail on Next.js?

The failure has two layers, one shared with all React apps and one unique to Next.js. The shared layer is the same event mismatch described in the React autofill post: Chrome writes to .value without dispatching the input event React listens for, so React's state never updates.

The Next.js-specific layer is hydration timing. When a page is server-rendered with empty inputs and then hydrated, React's reconciliation runs against the server-rendered HTML. If Chrome fills those inputs during the SSR-to-hydration window, React's reconciliation overwrites them. The form resets to empty after hydration completes, and the user sees their autofill data vanish. The second Next.js-specific problem is client-side navigation: <Link> transitions do not fire DOMContentLoaded or load, so Chrome's autofill scanner never runs on forms loaded during route changes.

How do you fix Next.js autofill in code?

The fix combines the React native-setter pattern with a hydration guard. Always fill forms after hydration, or the inputs are not yet interactive:

const input = document.querySelector("#email")
// React overrides the value setter, so reach the native one:
const nativeSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype, "value").set
nativeSetter.call(input, "[email protected]")
// Now tell React, with the event it actually subscribes to:
input.dispatchEvent(new Event("input", { bubbles: true }))

On Next.js you must run this after hydration or the fields are not interactive yet. Wrap the call in useEffect with an empty dependency array, or guard it behind a mounted state flag. Skip the guard and the value lands in a DOM node that React will overwrite during its first reconciliation pass.

Does the autocomplete attribute fix it?

Not on its own. Adding autocomplete="email" is still worth doing: W3C's WCAG 2.2 criterion 1.3.5 Identify Input Purpose recommends it so assistive tech and password managers can identify the field's purpose, which helps users with cognitive and motor needs (W3C, "Understanding SC 1.3.5: Identify Input Purpose (WCAG 2.2)"). But the attribute only informs the browser what a field is for. It does not change the event Chrome dispatches after filling, and it does nothing about hydration timing, so the core Next.js autofill problems remain.

What does broken Next.js autofill cost your users?

Friction at the form is where conversions die. Across 93 million tracked sessions, Zuko found the average online form completes just 51.7% of the time, and form length is the single reason cited by 27% of people who quit (Zuko, "25 Conversion Rate Statistics You Need", 2025). Next.js powers a disproportionate share of multi-step checkout flows, where the client-side navigation between steps means Chrome's autofill scanner never fires after step one. Every subsequent step becomes manual entry, which is exactly the effort that pushes completion rates below that 51.7% baseline.

The no-code fix: QuickForm Record Mode

Not everyone owns the page, and not every team wants to manage hydration guards across every form in a large Next.js app. A dedicated autofill extension for Next.js does the same job as the snippet above without touching application code. QuickForm's Record Mode captures your real keystrokes once, then replays them after hydration through the same native-setter-plus-input-event path React expects. State updates, validation runs, and the submit button enables, regardless of which router or render strategy the app uses.

Fill Next.js forms in one click, free

No account required. Works in 60 seconds.

Add to Chrome, it's free

50,000+ users · 4.2 stars

Setting it up takes about a minute:

Install QuickForm from the Chrome Web Store (free, no account needed)
Open the Next.js form you want to autofill
Click the QuickForm icon, then enable Record Mode
Fill the form once, normally. QuickForm captures every field
Save the profile and give it a name
Next time, click the profile and the whole form fills in one click, after hydration, using the events React recognises