Nextbase Nextjs Supabase Starter

Overview

NextBase Starter is an open-source and free boilerplate for building applications using Next.js 13 and Supabase. It provides a Next.js 13 app with features such as Typescript, Supabase integration, Tailwind CSS, and more. It also includes several development tools and configurations for ease of use.

Features

• Next.js 13 with async components
• Data fetching examples in React server and client components with minimal loading screens
• Configured setup for React Query
• React Hot Toast component for displaying notifications
• Fully typed with Typescript, including automatic type generation for Supabase tables
• Integrated Tailwind CSS for styling
• Built-in unit testing and integration testing setups
• Configurations for Eslint, typescript, prettier, postcss for development and testing environments
• Automatic sitemap generation
• SEO metadata, JSON-LD, and Open Graph tags with NEXT SEO
• Semantic release with automatic changelog generation
• Prettier code formatter
• Minimal styling for codebase readability and modification

Installation

1. Clone the repo.
2. Install dependencies with yarn.
3. Create a Supabase account if you don’t have one already.
4. Create a new project in Supabase.
5. Link Supabase to your project using yarn supabase link --project-ref <project-ref>. You can find your project ref in the Supabase Project dashboard (Project Settings -> API).
6. Duplicate .env.local.example and rename it to .env.local. Add the Project ref, Supabase URL, and anon key.
7. Push the database schema to your Supabase project using yarn supabase db push.
8. Generate types for your Supabase tables using yarn generate:types:local.
9. Run yarn dev to start the development server.

Summary

NextBase Starter is a feature-rich boilerplate for Next.js 13 and Supabase development. It provides a solid foundation for building applications with modern front-end technologies such as Typescript and Tailwind CSS. With its pre-configured setup and additional tools, developers can quickly start building and testing their applications. The documentation provides clear and concise instructions for installation and deployment. Overall, NextBase Starter is a powerful and convenient tool for developers looking to jumpstart their Next.js and Supabase projects.