NextJS फ्रेमवर्क में क्लाइंट कंपोनेंट्स
चलिए अब हमारे सर्वर साइड
कंपोनेंट को क्लाइंट साइड में बदलते हैं।
इसके लिए कंपोनेंट फाइल की शुरुआत में
डायरेक्टिव 'use client' लिखेंगे:
'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
अब हमें स्टेट्स उपलब्ध हो जाएंगे,
जो useState के माध्यम से बनाए जाते हैं।
चलिए उदाहरण के लिए एक स्टेट बनाते हैं
और उसकी सामग्री को वर्स्टन में दिखाते हैं:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
दो इनपुट और एक बटन के साथ एक क्लाइंट कंपोनेंट बनाएं। इनपुट में नंबर डाले जाएं। बटन दबाने पर डाले गए नंबरों का योग एक पैराग्राफ में दिखाएं।
डायरेक्टिव 'use client' हटाएं।
सुनिश्चित करें कि इस स्थिति में NextJS
एक एरर दिखाएगा क्योंकि सर्वर कंपोनेंट्स
के अंदर स्टेट्स का उपयोग नहीं किया जा सकता।
