Next.js Client Components — Adding Interactivity with "use client"
Component top లో "use client"; అని ఒక్క line rాస్తే chాలు — Next.js aa component (mariyu దాని imports) ni Client Component గా treat చేస్తుంది, browser లో hydrate అయ్యి, interactive గా అవుతుంది:
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}"use client" లేకపోతే, ఈ component useState లేదా onClick వాడలేదు — build error వస్తుంది. Directive ఫైల్ top లో, imports కి mundu ఉండాలి.
Client Components లోనే, browser-only APIs (localStorage, window, navigator) వాడొచ్చు — ఇవి Server Components లో అస్సలు అందుబాటులో ఉండవు:
"use client";
import { useState, useEffect } from "react";
export default function WindowSize() {
const [width, setWidth] = useState(0);
useEffect(() => {
setWidth(window.innerWidth);
}, []);
return <p>Window width: {width}px</p>;
}Important rule: ఒక component "use client" అయితే, దాని లోపల import అయిన అన్ని child components కూడా క్లయింట్ bundle లో భాగం అవుతాయి — even if వాటికి "use client" లేకపోయినా. Kabatti, "use client" boundary ni వీలైనంత లోతుగా, చిన్నగా pెట్టడం best practice — మొత్తం page top level లో pెట్టకూడదు.
Ee pattern lo, kevalం LikeButton matrame client bundle లో ఉంటుంది — migతా page zero-JavaScript గా server meedha render అవుతుంది.
Whole page.tsx top లో 'use client' pెడితే, ఆ page లోపల unna prathi component (data-fetching parts kూడా) client bundle లో చేరిపోతాయి — performance benefit మొత్తం పోతుంది. Interactivity అవసరమైన చిన్న భాగాలనే client components గా extract చేయాలి.
Create a client component ToggleTheme with a button that switches between 'Light' and 'Dark' text using useState.
"use client";
import { useState } from "react";
export default function ToggleTheme() {
const [theme, setTheme] = useState("Light");
return (
<button onClick={() => setTheme(theme === "Light" ? "Dark" : "Light")}>
Current Theme: {theme}
</button>
);
}Q Client Component లో server-only code (DB queries) వాడొచ్చా?
Ledు. Client Component browser లో run అవుతుంది కాబట్టి, database credentials/secrets ఎప్పుడూ అందులో pెట్టకూడదు — security risk.
Q prathi interactive button ki వేరే file compulsory ah?
అవసరం లేదు, kani best practice. చిన్న, focused client components వేరే files లో pెడితే, code reuse చేయడం easy, and client bundle కూడా చిన్నగా ఉంటుంది.
Q Client Component లోపల Server Component import చేయవచ్చా?
Direct ga import చేయలేరు (avి automatically client-rendered అయిపోతాయి). Kani 'children' prop ద్వారా Server Component ni Client Component లోపలికి pass చేయవచ్చు — advanced pattern.