feat: add nextjs 13 example.

supabase · Oct 26, 2022 · 8aaf2a0 · 8aaf2a0
1 parent 5494190
commit 8aaf2a0
Show file tree

Hide file tree

Showing 9 changed files with 254 additions and 22 deletions.
diff --git a/examples/nextjs/.gitignore b/examples/nextjs/.gitignore
@@ -35,3 +35,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+.vscode
diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx
@@ -0,0 +1,12 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/examples/nextjs/app/nextjs-13/client-component/page.tsx b/examples/nextjs/app/nextjs-13/client-component/page.tsx
@@ -0,0 +1,25 @@
+// Next.js 13 SSR
+// NOTE: This is experimental and used as research to understand how to support Next.js 13 in the future.
+// https://beta.nextjs.org/docs/data-fetching/fetching#example-fetch-and-use-in-client-components
+
+import { use } from 'react';
+import { createClient } from '@supabase/supabase-js';
+
+async function getData() {
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL as string,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
+  );
+
+  const {
+    data: { user }
+  } = await supabase.auth.getUser();
+  const { data } = await supabase.from('products').select('*').limit(1);
+
+  return { user, data };
+}
+
+export default function Page() {
+  const data = use(getData());
+  return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}
diff --git a/examples/nextjs/app/nextjs-13/page.tsx b/examples/nextjs/app/nextjs-13/page.tsx
@@ -0,0 +1,30 @@
+// Next.js 13 SSR
+// NOTE: This is experimental and used as research to understand how to support Next.js 13 in the future.
+
+import Link from 'next/link';
+
+export default async function Page() {
+  return (
+    <>
+      <h1>Next.js 13 examples</h1>
+      <ul>
+        <li>
+          fetch and use in Client Components [
+          <Link href={'/nextjs-13/client-component'}>example</Link> |{' '}
+          <a href="https://beta.nextjs.org/docs/data-fetching/fetching#example-fetch-and-use-in-client-components">
+            docs
+          </a>
+          ]
+        </li>
+        <li>
+          Dynamic Data (used to be getServerSideProps) [
+          <Link href={'/nextjs-13/ssr'}>example</Link> |{' '}
+          <a href="https://beta.nextjs.org/docs/data-fetching/fetching#dynamic-data">
+            docs
+          </a>
+          ]
+        </li>
+      </ul>
+    </>
+  );
+}
diff --git a/examples/nextjs/app/nextjs-13/ssr/page.tsx b/examples/nextjs/app/nextjs-13/ssr/page.tsx
@@ -0,0 +1,79 @@
+// Next.js 13 SSR
+// NOTE: This is experimental and used as research to understand how to support Next.js 13 in the future.
+
+import { cookies, headers } from 'next/headers';
+import {
+  CookieOptions,
+  createBrowserSupabaseClient as _createBrowserSupabaseClient,
+  createServerSupabaseClient as _createServerSupabaseClient,
+  ensureArray,
+  filterCookies,
+  serializeCookie
+} from '@supabase/auth-helpers-shared';
+
+function createServerSupabaseClient<
+  Database = any,
+  SchemaName extends string & keyof Database = 'public' extends keyof Database
+    ? 'public'
+    : string & keyof Database
+>({
+  cookieOptions
+}: {
+  cookieOptions?: CookieOptions;
+} = {}) {
+  if (
+    !process.env.NEXT_PUBLIC_SUPABASE_URL ||
+    !process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  ) {
+    throw new Error(
+      'NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY env variables are required!'
+    );
+  }
+
+  return _createServerSupabaseClient<Database, SchemaName>({
+    supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    getRequestHeader: (key) => headers().get(key) ?? undefined,
+
+    getCookie(name) {
+      return cookies().get(name);
+    },
+    setCookie(name, value, options) {
+      // TODO: figure out how to access response object
+      // const newSetCookies = filterCookies(
+      //   ensureArray(context.res.getHeader('set-cookie')?.toString() ?? []),
+      //   name
+      // );
+      // const newSessionStr = serializeCookie(name, value, {
+      //   ...options,
+      //   // Allow supabase-js on the client to read the cookie as well
+      //   httpOnly: false
+      // });
+      // context.res.setHeader('set-cookie', [...newSetCookies, newSessionStr]);
+    },
+    options: {
+      global: {
+        // fetch // TODO: is this needed?
+      }
+    },
+    cookieOptions
+  });
+}
+
+// https://beta.nextjs.org/docs/data-fetching/fetching#segment-cache-configuration
+export const cache = 'no-store';
+
+async function getData() {
+  const supabase = createServerSupabaseClient();
+  const {
+    data: { user }
+  } = await supabase.auth.getUser();
+  const { data } = await supabase.from('users').select('*');
+
+  return { user, data };
+}
+
+export default async function Page() {
+  const data = await getData();
+  return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}
diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js
@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  experimental: {
+    appDir: true
+  }
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -12,7 +12,9 @@
   "dependencies": {
     "@supabase/auth-helpers-nextjs": "workspace:*",
     "@supabase/auth-helpers-react": "workspace:*",
+    "@supabase/auth-helpers-shared": "workspace:*",
     "@supabase/auth-ui-react": "^0.1.8",
+    "@supabase/supabase-js": "^2.0.4",
     "eslint-config-next": "^13.0.0",
     "next": "^13.0.0",
     "react": "18.2.0",
@@ -21,7 +23,8 @@
   "devDependencies": {
     "@babel/core": ">=7.0.0 <8.0.0",
     "@types/node": "^17.0.12",
-    "@types/react": "17.0.37",
+    "@types/react": "^18.0.23",
+    "@types/react-dom": "^18.0.7",
     "config": "workspace:*",
     "encoding": "^0.1.13",
     "eslint": "7.32.0",

diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,20 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,3 +35,5 @@ yarn-error.log*

		# typescript
		*.tsbuildinfo

		.vscode