Blog

The blog of Makerkit. Discover the latest about Makerkit, Next.js, Remix, Supabase,and more.

Using Drizzle ORM with Supabase in Next.js: A Complete GuideIn this comprehensive guide, we'll walk through integrating Drizzle ORM with your Next.js Supabase project, offering you the best of both worlds: Supabase's powerful features and Drizzle's type-safe query builder.
Smoke Testing Your SaaS: A Practical Guide for FoundersLearn how to implement effective smoke testing for your SaaS application. This guide covers essential test scenarios, implementation strategies, and best practices to quickly verify core functionality.
SaaS Error Monitoring with TelegramTelegram bots are super fun and easy to set up. In this post, we'll show you how to use Telegram to monitor your SaaS and get notified when errors occur in Makerkit
End-to-End Testing Your SaaS with Playwright: A Comprehensive GuideThis comprehensive article teaches end-to-end testing using Playwright, based on real-world examples from a Next.js SaaS application. You'll learn industry best practices, test architecture patterns, and practical implementation strategies.
Next.js App Router: Project StructureThis guide will help you with the architecture and structure of a production-grade Next.js App Router project.
Server Actions vs Route Handlers in Next.jsNext.js allows you to use Server Actions or API Route Handlers to execute code server side and call it from the client. Which one should you use?
Server-only Code in Next.js 15Ensure your Next.js code is only executed on the server-side using these lesser known Next.js features
The True Cost of Building a SaaS Starter Kit From ScratchWant to buy a SaaS Starer Kit, but you don't know if it's worth it? This guide will help you make the right decision.
How to dynamically generate Open Graph images with Next.js and MakerkitIn this tutorial, we'll learn how to dynamically generate Open Graph images with Next.js and Makerkit
Using the new Shadcn Sidebar in MakerkitWe have updated the sidebar to use the new Shadcn Sidebar. It's a new design and a more powerful component. In this post, we will learn how to use the new Shadcn Sidebar in Makerkit.
Upgrading to Next.js 15Preparing the migration to Next.js 15. In this post, we will cover the changes that you need to make to your project to upgrade to Next.js 15, and how Makerkit will approach the migration.
Announcing the Analytics Package for MakerkitWe're excited to announce the launch of the Analytics Package for Makerkit, enabling you to track user interactions and monitor your users behavior.
Secure One-Time Tokens with Supabase and PostgresLearn how to implement robust, self-cleaning nonces using Postgres functions in your Supabase project.
Introducing the Roadmap Plugin: Track and Share Your Project's ProgressThe Roadmap Plugin allows you to create a roadmap for your project and display it on your website. Your users can see what features are planned, in progress, and completed and suggest new features or comment on existing ones.
Introducing Marketing Components: Crafting Stunning Landing Pages with EaseWe're excited to announce the release of Marketing Components, a collection of reusable UI components for marketing websites and landing pages.
Introducing the Testimonial Plugin for MakerkitIntroducing a new plugin to add testimonials to your app with ease
Creating a Delightful Onboarding Experience with Multi-Step FormsIn this post, we'll show you how to create a delightful onboarding experience using the Multi-Step Form Component for Makerkit.
Introducing the Multi-Step Form Component for MakerkitWe're excited to announce the release of the Multi-Step Form Component for Makerkit. This component allows you to create multi-step forms with ease.
Building Multi-Step forms with React.jsIn this article, we explain how to build Multi-Step forms with Next.js and the library react-hook-form
Mastering URL Patterns in Next.js Middleware: A Comprehensive GuideLearn how to implement and optimize URL pattern matching in Next.js middleware to create more efficient and maintainable server-side logic.
Announcing the Feedback pluginThe feedback plugin is a new feature that allows your users to give feedback on your app.
Announcing the Version Updater componentThe version updater component is a new feature that allow your app to check for updates and prompt the user to install them.
Announcing the Waitlist pluginThe waitlist plugin is a new feature that allows your users to sign up for early access to your app.
Introducing Makerkit Turbo: faster, simpler and more powerful SaaS BoilerplateI am excited to announce Makerkit Turbo - the next generation of our SaaS boilerplate. It's a tremendous upgrade over the previous version, with a focus on speed, simplicity, and power.
Announcing the AI Blog Writer SaaS TemplateWe're excited to announce the launch of our latest SaaS template, the AI Blog Writer app template. This template is a great starting point for building a product to write SEO optimized blog posts using AI.
Building an AI Writer SaaS with Next.js and SupabaseLearn how to build an AI Writer SaaS with Next.js and Supabase - from writing SEO optimized blog posts to managing subscriptions and billing.
Announcing the AI Chat with PDF SaaS TemplateWe're excited to announce the launch of our latest SaaS template, the Chat with PDF app template. This template is a great starting point for building a product that allows your customers to create chatbots that can answer questions and search through PDF documents.
Announcing the Data Loader SDK for SupabaseWe'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.
Announcing the AI Chatbot SaaS TemplateWe're excited to announce the launch of our latest SaaS template, the AI Chatbot SaaS Template. This template is a great starting point for building a customer support chatbot SaaS product.
Announcing Premium Codebase AccessWe are excited to announce that we are now offering Premium Codebase Access to all our users on the Teams Plan.
Announcing the new Onboarding Flow!The latest update to the SaaS Starter Kits is here! This update includes changes to the Onboarding Flow after sign-up.
November 2023 update: AI Editor Plugin, Data Teardown, Stripe Embedded CheckoutThe latest update to the SaaS Starter Kits is here! This update includes a new AI Editor plugin, user and organization teardown, and more!
Adding AI capabilities to your Next.js SaaS with Supabase and HuggingFaceIn this tutorial, we will learn how to use add AI capabilities to your SaaS using Supabase Vector, HuggingFace models and Next.js Server Components.
Announcing the AI Chatbot plugin for the Makerkit SaaS Starter kitsWe are excited to announce the release of the AI Chatbot plugin for the Makerkit SaaS Starter kits. This plugin allows you to add a chatbot to your SaaS Starter kit in minutes.
Announcing the Makerkit CLIWe are excited to announce the release of the Makerkit CLI, a command-line tool that helps you build and manage your Makerkit projects.
Announcing Plugins for MakerkitWe are excited to announce the launch of Plugins for Makerkit. Plugins are a way for you to extend the functionality of Makerkit to suit your needs.
SEO for Software DevelopersThe ultimate guide to mastering SEO for developers and founders who want to grow their SaaS
Announcing a new documentation generator for the Supabase KitsWe're excited to announce a new documentation generator for the Supabase Kits. This will make it easier for you to build your own documentation site for your Makerkit SaaS.
Introducing the Makerkit Super AdminThe Makerkit Super Admin is an admin panel for SaaS applications built with Makerkit. It allows you to manage your users, subscriptions, and more.
Building an AI-powered Blog with Next.js and WordPressLearn how to build a blog with Next.js 13 and WordPress and how to leverage AI to generate content.
Upcoming changes to Makerkit in Summer 2023An overview of the changes coming to MakerKit in Summer 2023.
Introducing Makerkit Lite: a lightweight Next.js SaaS BoilerplateIntroducing Makerkit Lite: a lightweight SaaS Boilerplate built with Next.js and Supabase. It is a smaller, faster and simpler version that the original Makerkit template.
Using Supabase Vault to store secretsSupabase 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
Building a SaaS in 2023: How to Build and Launch a SaaS FastBuilding a SaaS can be hard. Here is how you can build and launch your SaaS fast - without compromising on quality. In this post we explore how to leverage a SaaS Starter Kit to build and launch your SaaS fast.
Introduction to Next.js Server ActionsNext.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.
The importance of using a SaaS Starter as a solo founderLearn how a SaaS Starter Kit can help solo-founders build Micro SaaS products quickly and efficiently. Discover key features, tips for productivity, and more.
Using Lemon Squeezy for SaaS subscriptions with MakerkitIn this recipe, we provide a step-by-step guide to replace Stripe with Lemon Squeezy for Makerkit.
Announcing: Makerkit now supports Lemon Squeezy subscriptions! 🍋Announcing support for Lemon Squeezy subscriptions in Makerkit. It's now possible to use a MoR to power your Makerkit app.
Announcing support for Multi-Factor Authentication (MFA) with SupabaseA sneak peek to our coming feature for Multi-Factor Authentication (MFA) with Supabase.
Next.js 13: complete guide to Server Components and the App DirectoryUnlock the full potential of Next.js 13 with our most complete and definitive tutorial on using server components and the app directory.
How to add fonts to your Next.js 13 RSC app directoryLearn how to add fonts using the next/font package to your Next.js project using the app directory.
A sneak peek at the Supabase and Next.js RSC SaaS kitA behind the scenes look at how we built the Supabase and Next.js RSC SaaS Starter.
How to write client-only code in Next.js Server ComponentsFind out how to write code that executes only in the client using Next.js Server Components
Pagination with React.js and SupabaseDiscover the best practices for paginating data using Supabase and React.js using the Supabase Postgres client
A reusable Table component for React.jsHow to build a reusable Table component for React.js using Tanstack and Tailwind CSS.
Makerkit ❤️ Radix UIMakerkit migrated its UI Components to Radix UI, bringing a new look and feel to the platform.
Changelog: New Stripe Subscriptions PagesWe've redesigned the Makerkit subscriptions pages. Let's take a look at the new design.
How to sell code with Lemon Squeezy and GithubSell and monetize your code by giving private access to your Github repositories using Lemon Squeezy
Writing clean ReactLevel up your React coding skills with Typescript using our comprehensive guide on writing clean code. Start writing clean React code, today.
How to use MeiliSearch with ReactLearn how to use MeiliSearch in your React application with this guide. We will use Meiliseach to add a search engine for our blog posts
Get changed files in a git repository with Node.jsThis snippet will help you retrieve the list of the currently changed files in a git repository using Node.js.
Planning Makerkit's 2023A plan for the coming year at Makerkit. New kits, new blog posts, new documentation, courses, and more.
How to use Supabase with React QueryThis post explains how to use Supabase with React Query, a popular React library for fetching data from the server.
Why you should use Remix for your SaaSAre you building a SaaS? Here is why you should build it with Remix
Setting environment variables in RemixLearn how to set environment variables in Remix and how to ensure that they are available in the client-side code.
Programmatic Authentication with Supabase and CypressTesting 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.
How to reduce and boost your Firebase cold start timesFirebase cold start times are a common problem for developers. In this tutorial, we'll show you how to reduce and boost your Firebase cold start times.
Reset the Supabase Database in CypressResetting 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.
Firebase vs Supabase: Which one is better for your next project?Firebase and Supabase are two of the most popular backend-as-a-service (BaaS) platforms. In this article, we will compare Firebase vs Supabase to help you decide which one is better for your next project.
Introducing the Makerkit UI StorybookAnnouncing the Makerkit UI Storybook: a collection of all the components that make up the Makerkit kits. You can use this to see how the components work and to get inspiration for your own projects.
Authenticating users with Remix and SupabaseLearn how to use Remix and Supabase to authenticate users in your application.
How Makerkit helps boost your SaaS SEOLearn how Makerkit can help boost your SaaS SEO thanks to its optimized codebase and SEO-friendly features.
Should you use Makerkit as your SaaS Boilerplate?In this post, we'll be looking at the pros and cons of using Makerkit as your SaaS boilerplate.
How to sell code with Gumroad and GithubSell and monetize your code by giving private access to your Github repositories using Gumroad
Collecting payments upfrontIf you're selling a one-off service, you may want to get paid upfront. Let's add a payment step to the onboarding flow in your Makerkit app.
Removing Organizations from your ProjectIf your project does not need Organizations, follow this tutorial to remove them from your project
Migrating to Next.js Server Components LayoutsA simple guide to migrating your _app.tsx component to the new Server Components released with Next.js 13
Getting Started with Next.js Server ComponentsA simple introduction to using Server Components and the new Layouts Folder Structure with Next.js 13
Counting a collection's documents with Firebase FirestoreIn this article, we learn how to count the number of documents in a Firestore collection using a custom React.js hook.
Pagination with React.js and Firebase FirestoreIn this article, we learn how to paginate data fetched from Firebase Firestore with React.js
Building a Language Switcher for Next.jsIn this article, we create a Language dropdown to switch to another language using Next.js and next-i18n.
Testing emails with a local SMTP ServerIn this recipe, we extend and configure Makerkit to have a fully local email server to test our application's outgoing emails
Limiting the Firebase Storage space used by each customerLimiting the amount of Storage space used by your customers can be tricky. In this article, we show how to set a quota for each of your customers.
Creating a Waitlist with Firebase AuthImplement a waitlist sign-up with Firebase Auth and allow sign-ins in batches to your SaaS
Using ElasticSearch with Next.jsIn this article, we share how to use ElasticSearch with Next.js to index your Firestore documents and make them searchable.
v0.5.0: Design Improvements and code-cleanupThe version 0.5.0 adds improvements to the overall design, and adds Firebase Storage security rules backed by Firestore
Using Firestore in Firebase Storage RulesFirebase Storage now allows you to use Firestore queries to in your security rules. Here is all you need to know!
Turn your Next.js application into a PWAPWA 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.
v0.4.0: Phone AuthenticationThe version 0.4.0 adds the ability to sign-in using a Phone number, and adds design and usability improvements to the authentication pages
v0.3.0: Multi-Factor Authentication and Multi-Provider accountsThe version 0.3.0 adds the ability to enable Multi-Factor Authentication and for users to link their account to multiple providers
v0.2.0: Transferring Ownership of an organizationThe version 0.2.0 adds the ability to transfer the ownership of an organization to another member
Email Link Authentication with Firebase and Next.jsLearn how to add Email Link authentication to your SaaS application with Firebase Auth and Next.js
Adding a new MDX content sourceAdd a new MDX content source to your website
Charging SaaS Tenants based on the number of usersLet's extend Makerkit to charge Stripe customers based on the number of users in an organization
Walkthrough: Starting a Makerkit project with Firebase and Next.jsThis walkthrough is a summary of the documentation to quickly bootstrapping a SaaS project with Makerkit
Secure your Next.js application with Firebase AppCheckFirebase 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.
Programmatic Authentication with Firebase and CypressTesting 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.
Caching a Next.js API with RedisFind out how to cache a Next.js Serverless API with Redis
How to fix common hydration issues in Next.js and React 18Common Next.js hydration issues and how to fix them
The complete guide to Stripe and Next.jsLearn everything you need to start collecting payments for your Next.js application with Stripe Checkout
Improve your Next.js website Core Web VitalsIn this post, we share how to optimize the performance of your Next.js website and improve your Core Web Vitals
Add Tailwind CSS to Next.jsLearn how to install and use Tailwind CSS in your Next.js website
How to call an API with Next.jsLearn how to call API endpoints in your Next.js application
When to use SSR with Next.jsLearn when to use SSR or SSG with your Next.js application
Logging users out with Firebase Auth and Next.jsLearn how to sign users out with Firebase Auth and Next.js, and automatically redirect the user out of the page
How to generate an RSS feed with Next.jsLet's learn how to generate an RSS feed for our Next.js website in various formats.
Initialize the Firebase Admin with Next.jsLearn how to use Firebase on the server with Next.js
How to redirect to a page with Next.jsLearn the ways to redirect users to another page with Next.js
Blocking authentication with Firebase Auth FunctionsFirebase has introduced functions that allow us to write server logic before or after authenticating. Let's see how to use them.
How to make a Convertkit sign-up form with Next.jsWant to grow your Newsletter list? Learn how to build a sign-up form with Convertkit and Next.js
How to make a Sitemap with Next.jsSitemaps are fundamental for SEO. This post shares how to build a sitemap with Next.js
Why you should use Next.js for your SaaSAre you building a SaaS? Here is why you should build it with Next.js
Group Security with Firestore Storage and Next.jsLearn how to write Firebase security rules for groups of users
Is Firebase good for building a SaaS?This post highlights the reasons why Firebase is a great option for developing a SaaS platform
Using Google Analytics with Next.jsA complete guide to using Next.js and Google Analytics
How to test Stripe Checkout with CypressThe full guide to testing Stripe Checkout with Cypress
Makerkit upgraded to React 18React 18 has been released, and with it many exciting features.
Create an MDX-powered Blog with Next.jsLet's create an MDX-powered blog and portfolio starter that you can deploy right away with Next.js and Tailwind CSS
How to improve your Next.js site SEO rankingLearn the tips and techniques to develop a highly search-engine optimized Next.js website.
Benefits of a single codebase for SaaS Marketing and Product pagesHaving a single codebase for Marketing and your SaaS product can be challenging. We explain why we think it's worth it.
A Data Model for your Firebase SaaSLearn how to architecture the data model of a SaaS application with Firebase Firestore
Using Firestore with Next.jsLearn how to start using Firebase Firestore in your Next.js and React application
In-depth guide to Firestore Security RulesLearn how to secure your Firebase Firestore database with Security Rules
Setting Up the Firebase Emulators with Next.jsA complete guide to setting up the Firebase Emulators within a Next.js and React application
The Ultimate Authentication Guide with Next.js and FirebaseThe ultimate guide to adding Firebase authentication to any Next.js and React applications
Get paid with StripeMakerKit makes it super-easy to add Stripe payment and subscriptions to your Firebase and Next.js application. Learn how!
Why MakerKit - A Firebase SaaS Boilerplate for Next.jsLearn why we built MakerKit - a complete boilerplate for building SaaS applications in no time built with Firebase, Next.js and Tailwind CSS