Next.JS의 기능 플래그

기능 플래그는 훌륭하며 개발자의 통합 및 사용 경험이 쉬울 때 더욱 좋습니다.

현재 시장에서 선택의 폭이 넓기 때문에 측면에서, 특히 Next.JS에서 프로젝트를 빌드하는 개발자에게 적합한 솔루션을 찾고 싶었습니다.

그래서 다음 상자를 선택한 도구를 검색하게 되었습니다.

우아한 프리 티어가 있습니다

.

내 프로젝트에 쉽게 통합

크기가 작습니다(부풀리는 프로젝트가 되고 싶지 않음).

이것은 내가 그들 모두를 똑딱 거리는 도구를 발견 한 곳입니다.

소개합니다... HappyKit

나는 이 도구에 대해 약간의 조사를 했고 지금 작업하고 있는 내 주요 애완 동물 프로젝트에 구현했고 나는 깜짝 놀랐습니다.

첫째, npm 패키지는 사용하기 쉽고 크기가 작습니다.

크기가 5kb 미만입니다.

통합 방법

npm i @happykit/flags

OR

yarn add @happykit/flags

그런 다음 다음 내용으로 루트에 flags.config.ts 파일을 만듭니다.

import { configure } from "@happykit/flags/config";

configure({
  envKey: process.env.NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY
});

그런 다음 이것을 _app.tsx로 가져옵니다.

import '../flags.config'

마지막으로 .env.local에 다음을 추가합니다.

NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY=flags_pub_development_xxxxxxxxxx

환경 변수의 값을 찾으려면 다음을 수행하십시오.

포털 happykit.dev

로 이동합니다.

설정으로 이동

키로 이동하여 대상 환경을 선택합니다(로컬 건물에서 개발하는 것이 좋습니다).

또한 미리 보기 환경과 즉시 사용 가능한 프로덕션 환경을 지원합니다. 무료로 제공되는 좋은 기능입니다.

라이브러리는 SSR을 완벽하게 지원하며 아래 코드 스니펫으로 이를 증명할 수 있습니다.

import type { NextPage, NextPageContext } from "next";
import { useFlags } from "@happykit/flags/client";
import { getFlags } from "@happykit/flags/server";
import {
  ErrorInitialFlagState,
  Flags,
  SuccessInitialFlagState,
} from "@happykit/flags/dist/declarations/src/types";

export const getServerSideProps = async (context: NextPageContext) => {
  const { initialFlagState } = await getFlags({ context });
  return { props: { initialFlagState } };
};

interface IHomePageProps {
  initialFlagState: SuccessInitialFlagState<Flags> | ErrorInitialFlagState;
}

const Home: NextPage<IHomePageProps> = (props) => {
  const { flags } = useFlags({ initialState: props.initialFlagState });

return (
   <div>Hello {flags.exampleFlag ? 'World' : 'Not turned on'}</div>
  );
};

export default Home;

위의 내용은 클라이언트가 페이지를 요청할 때 서버에서 초기 플래그 값을 가져오고 이를 페이지에 전달한다는 것을 의미하기 때문에 정말 깔끔합니다. 클라이언트가 플래그 값을 얻기 위해 추가 초기 호출을 수행하도록 하는 대신.

둘째, 포털은 사용하기 매우 쉽습니다.

기능 플래그 생성 과정을 안내하고 시작하는 방법에 대한 코드 샘플로 가득합니다. 사용이 매우 직관적이며 프로젝트 개발에 도움이 되는 도구를 선택할 때 항상 안심할 수 있는 표시인 내 길을 탐색하는 데 전혀 문제가 없었습니다.

셋째, 프리 티어가 좋습니다.

애완동물 프로젝트를 개발할 때 우리는 세상을 공짜로 원합니다. HappyKit은 다음으로 구성된 무료 계층을 제공합니다.

기능 플래그의 AB 테스트

매월 최대 100,000건의 요청

한 번에 5개의 기능 플래그를 이동 중에 사용할 수 있습니다.

이것은 좋지만 좋은 상태로 둡니다. 프리 티어에서 더 많은 기능 플래그를 제공하는 다른 경쟁업체가 있으며 HappyKit에서 향후 이러한 변화가 있기를 바랍니다. 그러나이 기사에서 지금까지 언급 한 다른 모든 것을 제공한다는 사실을 감안할 때. 그것은 여전히 ​​나에게 승자입니다.

마무리 생각

기능 플래그는 오늘날의 개발 생태계에서 중요한 도구입니다. 대중에게 공개하기 전에 기능을 테스트하고 마스터의 오래된 기능 분기에 의존하지 않는 것은 피해야 할 중요한 사항입니다. 따라서 작업에 적합한 도구를 찾는 것이 우선 순위 목록에서 높습니다. 저는 개인적으로 HappyKit의 배치 방식이 마음에 들고 계속 사용할 생각입니다. 저의 핵심 주제는 개발자 경험과 이것이 도구를 사용할 때 의사 결정에 미치는 영향이었습니다. 이것이 제가 이 도구를 특히 좋아하는 이유입니다. 내 UI에 순풍을 사용하는 것을 좋아하는 이유와 같습니다. DX는 놀랍습니다.

Next.JS 👇에서 기능 플래그를 관리하는 데 사용하는 도구를 아래 댓글로 알려주세요.

연결:

HappyKit