Next.js 15 फुलस्टैक (App Router + Server Actions) · पाठ

अवस्था को localStorage में स्थायी बनाना

पाठ 4, कुल 4 में से13 चरण

अवस्था को localStorage में स्थायी बनाना, CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 फुलस्टैक (App Router + Server Actions) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्थिति को स्थायी क्यों बनाएँ?

डिफ़ॉल्ट रूप से, रीलोड होने पर React की स्थिति समाप्त हो जाती है। स्थायित्व थीम, कार्ट की सामग्री या ड्राफ़्ट टेक्स्ट जैसे डेटा को ब्राउज़र में सहेजता है, ताकि वह रिफ़्रेश और दोबारा आने पर भी बना रहे।

localStorage से परिचय

localStorage ब्राउज़र का कुंजी-मान भंडार है, जो स्ट्रिंग को अनिश्चित समय तक रखता है। यह समकालिक है और मूल-स्थान तक सीमित रहता है।

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

ऑब्जेक्ट सहेजना

localStorage केवल स्ट्रिंग रखता है, इसलिए सहेजते समय ऑब्जेक्ट को JSON.stringify से और पढ़ते समय JSON.parse से क्रमबद्ध करें।

localStorage.setItem('cart', JSON.stringify({ items: 3 }));
const cart = JSON.parse(localStorage.getItem('cart') || '{}');

SSR की समस्या

Next.js पहले सर्वर पर कॉम्पोनेंट रेंडर करता है, जहाँ window और localStorage मौजूद नहीं होते। रेंडर के दौरान उन तक पहुँचने पर त्रुटि उत्पन्न होती है।

आपको localStorage को केवल ब्राउज़र में कॉम्पोनेंट माउंट होने के बाद ही पढ़ना चाहिए।

useEffect में सुरक्षित रूप से पढ़ना

स्थायी स्थिति को useEffect के अंदर पढ़ें, जो केवल क्लाइंट पर चलता है। सर्वर रेंडर के लिए सुरक्षित डिफ़ॉल्ट से शुरुआत करें।

'use client';
const [theme, setTheme] = useState('light');
useEffect(() => {
  const saved = localStorage.getItem('theme');
  if (saved) setTheme(saved);
}, []);

बदलाव पर लिखना

जब भी स्थिति बदले, किसी अन्य इफ़ेक्ट की मदद से उसे localStorage में वापस समकालित करें।

useEffect(() => {
  localStorage.setItem('theme', theme);
}, [theme]);

हाइड्रेशन असंगति से बचना

यदि सर्वर 'light' रेंडर करता है, लेकिन क्लाइंट तुरंत 'dark' दिखाता है, तो React हाइड्रेशन असंगति की चेतावनी देता है। स्थायी UI को केवल तब रेंडर करें, जब mounted फ़्लैग true हो।

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;

Zustand स्टोर को स्थायी बनाना

Zustand एक persist मिडलवेयर देता है, जो आपके पूरे स्टोर को अपने-आप localStorage में सहेजता है। अपने स्टोर क्रिएटर को इसके साथ रैप करें।

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useCart = create(persist(
  (set) => ({ items: [], add: (i) => set((s) => ({ items: [...s.items, i] })) }),
  { name: 'cart-storage' }
));

क्या स्थायी बनाना है, चुनना

आप शायद ही कभी सब कुछ स्थायी बनाना चाहेंगे। केवल महत्वपूर्ण फ़ील्ड सहेजने के लिए partialize का उपयोग करें और अस्थायी UI स्थिति को मेमोरी में रखें।

persist(storeFn, {
  name: 'cart-storage',
  partialize: (s) => ({ items: s.items })
});

संस्करण और माइग्रेशन

जब आपकी स्थिति का आकार बदलता है, तो version बढ़ाएँ और migrate फ़ंक्शन दें, ताकि पुराना सहेजा हुआ डेटा ऐप को तोड़ने के बजाय अपग्रेड हो जाए।

persist(storeFn, {
  name: 'cart-storage',
  version: 2,
  migrate: (old, from) => ({ ...old, currency: 'USD' })
});

सर्वोत्तम अभ्यास

स्थिति को ज़िम्मेदारी से स्थायी बनाएँ:

ऑब्जेक्ट को JSON से क्रमबद्ध करें
SSR त्रुटियों से बचने के लिए केवल क्लाइंट पर पढ़ें
हाइड्रेशन असंगतियों से बचाव करें
partialize और versioning के साथ Zustand persist का उपयोग करें

त्वरित जाँच

स्थिति को स्थायी बनाने संबंधी अपने ज्ञान की जाँच करें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने क्लाइंट स्थिति को स्थायी बनाना सीखा:

localStorage में स्ट्रिंग सहेजीं और ऑब्जेक्ट को JSON से क्रमबद्ध किया
useEffect में पढ़ा और mounted फ़्लैग से सुरक्षा की
partialize और संस्करणयुक्त माइग्रेशन के साथ Zustand के persist मिडलवेयर का उपयोग किया

अब आपका ऐप रीलोड होने के बाद भी उपयोगकर्ता की स्थिति याद रखता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 22
पाठ: 88

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “अवस्था को localStorage में स्थायी बनाना” पाठ निःशुल्क है?

हाँ — Next.js 15 फुलस्टैक (App Router + Server Actions) अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “अवस्था को localStorage में स्थायी बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“अवस्था को localStorage में स्थायी बनाना” में मैं क्या सीखूँगा?

अवस्था को localStorage में सुरक्षित रखकर, Next.js में हाइड्रेशन को सुरक्षित ढंग से सँभालकर और Zustand के persist मिडलवेयर का उपयोग करके पृष्ठ रीलोड होने पर भी क्लाइंट अवस्था बनाए रखें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 फुलस्टैक (App Router + Server Actions) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Next.js 15 फुलस्टैक (App Router + Server Actions) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“अवस्था को localStorage में स्थायी बनाना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Next.js 15 फुलस्टैक (App Router + Server Actions) पर वापस जाएँ