Next 13 example (app/ Directory)

[wiesson]

Feature request

Next 13 has been released https://nextjs.org/blog/next-13#layouts and a new app structure with data fetching has been introduced (currently in beta).

Is your feature request related to a problem? Please describe.

I tried to adapt but I got errors on server side that the supabase client has problem with the polyfilled fetch provided by next.

Describe the solution you'd like

Just a minimal working example would be nice :)

[thorwebdev]

@wiesson would you be able to provide your code and screenshots of the errors you were seeing? I'm working on an example now, but it would be helpful to understand how you approached this and what errors you experienced. Thanks.

[wiesson]

import { use } from "react";
import { createClient } from "@supabase/supabase-js";

const supabaseServer = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL as string,
  process.env.SUPABASE_SERVICE_KEY as string
);

async function getData() {
  const { data } = await supabase
    .from("bookings_booking")
    .select("*")
    .order("created_at", { ascending: false });

  return data;
}

export default function Page() {
  const bookings = use(getData());
  return (
    <div>
      {bookings((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

Error

warn  - ../../node_modules/.pnpm/[email protected]/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/wiese/Dev/tm/next-13/node_modules/.pnpm/[email protected]/node_modules/node-fetch/lib'
Warning: Only createServerContext is supported in Server Components.

I tried to monkey-patch node-fetch to version 3.X but then I got ESM Import errors. What works (kind of)

const fetch = (...args) =>
  import("node-fetch").then(({ default: fetch }) => fetch(...args));

const supabaseServer = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL as string,
  process.env.SUPABASE_SERVICE_KEY as string,
  {
    global: {
      fetch,
    },
  }
);

I still get the error, but I also get data. I assume that server rendering fails but FE can fetch it

[thorwebdev]

@wiesson this is working fine for me

// /app/nextjs-13/client-component/page.tsx
import { use } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL as string,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
);

async function getData() {
  const { data } = await supabase.from('users').select('*');

  return data;
}

export default function Page() {
  const data = use(getData());
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

With the following versions

"dependencies": {
    "@supabase/supabase-js": "^2.0.4",
    "eslint-config-next": "^13.0.0",
    "next": "^13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },

What versions are you using?

[thorwebdev]

Also note that you should not use SUPABASE_SERVICE_KEY client-side. It sounds like everything is being server-rendered now, so maybe it's fine, but I'm not yet entirely sure if the env vars might be exposed to the client or not.

[wiesson]

Also note that you should not use SUPABASE_SERVICE_KEY client-side. It sounds like everything is being server-rendered now, so maybe it's fine, but I'm not yet entirely sure if the env vars might be exposed to the client or not.

It was just for testing purposes - I'm trying to find if it runs on the client or on the server. I still have the same issues as mentioned initially. Even if I directly copy your example:

"dependencies": {
    "@supabase/supabase-js": "^2.0.4",
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.11.5",
    "@types/react": "18.0.23",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.0",
    "typescript": "4.8.4"
  }

node LTS (v16.18.0)
pnpm 7.14.0

[thorwebdev]

@wiesson any chance your code is available on GitHub somewhere? I'm currently not able to reproduce this. You can find my code here: https://github.com/supabase/auth-helpers/pull/342/files

[wiesson]

Thanks for the repo! I'll test it.

https://github.com/wiesson/supabase-next-13

warn  - ./node_modules/.pnpm/[email protected]/node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in '/Users/wiese/Dev/testing/supabase-next-13/node_modules/.pnpm/[email protected]/node_modules/node-fetch/lib'

I saw that you explicitly called your route "client-component" but I can't see a "use client" - how do you know that it will be only loaded client-side? I suspect that you won't have any fetch errors because supabase will use the native browser fetch instead 🤔

[thorwebdev]

I'm missing it because the guide as well as your snippet above aren't using it https://beta.nextjs.org/docs/data-fetching/fetching#example-fetch-and-use-in-client-components. Refactoring now.

In the guide it does however say:

fetch is currently not supported in Client Components and may trigger multiple re-renders. For now, if you need to fetch data in a Client Component, we recommend using a third-party library such as SWR.

[thorwebdev]

Based on https://beta.nextjs.org/docs/data-fetching/fetching#example-fetch-and-use-in-client-components it sounds like fetch and use should not be used in client components. So I'm not sure why they have the example there. I'll check with the vercel team.

It does work fine when adding use client, but it constantly refetches. I guess that's why it shouldn't be used client side and you should rather stick with SWR etc.

[thorwebdev]

@wiesson I'm able to reproduce the warning with your repo, but it should be safe to ignore as it's an optional dependency in node-fetch and supabase-js defaults to the global fetch object when there is one: https://github.com/supabase/supabase-js/blob/master/src/lib/fetch.ts#L9-L15

Therefore should be safe to ignore, but nonetheless, I've filed it here: supabase/supabase-js#612

Thanks for the report!