I'll create a simple CRUD (Create, Read, Update, Delete) application backed by Supabase using Next.js and React. We'll create a basic task management app where users can add, view, edit, and delete tasks.

Let's start by creating the necessary files for our CRUD app:

This CRUD app allows users to create, read, update, and delete tasks using Supabase as the backend. Here's a breakdown of the components and their functions:

1. lib/supabase.ts: Sets up the Supabase client using environment variables.
2. types/task.ts: Defines the Task interface.
3. app/page.tsx: The main page component that renders the TaskList.
4. app/components/TaskList.tsx: The core component that handles displaying tasks and user interactions.
5. app/actions/taskActions.ts: Server Actions for handling database operations.

To use this app, you'll need to:

1. Set up a Supabase project and create a 'tasks' table with columns: id (int8), title (text), is_completed (boolean), and created_at (timestamptz).

2. Add your Supabase URL and anon key to your environment variables:

   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY

This app provides a simple interface for managing tasks, with the ability to add new tasks, mark them as completed, and delete them. The UI is styled using Tailwind CSS and shadcn/ui components for a clean, modern look.

You can further enhance this app by adding features like:

• User authentication
• Task categories or tags
• Due dates for tasks
• Sorting and filtering options

Let me know if you want to expand on any part of this CRUD app or if you have any questions!

I'll modify our CRUD app to move the database access to server components and actions, and use non-public environment variables for better security. This approach aligns with Next.js best practices for handling sensitive operations server-side.

Let's update our CRUD app:

These changes move our database access to server components and actions, improving security and performance. Here's a summary of the modifications:

1. Updated lib/supabase.ts to use non-public environment variables (SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY).
2. Converted TaskList to a server component that fetches tasks server-side.
3. Created TaskItem as a client component to handle individual task interactions.
4. Created CreateTaskForm as a client component for adding new tasks.
5. Updated server actions to use server-side Supabase client and added revalidatePath for cache invalidation.
6. Simplified the main page component to use the server-side TaskList.

To use this updated app, you'll need to:

1. Set up a Supabase project and create a 'tasks' table with columns: id (int8), title (text), is_completed (boolean), and created_at (timestamptz).

2. Add your Supabase URL and service role key to your environment variables (not prefixed with NEXT_PUBLIC):

   • SUPABASE_URL
   • SUPABASE_SERVICE_ROLE_KEY

This updated version provides better security by keeping sensitive operations server-side and using non-public environment variables. It also leverages Next.js 13+ features like Server Components and Server Actions for improved performance and developer experience.

Remember to handle any errors appropriately in a production environment and consider adding user authentication for a more secure application.