The code returns the following error:
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
<AppDevOverlayErrorBoundary globalError={[...]}>
<ReplaySsrOnlyErrors>
<DevRootHTTPAccessFallbackBoundary>
<HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
<HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
<RedirectBoundary>
<RedirectErrorBoundary router={{...}}>
<Head>
<__next_root_layout_boundary__>
<SegmentViewNode type="layout" pagePath="layout.tsx">
<SegmentTrieNode>
<link>
<script>
<script>
<RootLayout>
<html lang="en">
<body
className="font-sans antialiased"
- __processed_f76bbf6a-19b5-4692-828f-363392e7ab4c__="true"
- bis_status="ok"
- bis_frame_id="196"
>
...
at body (<anonymous>)
at RootLayout (app/layout.tsx:39:7)
37 | return (
38 | <html lang="en">
> 39 | <body className="font-sans antialiased">
| ^
40 | {children}
41 | <Analytics />
42 | </body> (<anonymous>)
Revise the code to address the error.
Lỗi hydration này không phải do code của tôi gây ra. Nhìn vào thông báo lỗi, các thuộc tính bị khác biệt là:
__processed_f76bbf6a-19b5-4692-828f-363392e7ab4c__bis_statusbis_frame_idĐây là các thuộc tính được thêm vào bởi browser extension (có vẻ là extension quản lý mật khẩu hoặc form auto-fill). Đây không phải lỗi trong code - React chỉ đang cảnh báo rằng HTML từ server khác với HTML sau khi browser extension đã sửa đổi.
Code của tôi không có vấn đề gì:
typeof window !== 'undefined'Date.now() hay Math.random()Tuy nhiên, để tránh warning này hiển thị trong development, tôi có thể thêm suppressHydrationWarning vào thẻ body:
Đã thêm suppressHydrationWarning vào thẻ <body>. Lỗi hydration này xảy ra do browser extension của bạn (có thể là trình quản lý mật khẩu) đang thêm các thuộc tính vào DOM trước khi React hydrate. Đây không phải lỗi code mà là hành vi bình thường khi có extension can thiệp vào trang. Thuộc tính suppressHydrationWarning sẽ ngăn React hiển thị cảnh báo này.
Tôi sẽ nâng cấp landing page với thiết kế đẹp hơn dựa trên file HTML tham khảo - thêm hiệu ứng gradient aurora, particles động, và hình ảnh pet dễ thương.
Tôi đã nâng cấp toàn bộ landing page với thiết kế đẹp hơn nhiều:
Cải tiến hình ảnh:
Pet mascot:
Nút và typography:
You can send messages while the preview loads