Fast Refresh falls back to a full reload when Chinese characters appear because the Turbopack development pipeline misclassifies the file update as unrecoverable.

In this issue, running next dev –turbo and editing a client component containing Chinese text causes Fast Refresh to stop behaving like a hot update and instead reload the whole page. The practical fix is to avoid the buggy code path in development, verify the file encoding is clean UTF-8, and use the stable webpack dev server until the underlying Turbopack parser and invalidation behavior are corrected.

Understanding the Root Cause

This bug shows up specifically when three conditions overlap:

1. You are using Next.js development mode with –turbo.
2. The edited file is a client component.
3. The module content includes Chinese characters or other non-ASCII text that passes through the hot-update pipeline.

Normally, Fast Refresh preserves component state by patching only the changed module. For that to work, Next.js must determine that the edit is safe for Hot Module Replacement. With Turbopack enabled, the changed source file is parsed, transformed, and invalidated through a newer development bundling pipeline. In this issue, Chinese characters trigger a failure in that update path, so the runtime treats the change as incompatible with incremental refresh.

When that happens, the browser console or terminal may not always show a fatal syntax error, but the dev server still decides the update cannot be applied safely. The fallback behavior is a full reload, which is why local component state is lost after every edit.

Technically, this is not the expected behavior of your component code itself. It is a dev-server bundling bug tied to Turbopack’s handling of source updates involving multibyte characters, file hashing, transform output, or refresh boundary analysis. The same component often works correctly when started with the standard webpack-based next dev.

Step-by-Step Solution

The most reliable workaround is to stop using Turbopack for this project until the issue is fixed upstream.

1. Reproduce and confirm the issue is Turbopack-specific

If your app currently starts with Turbopack, it probably uses a script like this:

"scripts": {
  "dev": "next dev --turbo"
}

Run it:

npm run dev

Edit a client component containing Chinese text, for example:

'use client'

import { useState } from 'react'

export default function Demo() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>你好，世界</p>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </div>
  )
}

If every edit triggers a full reload instead of preserving state, switch to webpack-based dev mode to verify the root problem.

2. Remove –turbo from the dev script

"scripts": {
  "dev": "next dev"
}

Then restart the server:

npm run dev

This is the primary fix for day-to-day development. In most affected setups, Fast Refresh works normally again once Turbopack is disabled.

3. Make sure the source file is saved as UTF-8

Although the core issue is in the dev pipeline, you should still eliminate encoding inconsistencies. Save the file as UTF-8 without unusual byte order markers if your editor supports that option.

Example checks:

• In VS Code, verify the encoding from the status bar and resave as UTF-8 if needed.
• Avoid copy-pasting text from rich editors that may insert hidden Unicode characters.
• Keep line endings consistent across the project.

4. Confirm the component is a valid refresh boundary

Some edits always trigger reloads, regardless of language content. Make sure your file is a straightforward client component and not mixing exports that break refresh boundaries.

A safe example:

'use client'

export default function Greeting() {
  return <p>你好</p>
}

A riskier pattern:

'use client'

export const dynamic = 'force-dynamic'

export default function Greeting() {
  return <p>你好</p>
}

If the file combines component exports with framework-specific metadata or server-only logic, Fast Refresh may legitimately bail out.

5. Clear the build cache after changing dev mode

If behavior persists, remove the local Next.js cache and restart:

rm -rf .next
npm run dev

On Windows PowerShell:

Remove-Item -Recurse -Force .next
npm run dev

6. Track the upstream fix

Because this is an issue in the development toolchain, the long-term solution is to upgrade once the relevant patch lands in Next.js or Turbopack. Watch the original reproduction linked in the issue repository and test new canary releases before re-enabling Turbopack in your normal workflow.

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

After upgrading, try Turbopack again:

npm run dev -- --turbo

If the issue disappears, you can restore the original script.

Common Edge Cases

1. It still full reloads even without Chinese characters

That usually means the problem is not character-specific anymore. Check for:

• Files exporting non-component values that break refresh boundaries.
• Syntax or type errors hidden behind editor integrations.
• Server component and client component logic mixed in the same file.

2. Only one editor reproduces the problem

Your editor may be inserting hidden Unicode marks, smart punctuation, or a BOM. Compare file bytes by recreating the component manually in a clean file and saving it explicitly as UTF-8.

3. The browser refreshes only after editing certain strings

That can happen when a particular character sequence exercises a parser edge case, especially under experimental tooling. Test with simplified text such as 你好, then incrementally add the original content back.

4. Fast Refresh breaks after upgrading Next.js

Canary and experimental builds may shift behavior. If a previously fixed setup regresses, lock your version temporarily and compare with a minimal reproduction before upgrading further.

5. State resets even though no full browser reload is visible

That can still be a failed refresh boundary rather than a literal page refresh. Check the terminal and browser console for HMR warnings and verify that the edited module exports only what Fast Refresh expects.

FAQ

Does this mean Chinese characters are unsupported in Next.js?

No. Chinese text is fully valid in Next.js applications. The bug is specific to the Turbopack development refresh pipeline, not to rendering internationalized text in production.

Why does it work with next dev but fail with next dev –turbo?

Because those commands use different bundling pipelines in development. The standard dev server uses the mature webpack path, while Turbopack uses a newer implementation that can still have edge-case bugs in module invalidation and refresh handling.

Should I avoid Turbopack completely?

Not necessarily. Turbopack can still be useful for testing and benchmarking, but for teams affected by this issue, the safest approach is to use standard next dev for daily development until an upstream fix is confirmed.

The shortest path to a stable workflow is simple: disable Turbopack in development, keep files in UTF-8, verify valid client component boundaries, and upgrade once the framework ships a fix.