Nextbase Lite

Overview

NextBase Lite is a free and open-source Next.js 13 + Supabase boilerplate. It provides a simplified starting point for building Next.js applications with Supabase integration. The boilerplate includes a Next.js 13 app with TypeScript, Supabase, and Tailwind CSS. It also comes with features such as data fetching examples, React Query setup, React Hot Toast component, unit testing and integration testing setups, automatic sitemap generation, SEO metadata, JSON-LD and Open Graph tags, automatic changelog generation, and more.

Features

• Next.js 13 with async components
• Data fetching examples in React server and client components with minimal loading screens
• React Query setup configured
• React Hot Toast component
• Fully typed with TypeScript, including automatic type generation for Supabase tables
• Tailwind CSS for styling
• Unit testing and integration testing setups built-in
• Eslint, typescript, prettier, postcss configured for dev and test 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 easy customization

Installation

To install NextBase Lite, follow the steps below:

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 get your project ref from 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 to the .env.local file.
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 Lite is a free and open-source Next.js 13 + Supabase boilerplate that offers a simple starting point for building Next.js applications with Supabase integration. It comes with various features such as data fetching examples, React Query setup, unit testing, automatic sitemap generation, and more. The installation process is straightforward, requiring the cloning of the repository, installation of dependencies, and linking Supabase to the project. Overall, NextBase Lite provides developers with a solid foundation for creating Next.js applications with Supabase.