Skip to content

Commit faf7494

Browse files
committed
add doc for instrumentation client hook
1 parent 03ce7f5 commit faf7494

File tree

1 file changed

+39
-0
lines changed

1 file changed

+39
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: clientInstrumentationHook
3+
description: Enable client-side instrumentation.
4+
version: experimental
5+
---
6+
7+
## Usage
8+
9+
When enabled, Next.js searches for an `instrumentation-client.ts` file at the project root and executes it synchronously before hydration. This file is bundled into the initial JavaScript chunk, allowing you to run analytics or monitoring before any other code executes. The code in this file runs exclusively on the client side and is not executed during server-side rendering (SSR).
10+
11+
**Good to know:**
12+
13+
- Client-side instrumentation increases bundle size and execution time, impacting TTI.
14+
- Running synchronously before hydration, heavy code delays interactivity.
15+
- Keep it minimal to reduce execution lag and download overhead.
16+
- Only include what’s essential before hydration.
17+
18+
```ts filename="next.config.ts" switcher
19+
import type { NextConfig } from 'next'
20+
21+
const nextConfig: NextConfig = {
22+
experimental: {
23+
clientInstrumentationHook: true,
24+
},
25+
}
26+
27+
export default nextConfig
28+
```
29+
30+
```js filename="next.config.js" switcher
31+
/** @type {import('next').NextConfig} */
32+
const nextConfig = {
33+
experimental: {
34+
clientInstrumentationHook: true,
35+
},
36+
}
37+
38+
module.exports = nextConfig
39+
```

0 commit comments

Comments
 (0)