Vercel edge middleware version

packages/ssr-demo/contexts/experimentContext.tsx

@@ -5,6 +5,7 @@ export const ExperimentContext = createContext(null);
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const ExperimentProvider = (props) => {
   const { value, children } = props;
+  console.log('experiment provider', value);
   return (
     <ExperimentContext.Provider value={value}>
       {children}

packages/ssr-demo/middleware.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+type HttpExperimentResult = {
+  [flagKey: string]:
+    | {
+        key: string;
+        payload?: Record<string, unknown>;
+      }
+    | undefined;
+};
+
+export async function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname === '/') {
+    const res = await fetch(
+      `https://api.lab.amplitude.com/v1/vardata?${new URLSearchParams({
+        user_id: 'userId',
+      }).toString()}`,
+      {
+        headers: new Headers({
+          Authorization: `Api-Key client-IAxMYws9vVQESrrK88aTcToyqMxiiJoR`,
+        }),
+      },
+    );
+    const features = (await res.json()) as HttpExperimentResult;
+
+    if (features?.['js-ssr-demo']?.key === 'true') {
+      return NextResponse.rewrite(
+        new URL('/experiment-outcomes/js-ssr-demo/variant', request.url),
+      );
+    }
+
+    return NextResponse.rewrite(
+      new URL('/experiment-outcomes/js-ssr-demo/control', request.url),
+    );
+  }
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/'],
+};

packages/ssr-demo/next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/ssr-demo/next.config.js

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  async redirects() {
+    return [
+      // this redirect prevents people from navigating straight to the experiment outcomes
+      {
+        source: '/experiment-outcomes/:path*',
+        destination: '/',
+        permanent: true,
+      },
+    ];
+  },
+};
+
+module.exports = nextConfig;

packages/ssr-demo/package.json

@@ -9,14 +9,14 @@
   "dependencies": {
     "@amplitude/experiment-js-client": "^0.2.0",
     "@amplitude/experiment-node-server": "^1.2.0",
-    "next": "9.5.5",
-    "next-transpile-modules": "^4.1.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "next": "^12.2.0",
+    "next-transpile-modules": "^9.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/node": "^14.11.8",
-    "@types/react": "^16.9.52",
-    "typescript": "^4.0.3"
+    "@types/react": "^18.0.0",
+    "typescript": "^4.5.5"
   }
 }

packages/ssr-demo/pages/_app.tsx

@@ -3,7 +3,6 @@ import { AppProps } from 'next/app';
 import { ReactNode } from 'react';
 
 import { ExperimentProvider } from '../contexts/experimentContext';
-import { ExperimentServer } from '../lib/experiment';
 import '../styles/globals.css';
 
 let experiment: ExperimentClient;
@@ -18,15 +17,15 @@ function MyApp(appProps: AppProps): ReactNode {
     experiment = new ExperimentClient(
       'client-IAxMYws9vVQESrrK88aTcToyqMxiiJoR',
       {
-        initialVariants: appProps['features'],
+        initialVariants: pageProps['features'],
       },
     );
   } else if (!experiment) {
     // in the client, we only want to create the ExperimentClient once
     experiment = Experiment.initialize(
       'client-IAxMYws9vVQESrrK88aTcToyqMxiiJoR',
       {
-        initialVariants: appProps['features'],
+        initialVariants: pageProps['features'],
       },
     );
   }
@@ -39,6 +38,10 @@ function MyApp(appProps: AppProps): ReactNode {
   );
 }
 
+/**
+ * Since the fetch is happening in the middleware we don't need this anymore
+ *
+ *
 MyApp.getInitialProps = async ({ ctx }) => {
   // Fetch data from external APIs
   if (ctx.req) {
@@ -53,5 +56,8 @@ MyApp.getInitialProps = async ({ ctx }) => {
     return {};
   }
 };
+ *
+ *
+ */
 
 export default MyApp;

packages/ssr-demo/pages/experiment-outcomes/js-srr-demo/control.tsx

@@ -0,0 +1,54 @@
+import { Variants } from '@amplitude/experiment-js-client';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useContext } from 'react';
+
+import { ExperimentContext } from '../../../contexts/experimentContext';
+import styles from '../../../styles/Home.module.css';
+
+export const Control: NextPage = () => {
+  const experiment = useContext(ExperimentContext);
+  const feature = experiment.variant('js-ssr-demo');
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>SSR Demo</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>SSR demo for Experiment</h1>
+
+        <Link href="/client-link">Client side navigation demo</Link>
+        <p className={styles.description}>
+          If you see an image below, the feature flag is enabled
+        </p>
+        <p>{`js-ssr-demo: ${feature?.value}`}</p>
+        <p>{`payload: ${JSON.stringify(feature?.payload)}`}</p>
+      </main>
+      <footer className={styles.footer}>
+        <img
+          src="/amplitude-logo.svg"
+          alt="Flag enabled!"
+          className={styles.logo}
+        />
+      </footer>
+    </div>
+  );
+};
+
+export const getStaticProps: GetStaticProps<{
+  features: Variants;
+}> = async () => ({
+  props: {
+    features: {
+      'js-ssr-demo': {
+        value: 'false',
+        payload: { testKey: 'abc' },
+      },
+    },
+  },
+});
+
+export default Control;

packages/ssr-demo/pages/experiment-outcomes/js-srr-demo/variant.tsx

@@ -0,0 +1,55 @@
+import { Variants } from '@amplitude/experiment-js-client';
+import { GetStaticProps } from 'next';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useContext } from 'react';
+
+import { ExperimentContext } from '../../../contexts/experimentContext';
+import styles from '../../../styles/Home.module.css';
+
+export const Variant = () => {
+  const experiment = useContext(ExperimentContext);
+  const feature = experiment.variant('js-ssr-demo');
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>SSR Demo</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>SSR demo for Experiment</h1>
+
+        <Link href="/client-link">Client side navigation demo</Link>
+        <p className={styles.description}>
+          If you see an image below, the feature flag is enabled
+        </p>
+        <p>{`js-ssr-demo: ${feature?.value}`}</p>
+        <p>{`payload: ${JSON.stringify(feature?.payload)}`}</p>
+      </main>
+      <footer className={styles.footer}>
+        <img
+          src="/amplitude-logo.svg"
+          alt="Flag enabled!"
+          className={styles.logo}
+        />
+      </footer>
+    </div>
+  );
+};
+
+export const getStaticProps: GetStaticProps<{
+  features: Variants;
+}> = async () => ({
+  props: {
+    features: {
+      'js-ssr-demo': {
+        value: 'true',
+        payload: { testKey: 'abc' },
+      },
+    },
+  },
+});
+
+export default Variant;

packages/ssr-demo/tsconfig.json

@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",