chore: update NextJS example to use updated versions of Flipt clients…

…ide SDKs (#3479)

Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com>

examples/nextjs/README.md

@@ -4,7 +4,7 @@ This is an example of how to use Flipt with a NextJS application.
 
 **Note:** This example is not meant to be used in production, it is only meant to demonstrate how to use Flipt with NextJS.
 
-It uses both the [Flipt TypeScript SDK](https://github.com/flipt-io/flipt-node)  and [Flipt Browser SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-browser) to evalute feature flags from the Flipt API in two different ways:
+It uses both the [Flipt Node SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-node) and [Flipt Browser SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-browser) to evalute feature flags from the Flipt API in two different ways:
 
 1. 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 
 1. Using the Flipt Browser SDK to evaluate the flags in the browser/client side
@@ -13,17 +13,19 @@ We also included [some code](./pages/api/hello.ts) showing how you could use Fli
 
 ## Example
 
-In this example, we are leveraging Flipt to prototype some personalization for our NextJS application. We want to show a different greeting message to the user at random, but we aren't sure if we should use client-side data fetching or server-side data fetching, so we are going to try both ways. We will use both the Flipt TypeScript SDK (server-side) and Flipt Browser SDK (client-side) to integrate with Flipt.
+In this example, we are leveraging Flipt to prototype some personalization for our NextJS application. We want to show a different greeting message to the user at random, but we aren't sure if we should use client-side data fetching or server-side data fetching, so we are going to try both ways. We will use both the Flipt Node SDK and Flipt Browser SDK to integrate with Flipt.
 
 ## Architecture
 
+Both examples are using the same Flipt flag and are evaluating the flag within the application. Both of these SDKs pull flag state from the Flipt server and perform evaluation client-side in the browser or server-side (Node.js) in the application.
+
 ### Client Side
 
 For the client-side example, we are using the [Flipt Browser SDK](https://github.com/flipt-io/flipt-client-sdks/tree/main/flipt-client-browser) to evaluate the flag in the browser/client side. The `FliptEvaluationClient` object pulls flag state from the Flipt server and performs evaluation client-side in the browser to evalute the `language` flag.
 
 ### Server Side
 
-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.
+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 `FliptEvaluationClient` to evalute the `language` flag to then render the greeting message. While this example is using the same flag as the client-side example, it is important to note that the Flipt Node SDK is running on the server-side and is not sending any data to the browser.
 
 ## Requirements
 

examples/nextjs/components/Greeting.tsx

@@ -12,10 +12,10 @@ export default function Greeting() {
           url: process.env.NEXT_PUBLIC_FLIPT_ADDR ?? "http://localhost:8080",
         });
 
-        const evaluation = client.evaluateVariant("language", uuidv4(), {});
-        console.log(evaluation);
+        const result = client.evaluateVariant("language", uuidv4(), {});
+        console.log(result);
 
-        let language = evaluation.result?.variant_key;
+        let language = result.variantKey;
 
         const greeting =
           language == "es"

examples/nextjs/package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@flipt-io/flipt": "^0.2.17",
-    "@flipt-io/flipt-client-browser": "^0.0.15",
+    "@flipt-io/flipt-client": "^0.10.0",
+    "@flipt-io/flipt-client-browser": "^0.2.0",
     "@next/font": "13.0.7",
     "@types/node": "18.11.17",
     "@types/react": "18.0.26",

examples/nextjs/pages/index.tsx

@@ -1,4 +1,4 @@
-import { FliptApiClient } from "@flipt-io/flipt";
+import { FliptEvaluationClient } from "@flipt-io/flipt-client";
 import Head from "next/head";
 import Greeting from "../components/Greeting";
 import { v4 as uuidv4 } from "uuid";
@@ -28,21 +28,13 @@ export default function Home(data: HomeProps) {
   );
 }
 
-const client = new FliptApiClient({
-  environment: process.env.FLIPT_ADDR ?? "http://flipt:8080",
-});
 
 export async function getServerSideProps() {
+  const client = await FliptEvaluationClient.init("default", {url: process.env.FLIPT_ADDR ?? "http://flipt:8080"}  );
   let language = "en";
   try {
-    const evaluation = await client.evaluation.variant({
-      namespaceKey: "default",
-      flagKey: "language",
-      entityId: uuidv4(),
-      context: {},
-    });
-
-    language = evaluation.variantKey;
+    const result = client.evaluateVariant("language", uuidv4(), {});
+    language = result.variantKey;
   } catch (err) {
     console.log(err);
   }