NextJS & Supabase Custom LinkTree

A modern, customizable link-in-bio solution built with Next.js and Supabase.

🚀 Features

• 🎨 Responsive design with a modern UI
• 🔗 Easy to customize links and social media profiles
• ⚡ Built with Next.js for fast performance
• 📊 Analytics dashboard for tracking link clicks
• 🌍 Geolocation data using Vercel headers
• 🛡️ Optional Redis-based rate limiting

🛠️ Tech Stack

• Frontend: Next.js, React, TypeScript
• Styling: Tailwind CSS
• Backend: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• Deployment: Vercel
• Rate Limiting: Redis (optional)

🚦 Quick Start

1. Fork and clone the repository
2. Install dependencies: npm install
3. Set up your Supabase project and environment variables
4. Run the development server: npm run dev

For detailed setup instructions, see the Getting Started section below.

📖 Table of Contents

• Getting Started
• Customization
• Accessing the Dashboard
• Deployment
• Contributing
• License
• Support
• Contact

🚀 Getting Started

Prerequisites

• Node.js and npm
• GitHub account
• Vercel account (for deployment)

Installation

1. Fork the GitHub repository
2. Clone your forked repository:

   git clone https://github.com/your-username/Linktree-nextjs-supabase-template.git
   cd Linktree-nextjs-supabase-template

3. Install dependencies:

   npm install

Customization

1. Update Metadata

   Open app/layout.tsx and update the metadata object with your own information:

   export const metadata: Metadata = {
     title: "Your Name's Links",
     description: "All my links, resources, and interesting things all in one place.",
     author: "Your Name",
     keywords: "Your Name, portfolio, projects, links, web development",
     viewport: "width=device-width, initial-scale=1",
   };

2. Customize Links

   Open constants/links.ts and update the socialLinks and items arrays with your own links and resources:

   export const socialLinks = [
     { platform: "LinkedIn", url: "https://www.linkedin.com/in/your-profile/" },
     { platform: "Twitter", url: "https://twitter.com/your-profile" },
     // Add more social links as needed
   ];
   
   export const items: LinkItem[] = [
     {
       type: "link",
       title: "Your Project",
       url: "https://yourproject.com",
     },
     // Add more items as needed
   ];

   To create a category, simply make the type "category" and only include a title.

3. Add Your Profile Image

   Replace the pfp.png file in the public directory with your own profile image. Ensure the image is named pfp.png to match the existing code.

Geolocation with Vercel Headers

This project uses Vercel headers to gather geolocation data for analytics purposes. The geolocation.ts file in the utils directory contains the logic for extracting location information from Vercel request headers. This method provides country, city, and region information without the need for external API calls.

Redis-based Rate Limiting (Optional)

To prevent abuse and limit requests from potential bad actors, this project includes an optional Redis-based rate limiting system. To enable it:

1. Set up a Redis instance (you can use services like Upstash for serverless Redis).
2. Add your Redis connection details to the environment variables.
3. Ensure the SKIP_RATE_LIMIT environment variable is set to false.

You can adjust the rate limiting parameters in the rateLimit.ts file to suit your needs.

Running the Project

To start the development server, run: npm run dev

Accessing the Dashboard

To set up and access the dashboard for analytics, follow these steps:

1. Create a new email user in Supabase

   • Make sure email is enabled as a provider in your Supabase project settings.
   • Here's how the authentication settings should look:

2. Set up Supabase environment variables

   • Ensure that your Supabase environment variables are correctly set up in your .env.local file and in your deployment environment.

3. Run SQL commands for analytics

   • In the utils/sql folder, you'll find two SQL files: rpc.sql and table.sql.
   • Run both SQL commands in your Supabase SQL editor:
     • rpc.sql creates the RPC function for analytics.
     • table.sql creates the necessary table in the database.

4. Enable Row Level Security (RLS) on the table

   • After creating the table, enable RLS on it.
   • Set up RLS policies to ensure:
     1. All users can update the table (for recording link clicks).
     2. Only authenticated users (you) can read from the table (for viewing analytics).
     • Note: they have pre-made policies you can choose from in the Supabase dashboard's under Authentication > Policies > the table > create policy

Once you've completed these steps, you should be able to access the dashboard at /dashboard after logging into /login by logging in with the email user you created in Supabase. The dashboard will display analytics for your link site.

Deployment

This project is set up for easy deployment on Vercel. To deploy your link site:

1. Push Your Changes

   Ensure all your changes are committed and pushed to your GitHub repository.

2. Connect to Vercel

   • Go to Vercel and sign in or create an account.
   • Click on "Add New..." and select "Project" from the dropdown.
   • Choose "Import Git Repository" and select your GitHub repository.

3. Configure Project

   • Vercel will automatically detect that it's a Next.js project.
   • Configure your project name and framework preset (should be auto-detected as Next.js).

4. Environment Variables

   • In the Vercel deployment interface, go to the "Environment Variables" section.

   • Add the following environment variables from your .env.local file:

     • NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL
     • NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key

   • You may need to add additional variables depending on your configuration:

     • REDIS_TOKEN: Your Redis connection token (if using rate limiting)
     • SKIP_RATE_LIMIT: Set to "true" if not using Redis

   Basic example with rate limiting:

   NEXT_PUBLIC_SUPABASE_URL=https://your-project-url.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   REDIS_TOKEN=your-redis-token
   

   Basic example without:

   NEXT_PUBLIC_SUPABASE_URL=https://your-project-url.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   SKIP_RATE_LIMIT=true
   

   Note: Never commit your .env.local file to version control. The values provided here are just examples.

5. Deploy

   • Click "Deploy" and wait for Vercel to build and deploy your project.
   • Vercel will provide you with a deployment URL once it's complete.

6. Custom Domain (Optional)

   • In your Vercel project dashboard, go to "Settings" > "Domains".
   • Add your custom domain and follow Vercel's instructions to configure your DNS settings.

7. Automatic Deployments

   • Vercel automatically sets up a GitHub integration.
   • Any future pushes to your main branch will trigger automatic deployments.

With Vercel, you get automatic HTTPS, continuous deployment, and excellent performance out of the box. Your link site will be live and accessible via the Vercel-provided URL or your custom domain if configured.

This is all designed to run within the free tier of Vercel and Upstash for small-scale personal use. If you expect high traffic or need more advanced features, consider upgrading your Vercel plan or using additional services.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to contribute.

📝 License

This project is open source and available under the MIT License.

💖 Support

If you find this project helpful and want to support its development, you can buy me a coffee:

Your support is greatly appreciated and helps keep this project going!

📬 Contact

Anthony Sistilli - @SistilliAnthony

⭐️ Show your support

If this project helped you, please consider giving it a ⭐️!