初めまして、tacomsでテイクアウト・デリバリーサイトを作成するサービス
Camel Order のエンジニアをしている@daikiです🐈
この記事では、Next.jsにLaunchDarklyを導入する手順を説明します。
LaunchDarklyとは
リリース管理を行うためのツールです。
リアルタイムで機能を公開/非公開の制御したり、A/Bテストを実施したりすることができます。
LaunchDarkly のセットアップ
まず最初に、LaunchDarklyのアカウントを作成し、新しいフラグ（Feature Flag）を作成します。このフラグは、アプリケーション内で制御したい機能のトグルスイッチのようなものです。
LaunchDarklyのダッシュボードから、新しいフラグを作成し、フラグのキーをコピーします。このキーは後でNext.jsアプリケーションで使用します。
Next.js プロジェクトに LaunchDarkly SDK を追加する
次に、Next.jsプロジェクトにLaunchDarklyのJavaScript SDKを追加します。
npmを使ってインストールします。
npm i --save launchdarkly-react-client-sdk
LaunchDarkly SDK の初期化
次に、Next.jsアプリケーション内でLaunchDarkly SDKを初期化します。
通常は、_app.js ファイルや特定のヘルパー関数で行います。以下は、初期化の例です。
import { LDProvider } from 'launchdarkly-react-client-sdk'
import { launchDarklyClientId } from '@/config/featureFlag'
export default async function MyApp() {
return <LDProvider clientSideID={launchDarklyClientId}>{children}</LDProvider>
}
ドキュメントだとasyncWithLDProviderをimportして利用していますが、asyncWithLDProviderはクライアントサイドでのみ動作するため、SSR環境ではwindow is not definedエラーが発生します。一方、LDProviderはクライアントサイドでの初期化を行うため、SSR環境でも問題なく動作します。
フラグを使用して機能を制御する
最後に、作成したLaunchDarklyのフラグを使用して、アプリケーション内の機能を制御します。例えば、特定のコンポーネントをフラグの状態に応じて表示したり非表示にしたりすることができます。
import { useFlags } from 'launchdarkly-react-client-sdk'
export const FeatureControl = () => {
const { sampleFature } = useFlags()
return (
<div>{Boolean(sampleFeature) && 'This is a sample feature!'}</div>
)
}
これで、Next.jsアプリケーションにLaunchDarklyを導入し、リアルタイムで機能を制御する準備が整いました。LaunchDarklyのダッシュボードからフラグの状態を変更すると、アプリケーションの振る舞いに即座に反映されることを確認できます。
LaunchDarklyの詳細な設定や他の機能（A/Bテストなど）を使用する場合は、公式ドキュメントを参照することをお勧めします。
Discussion