feat: nextjs sdk (#586)

DevCycleHQ · Dec 4, 2023 · b03ba39 · b03ba39 · vercel · Dec 4, 2023
1 parent c41710a
commit b03ba39
Show file tree

Hide file tree

Showing 53 changed files with 2,038 additions and 352 deletions.
diff --git a/.gitignore b/.gitignore
@@ -94,4 +94,4 @@ react-native-app-e2e/artifacts
 # Next.js
 .next
 **/.next
-verdaccio
+verdaccio
diff --git a/examples/nextjs/app-router/app/ClientComponent.tsx b/examples/nextjs/app-router/app/ClientComponent.tsx
@@ -0,0 +1,12 @@
+'use client'
+export const ClientComponent = () => {
+    return (
+        <div
+            style={{
+                backgroundColor: '#DFD',
+            }}
+        >
+            Client content without a variable call
+        </div>
+    )
+}
diff --git a/examples/nextjs/app-router/app/ClientIdentity.tsx b/examples/nextjs/app-router/app/ClientIdentity.tsx
@@ -0,0 +1,22 @@
+'use client'
+import { useUserIdentity, useVariableValue } from '@devcycle/next-sdk'
+
+export const ClientIdentity = () => {
+    const variable = useVariableValue('test-featre', false)
+    const userIdentity = useUserIdentity()
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                backgroundColor: '#DDF',
+            }}
+        >
+            <b>Client Variable</b>
+            <span>{JSON.stringify(variable)}</span>
+            <b>Client User Identity</b>
+            <span>{userIdentity?.user_id}</span>
+            <br />
+        </div>
+    )
+}
diff --git a/examples/nextjs/app-router/app/ServerIdentity.tsx b/examples/nextjs/app-router/app/ServerIdentity.tsx
@@ -0,0 +1,22 @@
+import { getUserIdentity, getVariableValue } from '@devcycle/next-sdk/server'
+import * as React from 'react'
+
+export const ServerIdentity = async function () {
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                backgroundColor: '#FDD',
+            }}
+        >
+            <b>Server Variable</b>
+            <span>
+                {' '}
+                {JSON.stringify(await getVariableValue('test-featre', false))}
+            </span>
+            <b>Server Identity</b>
+            <span>{getUserIdentity()?.user_id}</span>
+        </div>
+    )
+}
diff --git a/examples/nextjs/app-router/app/clientside.tsx b/examples/nextjs/app-router/app/clientside.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import Head from 'next/head'
+import styles from '../styles/Home.module.css'
+import { ClientIdentity } from './ClientIdentity'
+import { ReactNode } from 'react'
+
+const ClientSide = ({ children }: { children: ReactNode }) => {
+    return (
+        <div className={styles.container}>
+            <Head>
+                <title>Create Next App</title>
+                <meta
+                    name="description"
+                    content="Generated by create next app"
+                />
+                <link rel="icon" href="/favicon.ico" />
+            </Head>
+
+            <main className={styles.main}>
+                {children}
+                <ClientIdentity />
+                <br />
+            </main>
+        </div>
+    )
+}
+
+export default ClientSide
diff --git a/examples/nextjs/app-router/app/layout.tsx b/examples/nextjs/app-router/app/layout.tsx
@@ -1,18 +1,26 @@
 import '../styles/globals.css'
 import * as React from 'react'
-import { WithProviders } from './providers'
+import { DevCycleServersideProvider } from '@devcycle/next-sdk/server'
 
-export default function RootLayout({
-    // Layouts must accept a children prop.
-    // This will be populated with nested layouts or pages
+export default async function RootLayout({
     children,
 }: {
     children: React.ReactNode
 }) {
     return (
         <html lang="en">
             <body>
-                <WithProviders>{children}</WithProviders>
+                <DevCycleServersideProvider
+                    sdkKey={
+                        process.env.NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY ?? ''
+                    }
+                    user={{ user_id: 'server-user' }}
+                    options={{
+                        enableStreaming: true,
+                    }}
+                >
+                    {children}
+                </DevCycleServersideProvider>
             </body>
         </html>
     )

diff --git a/examples/nextjs/app-router/app/page.tsx b/examples/nextjs/app-router/app/page.tsx
@@ -1,152 +1,40 @@
-'use client'
-
 import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-import { useVariable } from '@devcycle/react-client-sdk'
-
-const Home: NextPage = () => {
-    const variableKey = 'feature-release'
-    const variableKeyString = 'variable-key-string'
-    const variableKeyNumber = 'variable-key-number'
-    const variableKeyBoolean = 'variable-key-boolean'
-    const variableKeyJsonString = 'variable-json-key-string'
+import { ReactNode, Suspense } from 'react'
+import * as React from 'react'
+import { ServerIdentity } from './ServerIdentity'
+import { ClientIdentity } from './ClientIdentity'
+import { ClientComponent } from './ClientComponent'
 
-    const variable = useVariable(variableKey, true)
-    const variableString = useVariable(variableKeyString, 'default')
-    const variableNumber = useVariable(variableKeyNumber, 100)
-    const variableBoolean = useVariable(variableKeyBoolean, true)
-    const variableJsonString = useVariable(variableKeyJsonString, {
-        jsonStringKeyDefault: 'json string default',
-    })
+const Page: NextPage = async ({ children }: { children: ReactNode }) => {
     return (
-        <div className={styles.container}>
-            <Head>
-                <title>Create Next App</title>
-                <meta
-                    name="description"
-                    content="Generated by create next app"
-                />
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-
-            <main className={styles.main}>
-                <h1 className={styles.title}>
-                    Welcome to <a href="https://nextjs.org">Next.js!</a>
-                </h1>
-
-                <p className={styles.description}>
-                    Get started by editing{' '}
-                    <code className={styles.code}>app/pages.tsx</code>
-                    and
-                    <code className={styles.code}>app/layout.tsx</code>
-                </p>
-
-                <div className={styles.description}>
-                    <div>
-                        <div>
-                            <span>React next js</span>
-                        </div>
-                        <div>
-                            <span>
-                                variable feature-release ={' '}
-                                {JSON.stringify(variable?.value)}{' '}
-                            </span>
-                        </div>
-                        <div>
-                            <span>
-                                variable variable-key-string ={' '}
-                                {JSON.stringify(variableString?.value)}{' '}
-                            </span>
-                        </div>
-                        <div>
-                            <span>
-                                variable variable-key-number ={' '}
-                                {JSON.stringify(variableNumber?.value)}{' '}
-                            </span>
-                        </div>
-                        <div>
-                            <span>
-                                variable variable-key-boolean ={' '}
-                                {JSON.stringify(variableBoolean?.value)}
-                            </span>
-                        </div>
-                        <div>
-                            <span>
-                                variable variable-json-key-string ={' '}
-                                {JSON.stringify(variableJsonString?.value)}{' '}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-
-                <div className={styles.grid}>
-                    <a href="https://nextjs.org/docs" className={styles.card}>
-                        <h2>Documentation &rarr;</h2>
-                        <p>
-                            Find in-depth information about Next.js features and
-                            API.
-                        </p>
-                    </a>
-
-                    <a href="https://nextjs.org/learn" className={styles.card}>
-                        <h2>Learn &rarr;</h2>
-                        <p>
-                            Learn about Next.js in an interactive course with
-                            quizzes!
-                        </p>
-                    </a>
-
-                    <a
-                        href="https://github.com/vercel/next.js/tree/master/examples"
-                        className={styles.card}
-                    >
-                        <h2>Examples &rarr;</h2>
-                        <p>
-                            Discover and deploy boilerplate example Next.js
-                            projects.
-                        </p>
-                    </a>
-
-                    <a
-                        href={
-                            'https://vercel.com/new?utm_source=create-next-app&' +
-                            'utm_medium=default-template&utm_campaign=create-next-app'
-                        }
-                        className={styles.card}
-                    >
-                        <h2>Deploy &rarr;</h2>
-                        <p>
-                            Instantly deploy your Next.js site to a public URL
-                            with Vercel.
-                        </p>
-                    </a>
-                </div>
-            </main>
-
-            <footer className={styles.footer}>
-                <a
-                    href={
-                        'https://vercel.com?utm_source=create-next-app&utm_medium=defa' +
-                        'ult-template&utm_campaign=create-next-app'
-                    }
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Powered by{' '}
-                    <span className={styles.logo}>
-                        <Image
-                            src="/vercel.svg"
-                            alt="Vercel Logo"
-                            width={72}
-                            height={16}
-                        />
-                    </span>
-                </a>
-            </footer>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '400px',
+                padding: '20px',
+            }}
+        >
+            <div
+                style={{
+                    backgroundColor: '#FFD',
+                }}
+            >
+                Server content without a variable call
+            </div>
+            <br />
+            <Suspense fallback={<div>Loading Server...</div>}>
+                <ServerIdentity />
+            </Suspense>
+            <br />
+            <ClientComponent />
+            <br />
+            <Suspense fallback={<div>Loading Client...</div>}>
+                <ClientIdentity />
+            </Suspense>
+            {children}
         </div>
     )
 }
 
-export default Home
+export default Page
diff --git a/examples/nextjs/app-router/app/providers.tsx b/examples/nextjs/app-router/app/providers.tsx
diff --git a/examples/nextjs/app-router/next-env.d.ts b/examples/nextjs/app-router/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/nextjs/app-router/pages/_error.tsx b/examples/nextjs/app-router/pages/_error.tsx
diff --git a/examples/nextjs/app-router/pages/api/hello.ts b/examples/nextjs/app-router/pages/api/hello.ts