https://virgool.io/feed/@esmaeiljafari1992 front end developer fa 2026-06-16 16:20:00 https://files.virgool.io/upload/users/938302/avatar/4fcuqZ.jpeg?height=120&width=120 https://virgool.io/@esmaeiljafari1992 https://virgool.io/@esmaeiljafari1992/%D9%86%D8%AD%D9%88%D9%87-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1-global-environment-%D8%A8%D8%B9%D8%AF-%D8%A7%D8%B2-build-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7%DB%8C-react-zyds9iqnkfpe یکی از چالش های که تو پروژه های که نسخه development و production دارند اینکه به صورت متداوم همراه با توسعه اپلیکیشن نیاز به build های زمان‌گیر داره خیلی وقت ها برای تغییر mode پروژه از حالت development به حالت production نیاز تو پروژه های react js دوباره build گرفت خوب این کار زمان بر و تکراریولی خوب JavaScript همیشه راه آسون‌تری برات داره ? و میتونی بعد از build گرفتن هم mode پروژه رو عوض کنی شاید بگید .env این قابلیت رو cra بهمون میده ولی متاسفانه برای قبل از buildحالا بریم برای ترفندش۱- خوب اول پروژه cra ساختید تو پوشه public فایل envConfig.js می سازیم ۲- قرار دادن کد زیر در فایل envConfig.js۳- الحاق فایل envConfig.js به index.html داخل پوشه public۴- خوب حالا موقعه استفاده ازش داخل پروژه و جاهای که نیازه مثال استفاده از global config۵- حالا پروژه رو build بگیرید و داخل فایل envConfig.js با تغییر property ها داخل objectمتغییرهای global تغییر بدید این ترفند جاهای دیگه هم میتونه قابل استفاده باشه میتونید بهش مثل ی کانفیگ بیرون از پروژه نگاه کنیدممنون از نگاهتون ? همیشه توسعه دهنده باشبد نه کد نویس اسماعیل جعفری اسماعیل جعفری Sat, 07 May 2022 20:29:37 +0430 https://virgool.io/@esmaeiljafari1992/%D9%86%D8%AD%D9%88%D9%87-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%DA%AF%D9%88%DA%A9%D9%84-%D8%A2%D9%86%D8%A7%D9%84%DB%8C%D8%AA%DB%8C%DA%A9%D8%B3-%D8%A8%D9%87-%D9%BE%D8%B1%D9%88%DA%98%D9%87%D8%A7%DB%8C-next-js-o6u00cocbwgg خوب بدون مقدمه و حاشیه بریم سر اصل مطلب !اکثر جاها برای اینکه گوگل آنالیتیکس نصب و راه اندازی کنی برای سایتت فقط کافیه دو تا اسکریپت که گوگل آنالیتیکس بهت میده داخل تگ head قرار بدید و کار تموم می شه ولی خوب Next داستان خودشو داره برای این کار باید اول به روت Pages ی فایل documents.jsx_ یا اگه پروژه تون typescript template هستش documents.tsx_ اضافه کنید این فایل کارش اینه که از تکرار تگ های HTML شامل meta , link , script که بین Rout هاتون مشترک هست جلوگیری کنه. دو تا عکس پایینی هم نمونه typescript و هم javascript که محل قرارگیری اسکریپت های گوگل آنالیتیکس داخل کدها مشخصه اسکریپت گوگل آنالیتیکس برای هر سایتی یه شناسه داره مثل UA-123456789-1 داخل کدهای زیر اونو جایگزین کنیدمحتویات فایل docments.tsx_محتویات فایل docments.jsx_خوب تا اینجا کار تو document خود Next هست ... و verify میشه ولی ی اتفاق بدی که میوفته تو گوگل آنالیتیکس نمیتونی real time چک کنی فقط میگه کاربر از چه لینکی اومده ، الان کجاست ؟ خدا میدونه :)برای اینکه به گوگل بفهمونی کاربر تو چه صفحه ای الان هست باید دست به دامان next/router بشی داخل فایل app.js_ و دو تا function گوگلی ادد کنی تو پروژه ات (هر فایلی که خودت فکر میکنی جاش مهم نیست ولی باید import شه تو فایل app.js_) من برای جدا بودن تو روت پروژه ی پوشه lib ساختم و داخل پوشه lib یه پوشه ga و داخلش ی فایلindex.tsx ساختم و کدمو ریختم داخلش :)این مدلیخوب دو تا عکس زیری هم مدل typescript و javascript شtypescript google functionsjavascript google functions حالا موقعشه بریم سر وقت app و دست به دامان router شدنبرای اینکار باید داخل فانکشن app از هوک useRouter بعلاوه هوک useEffect استفاده کنیم به شکل زیر و اون فانکشن های گوگل ایمپورت کنی داخل app_app.js کانفیگ فایل حالا یعد از deploy سایت می تونید داخل گوگل آنالیتیکس login کنید و لذتشو ببرید :) اسماعیل جعفری اسماعیل جعفری Thu, 02 Sep 2021 00:57:47 +0430