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
- Clone the repo.
- Install dependencies with yarn.
- Create a Supabase account if you don’t have one already.
- Create a new project in Supabase.
- 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). - Duplicate
.env.local.exampleand rename it to.env.local. Add the Project ref, Supabase URL, and anon key. - Push the database schema to your Supabase project using
yarn supabase db push. - Generate types for your Supabase tables using
yarn generate:types:local. - Run
yarn devto 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.