ConfigCat را به برنامه Next.js اضافه کنید

من اخیراً شروع به کمک به دوستم @jordan-t-romero در پروژه NextJS و NodeJS کردم که او روی آن کار می کند. این آخر هفته، ConfigCat را گنجانده ایم تا بتوانیم پرچم های ویژگی را برای کنترل محتوای نمایش داده شده در محیط های مختلف (محلی، صحنه سازی، تولید و غیره) اضافه کنیم.

پس از ایجاد یک حساب کاربری و ورود به سیستم، به راهنمای React SDK Reference رفتیم زیرا Next.js چارچوبی برای React است.

بسته را نصب کنید

از آنجایی که به جای npm از نخ استفاده می کنیم، اجرا کردیم yard add configcat-react تا ConfigCat را به وابستگی های خود اضافه کنیم.

واردات و مقداردهی اولیه a ConfigCatProvider با کلید SDK خود.

ما جزء ریشه خود را پیچیده کردیم (_app.tsx در پوشه Pages) با ConfigCatProvider برای دسترسی به ویژگی های ConfigCat در اجزای فرزند.

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '../components/Layout/_layout'
import '../components/theme/styles.css'
import { ConfigCatProvider } from 'configcat-react'

export default function App({ Component, pageProps }: AppProps) {

  return (
    <ConfigCatProvider sdkKey="...your actual key">
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ConfigCatProvider>
  )
}

هنگامی که با ConfigCat ثبت نام می کنید، اگر به مستندات بروید، کد نمونه ای که برای اضافه کردن ارائه دهنده باید در آن جای گذاری کنید، شامل موارد خاص شما می شود. sdkKey.

آن را امتحان کنید

اولین جایی که می‌خواستیم آن را امتحان کنیم در نوار نوار ما بود. ما در نهایت می خواهیم یک دکمه ورود و ثبت نام داشته باشیم، اما آنها متصل نیستند و ما برای کاربران واقعی در Production آماده نیستیم، بنابراین این مورد استفاده ایده آل بود. در برنامه ConfigCat، یک ویژگی جدید برای پرچم‌گذاری ایجاد کردیم که به آن می‌گویند signUpandLoginVisible و از ضامن برای تنظیم آن برای اهداف آزمایشی استفاده کرد.

که در components/Layout/Navbar.tsx ما وارد می کنیم useFeatureFlag و یک هزینه برای signUpandLoginVisible. ارگ اول برای useFeatureFlag/2 نام ویژگی است که در ConfigCat تنظیم شده است. arg دوم مقدار پیش فرضی است که باید استفاده شود. از آنجایی که صفحه کمی سریعتر از خواندن کلید SDK بارگیری می شود، تا زمانی که به ConfigCat متصل نشود از پیش فرض استفاده می کند. زمانی که بخواهیم این ویژگی ها را نشان دهیم، احتمالاً پیش فرض را به true تغییر می دهیم. با این حال آنقدر سریع است که ما نمی توانستیم تفاوت را با چشم انسان تشخیص دهیم.

import NavComponent from './NavComponent'
import { useFeatureFlag } from 'configcat-react'

const Navbar = () => {
  const { value: signUpAndLoginVisible } = useFeatureFlag(
    'signUpAndLoginVisible',
    false,
  )

  return (
    <div>
      <NavComponent navText="Home" />
      <NavComponent navText="About" />
      <NavComponent navText="Contact" />
      {signUpAndLoginVisible ? <NavComponent navText="Sign Up" /> : null}
      {signUpAndLoginVisible ? <NavComponent navText="Login" /> : null}
    </div>
  )
}

export default Navbar

و دقیقاً مانند آن ما یک دکمه ثبت نام و ورود داریم! سپس می‌توانیم وارد ConfigCat شویم، کلید را خاموش کنیم، چند ثانیه صبر کنیم (معمولاً حدود 60 ثانیه یا بیشتر برای ما) تا تغییر اعمال شود و دیگر دکمه‌های Sign Up یا Login وجود نداشته باشد!

از یک متغیر محیطی استفاده کنید

آخرین قطعه ای که می خواستیم پیاده سازی کنیم، انتقال کلید SDK از منطق برنامه و به یک متغیر محیطی بود. این به چند دلیل است. شما می خواهید از کلیدهای خصوصی مانند این محافظت کنید و مطمئن شوید که در مکان هایی مانند GitHub که کد شما در آن قرار دارد قابل مشاهده نیستند. حتی اگر یک مخزن خصوصی باشد، حفاظت اضافی همیشه بهتر است. دوم این است که ما از Vercel برای استقرار خود استفاده می کنیم و این توانایی را به ما می دهد که از متغیرهای مختلف برای محیط های مختلف خود استفاده کنیم.

ما قبلا یک .gitignore فایل در فهرست اصلی ما که شامل ما می شود .env فایل:

# local env files
.env*.local
.env

بنابراین در ما .env فایل ما می توانیم در آن اضافه کنیم abc123 کلید SDK واقعی شما است:

NEXT_PUBLIC_CONFIGCAT_SDK_KEY=abc123

Next.js دارای پشتیبانی داخلی برای متغیرهای محیطی است. زیرا متغیرهای موجود در .env فایل ها به طور پیش فرض فقط در سمت سرور در دسترس هستند (در مورد ما Node.js)، باید آن را اضافه کنیم NEXT_PUBLIC_ پیشوند نام متغیر این باعث می شود متغیر محیط در مرورگر قابل دسترسی باشد و به Next.js اجازه می دهد مقدار را در زمان ساخت بخواند و به عنوان بخشی از بسته js به مشتری تحویل داده می شود. با فراخوانی به متغیر دسترسی پیدا می کنیم process.env.[variable] در پایه کد ما _app.tsx اکنون به این شکل است:

...
import { ConfigCatProvider } from 'configcat-react'

export default function App({ Component, pageProps }: AppProps) {
  const CONFIGCAT_KEY = process.env.NEXT_PUBLIC_CONFIGCAT_SDK_KEY

  return (
    <ConfigCatProvider sdkKey={CONFIGCAT_KEY}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ConfigCatProvider>
  )
}

با این حال، اکنون یک خطای تایپی داریم:

Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.ts(2322)
ConfigCatProvider.d.ts(7, 5): The expected type comes from property 'sdkKey' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ConfigCatProvider> & Readonly<PropsWithChildren<ConfigCatProviderProps>>'
(property) sdkKey: string

زیرا کلید SDK اکنون از ما می آید .env هنگامی که برنامه برای اولین بار بوت می شود، مقدار آن تعریف نشده است تا زمانی که بارگیری شود. فرآیند بارگذاری بسیار سریع اتفاق می‌افتد، بنابراین نباید تأثیر زیادی روی کاربران بگذارد، اما می‌توانیم تا زمانی که مقدار در دسترس باشد، در حالت بارگذاری اضافه کنیم.

export default function App({ Component, pageProps }: AppProps) {
  const CONFIGCAT_KEY = process.env.NEXT_PUBLIC_CONFIGCAT_SDK_KEY

  if (!CONFIGCAT_KEY) {
    return <div>Loading...</div>
  }

  return (
    <ConfigCatProvider sdkKey={CONFIGCAT_KEY}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
    </ConfigCatProvider>
  )
}

و اکنون همه ما با ConfigCat با یک متغیر محیطی مناسب تنظیم شده‌ایم و آماده هستیم تا به طور کامل از پرچم‌های ویژگی خود استفاده کنیم.

کد نویسی مبارک!