chore: update nextjs example to use newer eval endpoints (#2207)

examples/nextjs/Caddyfile

@@ -1,32 +1,31 @@
 {
-
 }
 
 (cors) {
-  @cors_preflight method OPTIONS
-  @cors header Origin {args.0}
+	@cors_preflight method OPTIONS
+	@cors header Origin {args.0}
 
-  handle @cors_preflight {
-    header Access-Control-Allow-Origin "{args.0}"
-    header Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE"
-    header Access-Control-Allow-Headers "Content-Type"
-    header Access-Control-Max-Age "3600"
-    respond "" 204
-  }
+	handle @cors_preflight {
+		header Access-Control-Allow-Origin "{args.0}"
+		header Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE"
+		header Access-Control-Allow-Headers "*"
+		header Access-Control-Max-Age "3600"
+		respond "" 204
+	}
 
-  handle @cors {
-    header Access-Control-Allow-Origin "{args.0}"
-    header Access-Control-Expose-Headers "Link"
-  }
+	handle @cors {
+		header Access-Control-Allow-Origin "{args.0}"
+		header Access-Control-Expose-Headers "Link"
+	}
 }
 
 :8081 {
-  log
-  import cors *
+	log
+	import cors *
 
-  # proxy only evaluate requests to port 8080
-  reverse_proxy /api/v1/evaluate flipt:8080 {
-    # optionally add the Authorization header to the proxied request
-    # header_up Authorization "Bearer {env.FLIPT_API_KEY}"
-  }
+	# proxy only evaluate requests to port 8080
+	reverse_proxy /evaluate/v1/* flipt:8080 {
+		# optionally add the Authorization header to the proxied request
+		# header_up Authorization "Bearer {env.FLIPT_API_KEY}"
+	}
 }

examples/nextjs/README.md

@@ -25,7 +25,7 @@ In this example, we are leveraging Flipt to prototype some personalization for o
 
 For the client-side example, we are using the `useFlipt` hook to evaluate the flag in the browser/client side (using the `useEffect` hook). The `useFlipt` hook returns an instance of our `FliptApiClient` object which is used to evalute the `language` flag, we can then use this value to render the greeting message.
 
-Because we don't want to potentially expose any sensitive information, such as a Flipt API key, we are actually proxying the `/api/v1/evaluate` request through a reverse proxy via Caddy. This allows us to use the `FliptApiClient` directly in the NextJS application without exposing the API key. This has the additional benefit of not requiring us to publicly expose the Flipt server, and also allows us to only allow the `evaluate` request to be routed to Flipt. The Caddy configuration is defined in the `Caddyfile` file.
+Because we don't want to potentially expose any sensitive information, such as a Flipt API key, we are actually proxying the request to [`/evaluate/v1/variant`](https://www.flipt.io/docs/reference/evaluation/variant-evaluation) through a reverse proxy via Caddy. This allows us to use the `FliptApiClient` directly in the NextJS application without exposing the API key. This has the additional benefit of not requiring us to publicly expose the Flipt server, and also allows us to only allow the `evaluate` API requests to be routed to Flipt. The Caddy configuration is defined in the `Caddyfile` file.
 
 ### Server Side
 
@@ -35,7 +35,7 @@ Because we don't want to potentially expose any sensitive information, such as a
 
 For the server-side example, we are using the [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) function to evaluate the flags on the server side before rendering the page. This uses the `FliptApiClient` directly to evalute the `language` flag to then render the greeting message.
 
-Since we are using server side rendering, we don't need to proxy the `/api/v1/evaluate` request through Caddy, we can just use the `FliptApiClient` directly in the NextJS application.
+Since we are using server side rendering, we don't need to proxy the `evaluate` API request through Caddy, we can just use the `FliptApiClient` directly in the NextJS application.
 
 ## Requirements
 

examples/nextjs/components/Greeting.tsx

@@ -9,21 +9,17 @@ export default function Greeting() {
 
   useEffect(() => {
     async function fetchData() {
-      let language = "fr";
       try {
-        const evaluation = await flipt.evaluate.evaluate({
+        const evaluation = await flipt.evaluation.variant({
+          namespaceKey: "default",
           flagKey: "language",
           entityId: uuidv4(),
           context: {},
         });
 
-        if (!evaluation.ok) {
-          console.log(evaluation.error);
-        } else {
-          language = evaluation.body.value;
-        }
+        let language = evaluation.variantKey;
 
-        let greeting =
+        const greeting =
           language == "es"
             ? "Hola, from Next.js client-side"
             : "Bonjour, from Next.js client-side";
@@ -35,7 +31,7 @@ export default function Greeting() {
     }
 
     fetchData();
-  }, [flipt.evaluate]);
+  }, [flipt.evaluation]);
 
   if (!data)
     return <p className="text-xl font-bold align-middle"> Loading... </p>;

examples/nextjs/docker-compose.yml

@@ -36,7 +36,7 @@ services:
 
   flipt:
     image: flipt/flipt:latest
-    command: ["./flipt"]
+    command: ["./flipt", "--force-migrate"]
     depends_on:
       - init
     ports: