Add server-actions and RSC example

vercel · Jul 28, 2023 · 1825c2e · 1825c2e
1 parent f56294f
commit 1825c2e
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 38 deletions.
diff --git a/apps/nextjs/app/layout.tsx b/apps/nextjs/app/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/apps/nextjs/app/rsc/page.tsx b/apps/nextjs/app/rsc/page.tsx
@@ -0,0 +1,10 @@
+import { headers } from 'next/headers';
+import { track } from '@vercel/analytics/server';
+
+export default async function RSC() {
+  track('Viewed Experiment', undefined, {
+    headers: headers(),
+  });
+
+  return <div>I did track a server action on render</div>;
+}
diff --git a/apps/nextjs/app/server-actions/page.tsx b/apps/nextjs/app/server-actions/page.tsx
@@ -0,0 +1,26 @@
+import { headers } from 'next/headers';
+import { track } from '@vercel/analytics/server';
+
+export default function FeedbackPage() {
+  async function submitFeedback(data: FormData) {
+    'use server';
+
+    await track(
+      'Feedback',
+      {
+        message: data.get('feedback') as string,
+      },
+      {
+        // If we pass headers, the event will be connected to the page views/session
+        headers: headers(),
+      },
+    );
+  }
+
+  return (
+    <form action={submitFeedback}>
+      <input type="text" name="feedback" placeholder="Feedback" />
+      <button type="submit">Submit Feedback</button>
+    </form>
+  );
+}
diff --git a/apps/nextjs/next.config.js b/apps/nextjs/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverActions: true,
+  },
+};
+
+module.exports = nextConfig;
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@vercel/analytics": "workspace:*",
-    "next": "^13.4.7",
+    "next": "^13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },