Add feature flag example (#1065)

Author: NiallJoeMaher

app/(app)/feature-flag-example/_client.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { type Session } from "next-auth";
+import { notFound } from "next/navigation";
+import { isFlagEnabled, FEATURE_FLAGS } from "@/utils/flags";
+
+const Content = ({ session }: { session: Session | null }) => {
+  const flagEnabled = isFlagEnabled(FEATURE_FLAGS.FEATURE_FLAG_TEST);
+
+  if (!flagEnabled) {
+    notFound();
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl">
+      <h1 className="text-lg">
+        This page is behind a feature flag. It will work in development or when
+        the flag is turned on.
+      </h1>
+      <p className="mt-8 text-sm">
+        {session ? "User is logged in" : "User is not logged in"}
+      </p>
+    </div>
+  );
+};
+
+export default Content;

app/(app)/feature-flag-example/page.tsx

@@ -0,0 +1,13 @@
+import Content from "./_client";
+import { getServerAuthSession } from "@/server/auth";
+
+export const metadata = {
+  title: "This is a feature flag example",
+};
+
+export default async function Page() {
+  // Example of grabbing session in case it is needed
+  const session = await getServerAuthSession();
+
+  return <Content session={session} />;
+}

utils/flags.ts

@@ -0,0 +1,27 @@
+import { posthog } from "posthog-js";
+
+export const FEATURE_FLAGS = {
+  FEATURE_FLAG_TEST: "feature-flag-test",
+  // Add more feature flags as needed
+} as const;
+
+export type FeatureFlagName =
+  (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS];
+
+export function isDevEnvironment() {
+  return (
+    process.env.NODE_ENV === "development" ||
+    (typeof window !== "undefined" && window.location.hostname === "localhost")
+  );
+}
+
+export const isFlagEnabled = (
+  featureFlag: FeatureFlagName,
+  disableDevCheck = false, // Disable dev check to force feature flag to be checked always
+) => {
+  if (!disableDevCheck && isDevEnvironment()) {
+    console.log("Feature flag check skipped in development environment");
+    return true;
+  }
+  return posthog.isFeatureEnabled(featureFlag);
+};