First things first, make sure you've got Node.js installed on your machine. Then, let's kick off a new Next.js project. Just pop open your terminal and run:

npx create-next-app@latest supabase-next
cd supabase-next

Now, head over to your project directory and install the Supabase client. It's super easy:

npm install @supabase/supabase-js

Alright, time to sign up or log in to Supabase. Once you're in, create a new project. After that, go to "Settings" → "API" to grab your API URL and API KEY.

In the root of your Next.js project, create a .env.local file. Add these variables with the values you got from the Supabase dashboard:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Next, create a file named supabaseClient.js in your project directory. This is where you'll initialize the Supabase client:

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);

To use Supabase in a Next.js page, import the Supabase client and perform queries or mutations. For example, create a pages/index.js file:

import React, { useEffect, useState } from 'react';
import { supabase } from '../supabaseClient';

export default function Home() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      let { data: items, error } = await supabase
        .from('your-table-name')
        .select('*');
      
      if (error) console.error('Error fetching data:', error);
      else setData(items);
    };

    fetchData();
  }, []);

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

Fire up the Next.js development server to make sure everything's working:

npm run dev

Then, open your browser and go to http://localhost:3000 to see the data fetched from Supabase.

If you want to enable authentication, set up Auth within the Supabase dashboard:

1. Go to the "Authentication" tab in your Supabase project.
2. Enable the authentication providers you want (like email, GitHub, Google).
3. Configure sign-in/sign-up functionality in your Next.js app using the Supabase client.

// Example of a sign-in function
const signInWithEmail = async (email, password) => {
  const { user, session, error } = await supabase.auth.signIn({ email, password });
  if (error) console.error('Error signing in:', error);
  else console.log('User signed in:', user);
};

Note: Make sure to add the corresponding UI elements like forms and buttons so users can interact with the authentication functions.