use client with ts file

[winged kite]

Can I use "use client" in ts extension file? such hooks

[fringe smelt]

Hi @winged kite. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes, you can absolutely use the "use client" directive in TypeScript files (.ts or .tsx extensions) in Next.js. This is fully supported and is a common practice when creating client components with TypeScript.

Here's how you would use it in a TypeScript file with hooks:

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

The "use client" directive must be placed at the very top of the file, before any imports, as shown in the example above. This tells Next.js that this component and all its imported dependencies should be part of the client bundle Next.js documentation on use client directive.

This approach is particularly useful when you need to use React hooks like useState, useEffect, or event handlers that require client-side JavaScript.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: