Tutorials

Learn how to build an AI Writer SaaS with Next.js and Supabase - from writing SEO optimized blog posts to managing subscriptions and billing.

We're excited to announce the Data Loader SDK for Supabase. It's a declarative, type-safe set of utilities to load data into your Supabase database that you can use in your Next.js or Remix apps.

In this tutorial, we will learn how to use add AI capabilities to your SaaS using Supabase Vector, HuggingFace models and Next.js Server Components.

Learn how to build a blog with Next.js 13 and WordPress and how to leverage AI to generate content.

Supabase Vault is a Postgres extension that allows you to store secrets in your database. This is a great way to store API keys, tokens, and other sensitive information. In this tutorial, we'll use Supabase Vault to store our API keys

Next.js Server Actions are a new feature introduced in Next.js 13 that allows you to run server code without having to create an API endpoint. In this article, we'll learn how to use them.

Unlock the full potential of Next.js 13 with our most complete and definitive tutorial on using server components and the app directory.

Discover the best practices for paginating data using Supabase and React.js using the Supabase Postgres client

Sell and monetize your code by giving private access to your Github repositories using Lemon Squeezy

Level up your React coding skills with Typescript using our comprehensive guide on writing clean code. Start writing clean React code, today.

Learn how to use MeiliSearch in your React application with this guide. We will use Meiliseach to add a search engine for our blog posts

Learn how to set environment variables in Remix and how to ensure that they are available in the client-side code.

Testing code that requires users to be signed in can be tricky. In this post, we show you how to sign in programmatically with Supabase Authentication to improve the speed of your Cypress tests and increase their reliability.

Resetting your database during E2E tests is important to prevent flakiness. In this tutorial, we'll show you how to reset the Supabase database in Cypress E2E tests.

Learn how to use Remix and Supabase to authenticate users in your application.

Learn how Makerkit can help boost your SaaS SEO thanks to its optimized codebase and SEO-friendly features.

Sell and monetize your code by giving private access to your Github repositories using Gumroad

A simple guide to migrating your _app.tsx component to the new Server Components released with Next.js 13

A simple introduction to using Server Components and the new Layouts Folder Structure with Next.js 13

In this article, we learn how to count the number of documents in a Firestore collection using a custom React.js hook.

In this article, we learn how to paginate data fetched from Firebase Firestore with React.js

In this article, we explain how to build Multi-Step forms with Next.js and the library react-hook-form

In this article, we create a Language dropdown to switch to another language using Next.js and next-i18n.

Implement a waitlist sign-up with Firebase Auth and allow sign-ins in batches to your SaaS

In this article, we share how to use ElasticSearch with Next.js to index your Firestore documents and make them searchable.

Firebase Storage now allows you to use Firestore queries to in your security rules. Here is all you need to know!

PWA can make your app look native, faster, updatable and offline-ready. In this post, we learn how to make a PWA with a Next.js application.

Learn how to add Email Link authentication to your SaaS application with Firebase Auth and Next.js

This walkthrough is a summary of the documentation to quickly bootstrapping a SaaS project with Makerkit

Firebase AppCheck helps us protect our websites against bad actors such as automated bots. In this post, we integrate Firebase AppCheck in a Next.js application.

Testing Cypress can require your test users sign-in programmatically. In this article, we show you how to sign in users with Firebase and Cypress without using the UI.

Find out how to cache a Next.js Serverless API with Redis

Learn everything you need to start collecting payments for your Next.js application with Stripe Checkout

In this post, we share how to optimize the performance of your Next.js website and improve your Core Web Vitals

Learn how to call API endpoints in your Next.js application

Learn when to use SSR or SSG with your Next.js application

Firebase has introduced functions that allow us to write server logic before or after authenticating. Let's see how to use them.

Want to grow your Newsletter list? Learn how to build a sign-up form with Convertkit and Next.js

Sitemaps are fundamental for SEO. This post shares how to build a sitemap with Next.js

Learn how to write Firebase security rules for groups of users

A complete guide to using Next.js and Google Analytics

The full guide to testing Stripe Checkout with Cypress

Let's create an MDX-powered blog and portfolio starter that you can deploy right away with Next.js and Tailwind CSS

Learn the tips and techniques to develop a highly search-engine optimized Next.js website.

Learn how to architecture the data model of a SaaS application with Firebase Firestore

Learn how to start using Firebase Firestore in your Next.js and React application

Learn how to secure your Firebase Firestore database with Security Rules

A complete guide to setting up the Firebase Emulators within a Next.js and React application

The ultimate guide to adding Firebase authentication to any Next.js and React applications