feat: implement feature toggle for WeatherWidget based on environment variable

Author: py-dev-nandini-12

src/app/api/submit/route.ts

@@ -1,31 +1,26 @@
-// import { NextResponse } from 'next/server';
+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';
+export const isFeatureXEnabled =
+  process.env.NEXT_PUBLIC_FEATURE_X_ENABLED === "true";
 
 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: "Name and Email are required" },
+        { status: 400 }
+      );
     }
 
-    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/page.tsx

@@ -1,15 +1,20 @@
-import Link from "next/link";
-import WeatherWidget from "./weather-widget";
-import { getFeature } from "@vercel/flags";
+import { useEffect, useState } from "react";
 
-export default async function Home() {
-  const isWeatherFeatureEnabled = getFeature("FEATURE_WEATHER_WIDGET");
+export default function Home() {
+  const [isFeatureXEnabled, setIsFeatureXEnabled] = useState(false);
+
+  useEffect(() => {
+    setIsFeatureXEnabled(process.env.NEXT_PUBLIC_FEATURE_X_ENABLED === "true");
+  }, []);
 
   return (
     <div className="container">
       <h1>Welcome to Next.js + Playwright</h1>
-      <Link href="/form">Go to Form</Link>
-      {isWeatherFeatureEnabled && <WeatherWidget />}
+      {isFeatureXEnabled ? (
+        <p>🎉 Feature X is ON</p>
+      ) : (
+        <p>🚫 Feature X is OFF</p>
+      )}
     </div>
   );
 }

src/app/weather-widget.tsx

@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from "react";
 
+const isFeatureEnabled = process.env.NEXT_PUBLIC_FEATURE_X_ENABLED === "true";
+
 export default function WeatherWidget() {
   const [weather, setWeather] = useState<WeatherData | null>(null);
   const [location, setLocation] = useState<{
@@ -14,6 +16,10 @@ export default function WeatherWidget() {
   const [error, setError] = useState("");
 
   useEffect(() => {
+    if (!isFeatureEnabled) {
+      return; // Do not proceed if the feature flag is disabled
+    }
+
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
         (position) => {