← Back to Blog

Setting Up a Personal Website with Next.js and Supabase

·1 min read
tutorialnextjssupabasetailwind

Tech Stack

This website was built with the following tech stack:

Frontend

  • Next.js 16 with App Router
  • TypeScript for type safety
  • Tailwind CSS for styling

Content

  • MDX for blog posts
  • gray-matter for parsing frontmatter
  • rehype-pretty-code for syntax highlighting

Backend

  • Supabase for database and authentication

Project Structure

├── content/
│   └── blog/          # MDX blog posts
├── src/
│   ├── app/           # Next.js App Router
│   ├── components/    # React components
│   └── lib/           # Utilities & configs
└── public/            # Static assets

Features

  • ✅ Blog with MDX
  • ✅ Syntax highlighting
  • ✅ Reading time
  • ✅ Responsive design
  • ✅ Dark mode support
  • ✅ SEO friendly

Hope this helps!