Alright, let's get started with Supabase and Next.js. First things first, we need to install some packages. Just run this command:

npm install @supabase/supabase-js

Next up, we need to set up the Supabase client. Create a new file in the root directory and name it supabaseClient.js. This is where we'll initialize the Supabase client using your Supabase URL and public Anon key.

// supabaseClient.js

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Don't forget to store these environment variables in a .env.local file. It should look something like this:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Now, let's fetch some data from Supabase. We'll use the getServerSideProps function in your Next.js pages. This way, the data is rendered on the server side before it gets to the client.

// pages/index.js

import { supabase } from '../supabaseClient';

export async function getServerSideProps() {
  let { data, error } = await supabase.from('your_table_name').select('*');

  if (error) {
    console.error(error);
    return { props: { data: [] } };
  }

  return {
    props: {
      data,
    },
  };
}

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Data from Supabase</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default HomePage;

Alright, now let's display that data in your component. The getServerSideProps function will pass the fetched data as props to the component.

// pages/index.js

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Data from Supabase</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.column_name}</li>
        ))}
      </ul>
    </div>
  );
};

export default HomePage;

Make sure to keep your environment variables safe. Add .env.local to your .gitignore file so they don't get pushed to version control.

.env.local

Finally, let's run your Next.js application and see everything in action. Just use this command:

npm run dev

You should now see the server-side rendered data from Supabase on your Next.js page. Enjoy!