Next.js 14 + Supabase Website Template

🚀 Production-Ready • 🔒 Type-Safe • 💎 Feature-Rich

Features • Live Demo • Quick Start • Supabase Features • Deploy

---

✨ Features

• 🏗️ Next.js 14 - Latest features including App Router and Server Components
• 🔐 Supabase - Production-ready backend with:
  • 🔑 Authentication (Email, Social Providers)
  • 📦 Database (PostgreSQL)
  • 🗂️ Storage (Large Media Files)
  • 🔄 Real-time Subscriptions
  • 🚀 Edge Functions
• 🎨 Modern Stack:
  • 💅 Tailwind CSS - Utility-first CSS
  • 🧱 shadcn/ui - Re-usable components
  • 🔍 TypeScript - Type safety
  • 📱 Responsive Design
  • 🌐 SEO Optimized

🎯 Quick Start

1️⃣ Clone & Install

# Clone the repository
git clone https://github.com/yourusername/next-js-website-template.git

# Navigate to the project
cd next-js-website-template

# Install dependencies
npm install

2️⃣ Set Up Supabase

1. Create a Supabase project at supabase.com
2. Copy your project credentials
3. Set up environment variables:

cp .env.example .env.local

4. Fill in your Supabase credentials in .env.local

3️⃣ Run Development Server

npm run dev

Visit http://localhost:3000 🎉

🔥 Supabase Features

Authentication

// Sign Up
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password123'
})

// Sign In
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password123'
})

// Social Auth (GitHub example)
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github'
})

Database Operations

// Create
const { data, error } = await supabase
  .from('todos')
  .insert({ task: 'Buy milk', user_id: user.id })

// Read
const { data, error } = await supabase
  .from('todos')
  .select('*')
  .eq('user_id', user.id)

// Update
const { data, error } = await supabase
  .from('todos')
  .update({ completed: true })
  .eq('id', todoId)

// Delete
const { data, error } = await supabase
  .from('todos')
  .delete()
  .eq('id', todoId)

Real-time Subscriptions

// Subscribe to changes
const subscription = supabase
  .channel('todos')
  .on('postgres_changes', 
    { event: '*', schema: 'public', table: 'todos' },
    (payload) => {
      console.log('Change received!', payload)
    }
  )
  .subscribe()

File Storage

// Upload file
const { data, error } = await supabase.storage
  .from('avatars')
  .upload('public/avatar1.png', file)

// Download file
const { data, error } = await supabase.storage
  .from('avatars')
  .download('public/avatar1.png')

📁 Project Structure

├── src/
│   ├── app/                 # App Router Pages
│   │   ├── (auth)/         # Authentication Routes
│   │   ├── dashboard/      # Protected Routes
│   │   └── page.tsx        # Home Page
│   ├── components/         # React Components
│   │   ├── ui/            # UI Components
│   │   └── auth/          # Auth Components
│   ├── lib/               # Utilities
│   │   ├── supabase.ts    # Supabase Client
│   │   └── utils.ts       # Helper Functions
│   └── types/             # TypeScript Types
├── public/                # Static Assets
└── ...config files

🔧 Advanced Configuration

Database Schema

-- Example schema for a basic todo app
create table public.todos (
  id uuid default uuid_generate_v4() primary key,
  user_id uuid references auth.users not null,
  task text not null,
  completed boolean default false,
  created_at timestamp with time zone default timezone('utc'::text, now())
);

-- Enable Row Level Security
alter table public.todos enable row level security;

-- Create policies
create policy "Users can view their own todos" 
  on todos for select using (auth.uid() = user_id);

Storage Buckets

1. Create a new bucket:

insert into storage.buckets (id, name)
values ('avatars', 'avatars');

2. Set up storage policies:

create policy "Avatar images are publicly accessible"
  on storage.objects for select
  using ( bucket_id = 'avatars' );

create policy "Users can upload their own avatar"
  on storage.objects for insert
  with check ( bucket_id = 'avatars' AND auth.uid() = owner );

🚀 Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Import your repository to Vercel
3. Add your environment variables
4. Deploy!

Deploy to Other Platforms

• Railway
• Netlify
• DigitalOcean

📚 Learning Resources

• Supabase Documentation
• Next.js Documentation
• Tailwind CSS Documentation
• TypeScript Documentation

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

💖 Support

If you find this template helpful, please give it a ⭐️ on GitHub and consider:

• Following me on GitHub
• Reporting issues
• Contributing to the project

---

Made by elhard1