feat: add weather widget feature with conditional rendering

Author: py-dev-nandini-12

package-lock.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@clerk/clerk-sdk-node": "^5.1.6",
     "@types/node-fetch": "^2.6.12",
+    "flags": "^4.0.0",
     "next": "15.1.6",
     "node-fetch": "^3.3.2",
     "react": "^19.0.0",

package.json

@@ -1,31 +1,33 @@
-// import { NextResponse } from 'next/server';
-
-// export async function POST(req: Request) {
-//   try {
-//     const { name, email } = await req.json();
-
-//     if (!name || !email) {
-//       return NextResponse.json({ message: 'Name and Email are required' }, { status: 400 });
-//     }
-
-//     return NextResponse.json({ message: `Thank you, ${name}!` });
-//   } catch {
-//     return NextResponse.json({ message: 'Server error' }, { status: 500 });
-//   }
-// }
-
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
 export async function POST(req: Request) {
+  const isFeatureXEnabled =
+    process.env.NEXT_PUBLIC_FEATURE_X_ENABLED === "true";
+
   try {
     const { name, email } = await req.json();
 
     if (!name || !email) {
-      return NextResponse.json({ message: 'Name and Email are required' }, { status: 400 });
+      return NextResponse.json(
+        { message: "Name and Email are required" },
+        { status: 400 }
+      );
+    }
+
+    if (!isFeatureXEnabled) {
+      return NextResponse.json(
+        { message: "Feature X is disabled" },
+        { status: 403 }
+      );
     }
 
-    return NextResponse.json({ message: `Hello ${name}, your form has been submitted successfully!` });
+    return NextResponse.json({
+      message: `Hello ${name}, your form has been submitted successfully!`,
+    });
   } catch {
-    return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
+    return NextResponse.json(
+      { message: "Internal server error" },
+      { status: 500 }
+    );
   }
 }

src/app/api/submit/route.ts

@@ -0,0 +1,11 @@
+interface WeatherClientProps {
+  isEnabled: boolean;
+}
+
+export default function WeatherClient({ isEnabled }: WeatherClientProps) {
+  return (
+    <div>
+      {isEnabled ? "Weather Widget Enabled" : "Weather Widget Disabled"}
+    </div>
+  );
+}

src/app/components/WeatherClient.tsx

@@ -0,0 +1,10 @@
+"use server";
+
+import { flag } from "flags/next";
+
+export const weatherWidgetFlag = flag({
+  key: "weather-widget",
+  decide() {
+    return Math.random() > 0.5; // Example logic for deciding the flag
+  },
+});

src/app/flags.ts

@@ -1,10 +1,13 @@
-import Link from 'next/link';
+import { weatherWidgetFlag } from "./flags";
+import WeatherClient from "./components/WeatherClient";
+
+export default async function Page() {
+  const isWeatherWidgetEnabled = await weatherWidgetFlag();
 
-export default function Home() {
   return (
-    <div className="container">
+    <div>
       <h1>Welcome to Next.js + Playwright</h1>
-      <Link href="/form">Go to Form</Link>
+      <WeatherClient isEnabled={isWeatherWidgetEnabled} />
     </div>
   );
 }