نحوه برطرف کردن خطای "window is not defined" در برنامه Next.js React
در برنامههای Next.js، خطای "window is not defined" معمولاً به دلیل این است که کد به صورت سرور سمت اجرا میشود و متغیر window در آنجا در دسترس نیست. این مساله به ویژه زمانی رخ میدهد که سعی داریم در متدهایی مانند componentWillMount() به خصوصیات window دسترسی پیدا کنیم.
برای دسترسی به window تنها در سمت کلاینت (مروگر)، میتوانیم از روشهای زیر استفاده کنیم:
- استفاده از متد : این متد پس از بارگذاری کامپوننت در کلاینت اجرا میشود و در اینجا میتوان به متغیرهای خاص مرورگر دسترسی پیدا کرد. به مثال زیر توجه کنید:
- استفاده از هوک : اگر از هوکها در کامپوننتهای تابعی استفاده میکنید، میتوانید کد مربوط به
windowرا در داخلuseEffectقرار دهید. به این صورت:
کد داخل useEffect فقط در کلاینت اجرا میشود و به همین دلیل دسترسی به window کاملاً مجاز است. توجه داشته باشید که اگر داخل useEffect تغییری در وضعیت (state) ایجاد کردید، حتماً باید آرایه وابستگی (dependencies) خالی [] را اضافه کنید تا از بروز مشکلات جلوگیری شود.
- بررسی تعریف بودن : اگر بر این باورید که ممکن است کد در محیطی اجرا شود که
windowوجود نداشته باشد، میتوانید از شرطtypeof window !== "undefined"استفاده کنید. این کار اطمینان حاصل میکند که کد شما تنها زمانی اجرا شود که در یک محیط مرورگر هستید.
در کل، به یاد داشته باشید که componentWillMount() در نسخههای جدید React به احتمال زیاد به زودی منسوخ خواهد شد و استفاده از componentDidMount() یا هوکهای تابعی روشهای بهتری برای مدیریت این نوع کد هستند.