## AI SaaS Development [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Make Your AI SaaS Product in a Weekend The complete Next.js boilerplate for building profitable SaaS, packed with AI, auth, payments, i18n, newsletter, dashboard, blog, docs, blocks, themes, SEO and more. [Get MkSaaS](https://mksaas.com/#pricing) [See Demo](https://demo.mksaas.com/) ![app screen](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Fhero%2Fdashboard-dark.png&w=3840&q=75)![app screen](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Fhero%2Fdashboard.png&w=3840&q=75) ## Tech Stack Build with your favorite tech stack Use the latest industry-standard tech stack for your next project [Next.js](https://nextjs.org/) [Stripe](https://stripe.com/) [Next.js](https://nextjs.org/) [Stripe](https://stripe.com/) [Shadcn UI](https://ui.shadcn.com/) [Next.js](https://nextjs.org/) [Shadcn UI](https://ui.shadcn.com/) [Next.js](https://nextjs.org/) [Resend](https://resend.com/) [Vercel](https://vercel.com/) [Stripe](https://stripe.com/) [Resend](https://resend.com/) [Vercel](https://vercel.com/) [Stripe](https://stripe.com/) [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)](https://mksaas.com/#) ## Problem Build SaaS from scratch is a hassle Don't waste time on designing a landing page or Stripe subscriptions ### UI Development Challenges Developers struggle to build modern UI and responsive designs from scratch without ready-to-use components. ### Payment Integration Complexity Integrating secure payment systems requires complex implementation of subscriptions, webhooks, and checkout flows. ### Essential Features Overhead Implementing core SaaS features like auth, i18n, blog, docs, newsletter, SEO, and theming are tedious and time-consuming. ## Solution Speed up your SaaS development MkSaaS solves all the common problems of SaaS development ### Ready-to-Use UI Components UI development becomes as simple as building with blocks, including Shadcn/ui, Magic UI components, and Tailark marketing blocks. ### Out-of-the-Box Payment System Built-in Stripe integration with subscriptions and one-time payments, all you need to do is configure your pricing table. ### Complete SaaS Features Built-in auth, i18n, blog, docs, newsletter, theming, and SEO optimization, saving you months of development time. ### Extensible Codebase Built with industry best practices for maintainability and scalability, and fully customizable implementations for payment, storage, newsletter, and email services. ## Features What makes MkSaaS different MkSaaS comes with everything you need to build your SaaS ### Authentication Let your users register and login with email/password, or social providers, and manage their profile. ### Email/Password Users can [register and login with email/password](https://demo.mksaas.com/auth/register), and email verification is required to login. ### Social Login ### Reset Password ### User Profile ![Email/Password](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Ffeatures%2Fauth-register.png&w=3840&q=75)![Email/Password](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Ffeatures%2Fauth-register-dark.png&w=3840&q=75) ### Payments Charge your users with Stripe subscription, and one-time payment, and manage the payments with webhooks. ### Pricing Configuration You can [configure the pricing table](https://mksaas.com/docs/config/price), including the price, name, description, interval, features and limits. ### Subscription and One-Time Payment ### Webhooks Integration ### Billing Management ![Pricing Configuration](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Ffeatures%2Fpayment-table.png&w=3840&q=75)![Pricing Configuration](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Ffeatures%2Fpayment-table-dark.png&w=3840&q=75) ### Marketing Features MkSaaS comes with many built-in marketing features to help you launch your SaaS faster and better. ### Blog MkSaaS has integrated with a [MDX-based blog system](https://demo.mksaas.com/blog), supporting the blog list, blog post, blog author, and blog categories. ### Documentation ### Newsletter ### Email Templates ### Built-in Pages ![Blog](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Ffeatures%2Fmarketing-blog.png&w=3840&q=75)![Blog](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Ffeatures%2Fmarketing-blog-dark.png&w=3840&q=75) ### Batteries Included Built-in components and blocks, customizable themes, multiple analytics, SEO optimized, and more. ### Customizable Theme MkSaaS supports customizable themes, and you can easily customize your own themes by modifying theme variables or using theme generators. ### Components and Blocks ### Multiple Analytics ### Internationalization ### SEO Optimized ![Customizable Theme](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Ffeatures%2Fother-themes.png&w=3840&q=75)![Customizable Theme](https://mksaas.com/_next/image?url=%2Fimages%2Fhome%2Ffeatures%2Fother-themes-dark.png&w=3840&q=75) ## Not convinced yet? We provide more features for you What you see in the [demo website](https://demo.mksaas.com/) is what you get in your own website ## Pricing Pay once, Lifetime updates, Build unlimited SaaS websites ### Lifetime $169 Get MkSaaS Pay once, Build unlimited SaaS websites - Complete Next.js boilerplate for AI SaaS - Seamless Stripe payments and webhooks - Secure authentication and authorization - Sleek UI components and marketing blocks - Feature-rich blog system and documentation - Auto-generated sitemap and OG metadata - Showcase your products on MkSaaS for free - Unlimited personal and commercial projects - Technical support via email and Discord 🛟 - Access to 4 official Github repositories 🎁 - Lifetime updates with no extra cost 🔥 ## FAQ For more questions, you can check out the [FAQ page](https://mksaas.com/blog/faq) ### What do I get exactly? ### Can I see what I am getting before I pay? ### What are the AI features included? ### How many websites can I build with MkSaaS? ### Why should I buy MkSaaS instead of others? ### How to get technical support? ### Can I get a refund? ### Can I get access to the private Github repositories? ### Can't find what you're looking for? ## Ready to launch? Start making money today! Launch your AI SaaS product in a weekend, and make money from day one [Get MkSaaS](https://mksaas.com/#pricing) [See Demo](https://demo.mksaas.com/) ## Introduction MkSaaS is run by an indie maker ![Avatar](https://mksaas.com/images/avatars/fox.png) 👋 Hey, it's Fox. I'm the founder of [MkSaaS](https://mksaas.com/) and [Mkdirs](https://mkdirs.com/). The goal of MkSaaS is to save your valuable time, and provide you with everything you need to build your SaaS, so you can focus on your core business, no more coding from scratch. As an indie maker, I've built this product from the ground up, and every feature is crafted with care. I have served 200+ happy customers of [Mkdirs](https://mkdirs.com/), and now I'm here to serve more and more customers of MkSaaS. Thank you for supporting indie products and for being a part of this journey. Feel free to contact me if you have any questions or feedback. [Follow me on X](https://x.com/mksaascom) [Talk with me](mailto:MkSaaS ) ## Stats MkSaaS in numbers MkSaaS community is growing fast 340+ Built-in Components 20+ Happy Customers 600+ GitHub Commits ## Showcases What our customers are building Launch your SaaS with MkSaaS and get featured here for free! [![MkSaaS Demo](https://mksaas.com/_next/image?url=%2Fimages%2Fshowcase%2Fmksaas-demo.png&w=3840&q=75)\\ \\ **MkSaaS Demo**\\ \\ Make your AI SaaS product in a weekend](https://demo.mksaas.com/) [![Mkdirs](https://mksaas.com/_next/image?url=%2Fimages%2Fshowcase%2Fmkdirs.png&w=3840&q=75)\\ \\ **Mkdirs**\\ \\ Launch AI-powered directory in minutes](https://mkdirs.com/) [![Indie Maker Fox Blog](https://mksaas.com/_next/image?url=%2Fimages%2Fshowcase%2Fmksaas-blog.png&w=3840&q=75)\\ \\ **Indie Maker Fox Blog**\\ \\ Building in Public, Coding for Future](https://javayhu.com/) ## MkSaaS Documentation # Introduction Introducing MkSaaS, a complete Next.js boilerplate for building AI SaaS websites ## [What is MkSaaS?](https://mksaas.com/docs\#what-is-mksaas) Welcome to MkSaaS, **a complete boilerplate for building AI SaaS websites**. This project is designed to accelerate your development with a robust, modular, and extensible foundation. Feel free to use it as is or extend it for your own needs. People use MkSaaS to build AI SaaS websites for a variety of reasons: - 🚀 **Fast & Modern** \- Built with Next.js 15 App Router and TypeScript - 🎨 **Beautiful UI** \- Powered by Tailwind CSS and shadcn/ui components - 📱 **Responsive** \- Works great on all devices - 🔍 **SEO Optimized** \- Built-in SEO features Whether you're a beginner or an experienced developer, this documentation will guide you through the setup, configuration, and deployment of your website. This guide assumes you have some familiarity with Next.js and Drizzle ORM. If you don't have any of these, please refer to the [Official Documentation](https://mksaas.com/docs#official-documentation) as we will not cover the basics in this guide. Let's get started! ## [Tech Stack](https://mksaas.com/docs\#tech-stack) [**Next.js 15** \\ \\ The React framework for building full-stack web applications using React 19.](https://nextjs.org/) [**Drizzle ORM** \\ \\ An ORM tool that helps you access your database in a type-safe way.](https://orm.drizzle.team/) [**Tailwind CSS** \\ \\ A utility-first CSS framework packed with utility classes that can be composed to build any design.](https://tailwindcss.com/) [**Radix UI / shadcn/ui / Magic UI / Tailark** \\ \\ A collection of pre-built components and blocks that you can use to build your SaaS websites.](https://ui.shadcn.com/) [**Better Auth** \\ \\ A modern, secure, easy-to-use and framework agnostic authentication solution.](https://better-auth.com/) [**Resend** \\ \\ A modern email service that allows you to send emails from your application.](https://resend.com/) [**Fumadocs** \\ \\ A beautiful documentation framework for Developers, flexible and performant.](https://fumadocs.vercel.app/) [**Stripe** \\ \\ The most popular and secure payment processor for SaaS websites.](https://stripe.com/) [**Vercel AI SDK** \\ \\ A collection of tools for building AI applications, open source and free.](https://sdk.vercel.ai/) [**Zustand** \\ \\ A small, fast and scalable state management solution for React applications.](https://zustand-demo.pmnd.rs/) [**Next-Intl** \\ \\ Internationalization library for Next.js that supports routing, messages, and localization.](https://next-intl.dev/) [**Next-Safe-Action** \\ \\ Type-safe server actions for Next.js with built-in validation and error handling.](https://next-safe-action.dev/) ## [Scope of This Documentation](https://mksaas.com/docs\#scope-of-this-documentation) This documentation will guide you through configuring, running, and deploying the boilerplate, and will provide links to the official documentation of the underlying technologies where necessary. To fully grasp the boilerplate's capabilities, it's essential to understand these technologies, so be sure to explore their documentation as well. For anything strictly related to the [MkSaaS boilerplate](https://mksaas.com/), this documentation has you covered! ### [Official Documentation](https://mksaas.com/docs\#official-documentation) For in-depth understanding of the underlying technologies, refer to their official documentation: - Next.js: [Next.js Documentation](https://nextjs.org/docs) - Drizzle: [Drizzle Documentation](https://orm.drizzle.team/docs) - Tailwind CSS: [Tailwind CSS Documentation](https://tailwindcss.com/docs) - Radix UI: [Radix UI Documentation](https://www.radix-ui.com/primitives/docs) - Shadcn/ui: [Shadcn/ui Documentation](https://ui.shadcn.com/docs) - Magic UI: [Magic UI Documentation](https://magicui.design/docs) - Tailark: [Tailark Documentation](https://tailark.com/) - Better Auth: [Better Auth Documentation](https://better-auth.com/docs) - Resend: [Resend Documentation](https://resend.com/docs) - Fumadocs: [Fumadocs Documentation](https://fumadocs.vercel.app/docs) - Stripe: [Stripe Documentation](https://stripe.com/docs) - Vercel AI SDK: [Vercel AI SDK Documentation](https://sdk.vercel.ai/docs) - Zustand: [Zustand Documentation](https://zustand-demo.pmnd.rs/) - Next-Intl: [Next-Intl Documentation](https://next-intl.dev/) - Next-Safe-Action: [Next-Safe-Action Documentation](https://next-safe-action.dev/) - Content Collections: [Content Collections Documentation](https://www.content-collections.dev/docs) Understanding these technologies is crucial for building a successful SaaS website. For a more integrated development experience, we recommend adding these documentation links to your Cursor's documentation panel. This allows you to quickly reference documentation without leaving your editor. See our [IDE Setup](https://mksaas.com/docs/ide#documentation) guide for instructions on how to add these resources to Cursor. ## [Getting Help](https://mksaas.com/docs\#getting-help) If you're stuck, here are some ways to get help: - Check the [MkSaaS documentation](https://mksaas.com/docs) - Join our [Discord community](https://discord.gg/yVwpEtTT) - Open an issue on [GitHub Issues](https://github.com/MkSaaSHQ/mksaas-template/issues) - Open a discussion on [GitHub Discussions](https://github.com/MkSaaSHQ/mksaas-template/discussions) - Contact our support team at [support@mksaas.com](mailto:support@mksaas.com) ## [Next Steps](https://mksaas.com/docs\#next-steps) Now that you have MkSaaS running, here are some next steps: [**Getting Started** \\ \\ Learn how to set up and run your MkSaaS website](https://mksaas.com/docs/start) [**Environment Setup** \\ \\ Configure environment variables](https://mksaas.com/docs/env) [**Database Setup** \\ \\ Set up and configure your database connection](https://mksaas.com/docs/database) [**IDE Setup** \\ \\ Configure your development environment](https://mksaas.com/docs/ide) ### Table of Contents [What is MkSaaS?](https://mksaas.com/docs#what-is-mksaas) [Tech Stack](https://mksaas.com/docs#tech-stack) [Scope of This Documentation](https://mksaas.com/docs#scope-of-this-documentation) [Official Documentation](https://mksaas.com/docs#official-documentation) [Getting Help](https://mksaas.com/docs#getting-help) [Next Steps](https://mksaas.com/docs#next-steps) ## Contact Us [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Contact We'll help you find the right plan for your business Contact Us If you have any questions or feedback, please reach out to our team Name Email Message Submit ## Join Our Newsletter [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Newsletter ## Join our newsletter for the latest news and updates Join Our Newsletter We will notify you when our product updates Email Subscribe ## MkSaaS Changelog [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Changelog Stay up to date with the latest changes in our product ## 📚 Documentation is ready v1.1.0 Comprehensive documentation covering setup, configuration, and features 2025/04/23 ### [Documentation](https://mksaas.com/changelog\#documentation) We're excited to announce that the comprehensive documentation for MkSaaS boilerplate is now ready! The documentation covers everything from initial setup to advanced features, making it easier than ever to get started with your AI SaaS project. - **[Getting Started Guide](https://mksaas.com/docs/start)**: Complete setup instructions including prerequisites, installation steps - **[Environment Setup](https://mksaas.com/docs/env)**: Detailed guide for configuring environment variables for all features - **[Database Integration](https://mksaas.com/docs/database)**: Database setup with PostgreSQL and Drizzle ORM - **[Payment System](https://mksaas.com/docs/payment)**: Comprehensive Stripe integration guide for handling payments and subscriptions - **[Customize Theme](https://mksaas.com/docs/themes)**: Theme customization with built-in color schemes and custom theme creation - **[Customize Fonts](https://mksaas.com/docs/fonts)**: Font system configuration with Google Fonts integration and local font support - **[Internationalization](https://mksaas.com/docs/i18n)**: Multi-language support setup with next-intl and translation management - **[Landing Page Builder](https://mksaas.com/docs/landingpage)**: Guide to creating beautiful landing pages with pre-built marketing blocks - **[Analytics Integration](https://mksaas.com/docs/analytics)**: Integration with various analytics providers - **[Storage Integration](https://mksaas.com/docs/storage)**: File storage configuration and management - **[Email Integration](https://mksaas.com/docs/email)**: Email service setup and template customization - **[Newsletter Integration](https://mksaas.com/docs/newsletter)**: Newsletter system setup and management Visit our [documentation](https://mksaas.com/docs) to explore all available guides and resources. ## 🎉 Launch MkSaaS v1.0.0 Our first official release with core features 2025/04/13 ### [Core Features](https://mksaas.com/changelog\#core-features) We're excited to announce the initial release of MkSaaS boilerplate with the following core features: - **[Authentication](https://demo.mksaas.com/auth/login)**: Secure login and registration with email verification and social login (Google, Github) - **[Internationalization](https://demo.mksaas.com/zh)**: Built-in internationalization with Next.js and Next-Intl - **[Pricing](https://demo.mksaas.com/pricing)**: Built-in pricing page with pricing table and Stripe integration - **[Blocks](https://demo.mksaas.com/blocks/hero-section)**: Responsive, pre-built UI blocks designed for marketing websites - **[Blog](https://demo.mksaas.com/blog)**: Fully customizable blog with markdown support and SEO features - **[Documentation](https://demo.mksaas.com/docs)**: Feature-rich documentation with markdown support - **[Dashboard](https://demo.mksaas.com/dashboard)**: Intuitive dashboard for users to manage their profiles and settings - **[Landing Page](https://demo.mksaas.com/)**: Built-in landing page with customizable marketing blocks - **[Waitlist](https://demo.mksaas.com/waitlist)**: Built-in waitlist page with email capture and waitlist management - **[Changelog](https://demo.mksaas.com/changelog)**: Built-in changelog page to announce new features and updates - **[About Page](https://demo.mksaas.com/about)**: Built-in about page with customizable content - **[Contact Page](https://demo.mksaas.com/contact)**: Built-in contact page with customizable form - **[Legal Pages](https://demo.mksaas.com/privacy)**: Built-in legal pages with customizable content - **[Themes](https://demo.mksaas.com/dashboard)**: Customizable themes with support for light and dark modes Visit our [live demo](https://demo.mksaas.com/) to explore all the features and functionalities. ## Privacy Policy Overview [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Privacy Policy Our commitment to protecting your privacy and personal data 2025/03/10 ## [Introduction](https://mksaas.com/privacy\#introduction) Welcome to our Privacy Policy. This document explains how we collect, use, and protect your personal information when you use our services. ## [Information We Collect](https://mksaas.com/privacy\#information-we-collect) We may collect the following types of information: - **Personal Information**: Name, email address, and contact details you provide when registering or contacting us. - **Usage Data**: Information about how you interact with our website, including pages visited and time spent. - **Device Information**: Details about the device you use to access our services, such as IP address, browser type, and operating system. ## [How We Use Your Information](https://mksaas.com/privacy\#how-we-use-your-information) We use your information for the following purposes: - To provide and maintain our services - To notify you about changes to our services - To provide customer support - To gather analysis or valuable information to improve our services - To monitor the usage of our services - To detect, prevent, and address technical issues ## [Data Security](https://mksaas.com/privacy\#data-security) We implement appropriate security measures to protect your personal information from unauthorized access, alteration, disclosure, or destruction. ## [Third-Party Services](https://mksaas.com/privacy\#third-party-services) We may employ third-party companies and individuals to facilitate our services, provide services on our behalf, or assist us in analyzing how our services are used. ## [Changes to This Privacy Policy](https://mksaas.com/privacy\#changes-to-this-privacy-policy) We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page. ## [Contact Us](https://mksaas.com/privacy\#contact-us) If you have any questions about this Privacy Policy, please [contact us](https://mksaas.com/contact). ## Terms of Service [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Terms of Service The terms and conditions governing the use of our services 2025/03/10 ## [Introduction](https://mksaas.com/terms\#introduction) These Terms of Service ("Terms") govern your use of our website and services. By accessing or using our services, you agree to be bound by these Terms. ## [Use of Services](https://mksaas.com/terms\#use-of-services) Our services are provided "as is" and "as available" without warranties of any kind, either express or implied. We do not guarantee that our services will be uninterrupted, secure, or error-free. ## [User Accounts](https://mksaas.com/terms\#user-accounts) When you create an account with us, you must provide accurate and complete information. You are responsible for safeguarding your account and for all activities that occur under your account. ## [Intellectual Property](https://mksaas.com/terms\#intellectual-property) Our website and its original content, features, and functionality are owned by us and are protected by international copyright, trademark, and other intellectual property laws. ## [User Content](https://mksaas.com/terms\#user-content) You retain all rights to any content you submit, post, or display on or through our services. By submitting content, you grant us a worldwide, non-exclusive, royalty-free license to use, reproduce, modify, and distribute your content. ## [Prohibited Activities](https://mksaas.com/terms\#prohibited-activities) You agree not to: - Use our services in any way that violates any applicable law or regulation - Engage in any conduct that restricts or inhibits anyone's use or enjoyment of our services - Attempt to gain unauthorized access to our servers or networks - Use our services to distribute malware or other harmful code ## [Termination](https://mksaas.com/terms\#termination) We may terminate or suspend your account and access to our services immediately, without prior notice or liability, for any reason. ## [Limitation of Liability](https://mksaas.com/terms\#limitation-of-liability) In no event shall we be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of or inability to use our services. ## [Changes to Terms](https://mksaas.com/terms\#changes-to-terms) We reserve the right to modify these Terms at any time. If we make changes, we will provide notice by posting the updated Terms on this page. ## [Contact Us](https://mksaas.com/terms\#contact-us) If you have any questions about these Terms, please [contact us](https://mksaas.com/contact). ## Cookie Policy Overview [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Cookie Policy How we use cookies and similar technologies on our website 2025/03/10 ## [Introduction](https://mksaas.com/cookie\#introduction) This Cookie Policy explains how we use cookies and similar technologies on our website. By using our website, you consent to the use of cookies as described in this policy. ## [What Are Cookies](https://mksaas.com/cookie\#what-are-cookies) Cookies are small text files that are stored on your device when you visit a website. They are widely used to make websites work more efficiently and provide information to the website owners. ## [How We Use Cookies](https://mksaas.com/cookie\#how-we-use-cookies) We use cookies for the following purposes: - **Essential Cookies**: These cookies are necessary for the website to function properly and cannot be switched off in our systems. - **Performance Cookies**: These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. - **Functional Cookies**: These cookies enable the website to provide enhanced functionality and personalization. - **Targeting Cookies**: These cookies may be set through our site by our advertising partners to build a profile of your interests. ## [Types of Cookies We Use](https://mksaas.com/cookie\#types-of-cookies-we-use) ### [Essential Cookies](https://mksaas.com/cookie\#essential-cookies) - Session cookies for maintaining user sessions - Security cookies for protecting against fraud and abuse ### [Performance Cookies](https://mksaas.com/cookie\#performance-cookies) - Analytics cookies to understand how visitors interact with our website - Load balancing cookies to distribute traffic to servers ### [Functional Cookies](https://mksaas.com/cookie\#functional-cookies) - Preference cookies to remember your settings and choices - Language cookies to remember your language preference ### [Targeting Cookies](https://mksaas.com/cookie\#targeting-cookies) - Advertising cookies to deliver relevant advertisements - Social media cookies to enable sharing content on social platforms ## [Managing Cookies](https://mksaas.com/cookie\#managing-cookies) Most web browsers allow you to control cookies through their settings. You can: - Delete cookies from your device - Block cookies by activating the setting on your browser that allows you to refuse all or some cookies - Set your browser to notify you when you receive a cookie Please note that if you choose to block or delete cookies, you may not be able to access certain areas or features of our website. ## [Changes to This Cookie Policy](https://mksaas.com/cookie\#changes-to-this-cookie-policy) We may update our Cookie Policy from time to time. We will notify you of any changes by posting the new Cookie Policy on this page. ## [Contact Us](https://mksaas.com/cookie\#contact-us) If you have any questions about this Cookie Policy, please [contact us](https://mksaas.com/contact). ## User Login Page [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)](https://mksaas.com/) Welcome back Email Password [Forgot Password?](https://mksaas.com/auth/forgot-password) Show password Sign In Or continue with GoogleSign In with GoogleGitHubSign In with GitHub [Don't have an account? Sign up](https://mksaas.com/auth/register) By clicking continue, you agree to our [Terms of Service](https://mksaas.com/terms) and [Privacy Policy](https://mksaas.com/privacy) ## Account Registration Page [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)](https://mksaas.com/) Create an account Name Email Password Show password Sign Up Or continue with GoogleSign In with GoogleGitHubSign In with GitHub [Already have an account? Sign in](https://mksaas.com/auth/login) By clicking continue, you agree to our [Terms of Service](https://mksaas.com/terms) and [Privacy Policy](https://mksaas.com/privacy) ## MkSaaS Features [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Blog ## Latest news and updates from our team [**All**](https://mksaas.com/blog)[**Feature**](https://mksaas.com/blog/category/feature)[**General**](https://mksaas.com/blog/category/general)[**Tutorial**](https://mksaas.com/blog/category/tutorial) Categories Feature No posts found ## MkSaaS Blog Updates [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Blog ## Latest news and updates from our team [**All**](https://mksaas.com/blog)[**Feature**](https://mksaas.com/blog/category/feature)[**General**](https://mksaas.com/blog/category/general)[**Tutorial**](https://mksaas.com/blog/category/tutorial) Categories General [![What is MKSaaS](https://mksaas.com/_next/image?url=%2Fimages%2Fblog%2Fpost-mksaas.png&w=3840&q=75)\\ \\ General\\ \\ **What is MKSaaS** \\ \\ Introducing MkSaaS, a complete Next.js boilerplate for building AI SaaS websites\\ \\ ![avatar for Fox](https://mksaas.com/_next/image?url=%2Fimages%2Favatars%2Ffox.png&w=3840&q=75)\\ \\ Fox\\ \\ 2025/04/14](https://mksaas.com/blog/what-is-mksaas) [![FAQ](https://mksaas.com/_next/image?url=%2Fimages%2Fblog%2Fpost-faq.png&w=3840&q=75)\\ \\ General\\ \\ **FAQ** \\ \\ Frequently asked questions before you buy MkSaaS\\ \\ ![avatar for Fox](https://mksaas.com/_next/image?url=%2Fimages%2Favatars%2Ffox.png&w=3840&q=75)\\ \\ Fox\\ \\ 2025/04/01](https://mksaas.com/blog/faq) ## MkSaaS Tutorials [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) # Blog ## Latest news and updates from our team [**All**](https://mksaas.com/blog)[**Feature**](https://mksaas.com/blog/category/feature)[**General**](https://mksaas.com/blog/category/general)[**Tutorial**](https://mksaas.com/blog/category/tutorial) Categories Tutorial No posts found ## MkSaaS FAQ Page [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) ![FAQ](https://mksaas.com/_next/image?url=%2Fimages%2Fblog%2Fpost-faq.png&w=3840&q=75) 2025/04/01 5 min read # FAQ Frequently asked questions before you buy MkSaaS ## [📚 General](https://mksaas.com/blog/faq\#-general) ### [1.1 What do I get exactly?](https://mksaas.com/blog/faq\#11-what-do-i-get-exactly) - You will get access to the private Github repository with the code you need to run a SaaS website, and you will get lifetime updates and support. - You will get access to other official private Github repositories built with MkSaaS (now 3 repositories), and you can use them in your own projects. - Your products will be listed on the MkSaaS showcase section for free forever. ### [1.2 I don't know how to code, can I use it?](https://mksaas.com/blog/faq\#12-i-dont-know-how-to-code-can-i-use-it) No, you need to know how to code or how to use AI tools to generate code, and we suggest you to use [Cursor](https://cursor.sh/) or [VSCode](https://code.visualstudio.com/) as your IDE. You can check out the [IDE Setup](https://mksaas.com/docs#ide-setup) section in documentation for the detailed information. ### [1.3 My techstack is different, can I use it?](https://mksaas.com/blog/faq\#13-my-techstack-is-different-can-i-use-it) Yes, you can use it as long as you are comfortable with React, Next.js and TypeScript. You can check out the [Tech Stack](https://mksaas.com/docs#tech-stack) section in documentation for the detailed information. ### [1.4 Can I see what I am getting before I pay?](https://mksaas.com/blog/faq\#14-can-i-see-what-i-am-getting-before-i-pay) Yes, you can explore the [live demo](https://demo.mksaas.com/) to see what the SaaS website looks like, you can sign up for a free account and pay with [Stripe test cards](https://mksaas.com/docs/payment#testing-cards) to see the payment process. ### [1.5 How many SaaS websites can I build with MkSaaS?](https://mksaas.com/blog/faq\#15-how-many-saas-websites-can-i-build-with-mksaas) You can build unlimited SaaS websites with MkSaaS, the only limit is your imagination. ### [1.6 Why should I buy MkSaaS instead of other SaaS boilerplates?](https://mksaas.com/blog/faq\#16-why-should-i-buy-mksaas-instead-of-other-saas-boilerplates) MkSaaS is a better SaaS boilerplate if compared with other SaaS boilerplates. It streamlines your development process by integrating auth, payment, blog, documentation, newsletter, SEO, and more. Everything you need is ready to use, and much better than other SaaS boilerplates, you can explore the live demos to see the differences of all the SaaS boilerplates. ## [🧑‍💻 Technical](https://mksaas.com/blog/faq\#-technical) ### [2.1 TypeScript or JavaScript?](https://mksaas.com/blog/faq\#21-typescript-or-javascript) Mkdirs is written in TypeScript, but you can easily change it to JavaScript. ### [2.2 Nextjs 14 or Nextjs 15 or Nextjs 16? App router or Pages router?](https://mksaas.com/blog/faq\#22-nextjs-14-or-nextjs-15-or-nextjs-16-app-router-or-pages-router) Mkdirs uses [Nextjs 16 App router](https://nextjs.org/docs/). ### [2.3 Is MkSaaS a Monorepo?](https://mksaas.com/blog/faq\#23-is-mksaas-a-monorepo) No, MkSaaS is not a Monorepo, so it's simple to customize and easy to deploy. ### [2.4 How to sync the source code with the MkSaaS template repository?](https://mksaas.com/blog/faq\#24-how-to-sync-the-source-code-with-the-mksaas-template-repository) You can check out this [Updating the Codebase Guide](https://mksaas.com/docs/updates) for the detailed instructions. ### [2.5 How to set up a SaaS website with MkSaaS?](https://mksaas.com/blog/faq\#25-how-to-set-up-a-saas-website-with-mksaas) You can check out the [documentation](https://mksaas.com/docs) and the [video tutorials](https://www.youtube.com/@MkSaaS) for the detailed instructions. ### [2.6 How to get technical support?](https://mksaas.com/blog/faq\#26-how-to-get-technical-support) If you have any other questions, you can talk with me on [Discord](https://discord.gg/mtjx6W6mNY), or reach out to us via email at [support@mksaas.com](mailto:support@mksaas.com). ## [💳 Payment](https://mksaas.com/blog/faq\#-payment) ### [3.1 Does MkSaaS support other payment services?](https://mksaas.com/blog/faq\#31-does-mksaas-support-other-payment-services) No, MkSaaS supports Stripe only for now, if you want to support other payment services, you can check out this [Payment Guide](https://mksaas.com/docs/payment#customization) for the detailed instructions of creating a new payment service. ### [3.2 How much does it cost to run a SaaS website?](https://mksaas.com/blog/faq\#32-how-much-does-it-cost-to-run-a-saas-website) With MkSaaS, you can easily launch a SaaS website for almost zero cost at the beginning. You only pay for your domain, and start with the free plan of [Neon](https://neon.tech/pricing), [Resend](https://resend.com/pricing), [Vercel](https://vercel.com/pricing) and [Stripe](https://stripe.com/pricing). When the traffic of your SaaS website grows, you can choose to upgrade your plans later. ### [3.3 What if I can't pay with Stripe?](https://mksaas.com/blog/faq\#33-what-if-i-cant-pay-with-stripe) Feel free to reach out to us via email at [support@mksaas.com](mailto:support@mksaas.com), we can help you if you can pay with other payment methods, for example, PayPal. ### [3.4 Can I get a refund?](https://mksaas.com/blog/faq\#34-can-i-get-a-refund) After you get access to the private Github repository, MkSaaS is yours forever, so it can't be refunded. We encourage you to carefully review the product details, the [documentation](https://mksaas.com/docs) and the [video tutorials](https://www.youtube.com/@MkSaaS) before making your purchase to ensure it meets your requirements. ## [🔐 License](https://mksaas.com/blog/faq\#-license) ### [4.1 What am I allowed to do with the boilerplate?](https://mksaas.com/blog/faq\#41-what-am-i-allowed-to-do-with-the-boilerplate) - You can use MkSaaS to create unlimited end products (including commercial projects). - You can use MkSaaS to create projects for unlimited clients. - You can modify MkSaaS components to create derivative works. - You can use MkSaaS to build SaaS applications where end users interact with your end product. For more details, you can check out the [License Policy](https://mksaas.com/license) page. ### [4.2 What am I not allowed to do with the boilerplate?](https://mksaas.com/blog/faq\#42-what-am-i-not-allowed-to-do-with-the-boilerplate) - You are not allowed to publish the code or parts of it as a template or boilerplate. - You are not allowed to resell MkSaaS’s components or templates, even if modified. - You are not allowed to share your access to MkSaaS with others without explicit permission. - You are not allowed to use MkSaaS to create products that compete with MkSaaS’s business. For more details, you can check out the [License Policy](https://mksaas.com/license) page. ### [4.3 What can I do with the template repository?](https://mksaas.com/blog/faq\#43-what-can-i-do-with-the-template-repository) As a collaborator on our private GitHub repository, you will receive the following benefits: - Access to the latest development branches and pre-release versions - The ability to submit pull requests, issues, and participate in discussions - Permission to open the issues, contributing directly to improving the project ### [4.4 What if I forgot to accept the invitations?](https://mksaas.com/blog/faq\#44-what-if-i-forgot-to-accept-the-invitations) Do not worry, please contact us at [support@mksaas.com](mailto:support@mksaas.com) with the receipt of your purchase, and we will be happy to assist you in inviting you to the private GitHub repository. ## [📮 Contact Us](https://mksaas.com/blog/faq\#-contact-us) If you have any questions about MkSaaS, please [contact us](https://mksaas.com/contact) or [email us](mailto:support@mksaas.com). [All Posts](https://mksaas.com/blog) ## Author ![avatar for Fox](https://mksaas.com/_next/image?url=%2Fimages%2Favatars%2Ffox.png&w=3840&q=75) Fox ## Categories - [General](https://mksaas.com/blog/category/general) ## Table of Contents - [📚 General](https://mksaas.com/blog/faq#-general) - [1.1 What do I get exactly?](https://mksaas.com/blog/faq#11-what-do-i-get-exactly) - [1.2 I don't know how to code, can I use it?](https://mksaas.com/blog/faq#12-i-dont-know-how-to-code-can-i-use-it) - [1.3 My techstack is different, can I use it?](https://mksaas.com/blog/faq#13-my-techstack-is-different-can-i-use-it) - [1.4 Can I see what I am getting before I pay?](https://mksaas.com/blog/faq#14-can-i-see-what-i-am-getting-before-i-pay) - [1.5 How many SaaS websites can I build with MkSaaS?](https://mksaas.com/blog/faq#15-how-many-saas-websites-can-i-build-with-mksaas) - [1.6 Why should I buy MkSaaS instead of other SaaS boilerplates?](https://mksaas.com/blog/faq#16-why-should-i-buy-mksaas-instead-of-other-saas-boilerplates) - [🧑‍💻 Technical](https://mksaas.com/blog/faq#-technical) - [2.1 TypeScript or JavaScript?](https://mksaas.com/blog/faq#21-typescript-or-javascript) - [2.2 Nextjs 14 or Nextjs 15 or Nextjs 16? App router or Pages router?](https://mksaas.com/blog/faq#22-nextjs-14-or-nextjs-15-or-nextjs-16-app-router-or-pages-router) - [2.3 Is MkSaaS a Monorepo?](https://mksaas.com/blog/faq#23-is-mksaas-a-monorepo) - [2.4 How to sync the source code with the MkSaaS template repository?](https://mksaas.com/blog/faq#24-how-to-sync-the-source-code-with-the-mksaas-template-repository) - [2.5 How to set up a SaaS website with MkSaaS?](https://mksaas.com/blog/faq#25-how-to-set-up-a-saas-website-with-mksaas) - [2.6 How to get technical support?](https://mksaas.com/blog/faq#26-how-to-get-technical-support) - [💳 Payment](https://mksaas.com/blog/faq#-payment) - [3.1 Does MkSaaS support other payment services?](https://mksaas.com/blog/faq#31-does-mksaas-support-other-payment-services) - [3.2 How much does it cost to run a SaaS website?](https://mksaas.com/blog/faq#32-how-much-does-it-cost-to-run-a-saas-website) - [3.3 What if I can't pay with Stripe?](https://mksaas.com/blog/faq#33-what-if-i-cant-pay-with-stripe) - [3.4 Can I get a refund?](https://mksaas.com/blog/faq#34-can-i-get-a-refund) - [🔐 License](https://mksaas.com/blog/faq#-license) - [4.1 What am I allowed to do with the boilerplate?](https://mksaas.com/blog/faq#41-what-am-i-allowed-to-do-with-the-boilerplate) - [4.2 What am I not allowed to do with the boilerplate?](https://mksaas.com/blog/faq#42-what-am-i-not-allowed-to-do-with-the-boilerplate) - [4.3 What can I do with the template repository?](https://mksaas.com/blog/faq#43-what-can-i-do-with-the-template-repository) - [4.4 What if I forgot to accept the invitations?](https://mksaas.com/blog/faq#44-what-if-i-forgot-to-accept-the-invitations) - [📮 Contact Us](https://mksaas.com/blog/faq#-contact-us) ## More Posts [![What is MKSaaS](https://mksaas.com/_next/image?url=%2Fimages%2Fblog%2Fpost-mksaas.png&w=3840&q=75)\\ \\ General\\ \\ **What is MKSaaS** \\ \\ Introducing MkSaaS, a complete Next.js boilerplate for building AI SaaS websites\\ \\ ![avatar for Fox](https://mksaas.com/_next/image?url=%2Fimages%2Favatars%2Ffox.png&w=3840&q=75)\\ \\ Fox\\ \\ 2025/04/14](https://mksaas.com/blog/what-is-mksaas) ## Newsletter Join the community Subscribe to our newsletter for the latest news and updates Email Subscribe ## MkSaaS Overview [![Logo](https://mksaas.com/_next/image?url=%2Flogo-dark.png&w=256&q=75)MkSaaS](https://mksaas.com/) ![What is MKSaaS](https://mksaas.com/_next/image?url=%2Fimages%2Fblog%2Fpost-mksaas.png&w=3840&q=75) 2025/04/14 3 min read # What is MKSaaS Introducing MkSaaS, a complete Next.js boilerplate for building AI SaaS websites ## [What is MkSaaS?](https://mksaas.com/blog/what-is-mksaas\#what-is-mksaas) Welcome to MkSaaS, **a complete boilerplate for building AI SaaS websites**. This project is designed to accelerate your development with a robust, modular, and extensible foundation. Feel free to use it as is or extend it for your own needs. People use MkSaaS to build AI SaaS websites for a variety of reasons: - 🚀 **Fast & Modern** \- Built with Next.js 15 App Router and TypeScript - 🎨 **Beautiful UI** \- Powered by Tailwind CSS and shadcn/ui components - 📱 **Responsive** \- Works great on all devices - 🔍 **SEO Optimized** \- Built-in SEO features Whether you're a beginner or an experienced developer, this documentation will guide you through the setup, configuration, and deployment of your website. This guide assumes you have some familiarity with Next.js and Drizzle ORM. If you don't have any of these, please refer to the [Official Documentation](https://mksaas.com/docs#official-documentation) as we will not cover the basics in this guide. Let's get started! ## [Tech Stack](https://mksaas.com/blog/what-is-mksaas\#tech-stack) [**Next.js 15** \\ \\ The React framework for building full-stack web applications using React 19.](https://nextjs.org/) [**Drizzle ORM** \\ \\ An ORM tool that helps you access your database in a type-safe way.](https://orm.drizzle.team/) [**Tailwind CSS** \\ \\ A utility-first CSS framework packed with utility classes that can be composed to build any design.](https://tailwindcss.com/) [**Radix UI / shadcn/ui / Magic UI / Tailark** \\ \\ A collection of pre-built components and blocks that you can use to build your SaaS websites.](https://ui.shadcn.com/) [**Better Auth** \\ \\ A modern, secure, easy-to-use and framework agnostic authentication solution.](https://better-auth.com/) [**Resend** \\ \\ A modern email service that allows you to send emails from your application.](https://resend.com/) [**Fumadocs** \\ \\ A beautiful documentation framework for Developers, flexible and performant.](https://fumadocs.vercel.app/) [**Stripe** \\ \\ The most popular and secure payment processor for SaaS websites.](https://stripe.com/) [**Vercel AI SDK** \\ \\ A collection of tools for building AI applications, open source and free.](https://sdk.vercel.ai/) [**Zustand** \\ \\ A small, fast and scalable state management solution for React applications.](https://zustand-demo.pmnd.rs/) [**Next-Intl** \\ \\ Internationalization library for Next.js that supports routing, messages, and localization.](https://next-intl.dev/) [**Next-Safe-Action** \\ \\ Type-safe server actions for Next.js with built-in validation and error handling.](https://next-safe-action.dev/) ## [What's Next?](https://mksaas.com/blog/what-is-mksaas\#whats-next) Dive into the [documentation](https://mksaas.com/docs) to explore the features, and start building your SaaS website today! 🚀 [All Posts](https://mksaas.com/blog) ## Author ![avatar for Fox](https://mksaas.com/_next/image?url=%2Fimages%2Favatars%2Ffox.png&w=3840&q=75) Fox ## Categories - [General](https://mksaas.com/blog/category/general) ## Table of Contents - [What is MkSaaS?](https://mksaas.com/blog/what-is-mksaas#what-is-mksaas) - [Tech Stack](https://mksaas.com/blog/what-is-mksaas#tech-stack) - [What's Next?](https://mksaas.com/blog/what-is-mksaas#whats-next) ## More Posts [![FAQ](https://mksaas.com/_next/image?url=%2Fimages%2Fblog%2Fpost-faq.png&w=3840&q=75)\\ \\ General\\ \\ **FAQ** \\ \\ Frequently asked questions before you buy MkSaaS\\ \\ ![avatar for Fox](https://mksaas.com/_next/image?url=%2Fimages%2Favatars%2Ffox.png&w=3840&q=75)\\ \\ Fox\\ \\ 2025/04/01](https://mksaas.com/blog/faq) ## Newsletter Join the community Subscribe to our newsletter for the latest news and updates Email Subscribe ## AI Features Setup # AI Learn how to set up and use AI features with OpenAI, DeepSeek, and other AI providers This guide will help you set up and use AI features with OpenAI, DeepSeek, and other AI providers. 🚧 Under construction 🚧 ## [Next Steps](https://mksaas.com/docs/ai\#next-steps) While this guide is under construction, explore these related topics: [**Project Structure** \\ \\ Understand the organization of your codebase](https://mksaas.com/docs/structure) [**IDE Setup** \\ \\ Configure your development environment](https://mksaas.com/docs/ide) [**Getting Started** \\ \\ Set up and run your MkSaaS application](https://mksaas.com/docs/start) [**Database Setup** \\ \\ Configure your database for AI features](https://mksaas.com/docs/database) ### Table of Contents [Next Steps](https://mksaas.com/docs/ai#next-steps) ## MkSaaS Analytics Guide # Analytics Learn how to set up and use various analytics tools in your MkSaaS website MkSaaS supports multiple analytics tools to track website traffic and user behavior. This flexible approach allows you to choose the analytics service that best fits your needs, privacy requirements, and budget. ## [Analytics System Structure](https://mksaas.com/docs/analytics\#analytics-system-structure) The analytics system in MkSaaS is designed with the following components: src analytics analytics.tsx google-analytics.tsx umami-analytics.tsx plausible-analytics.tsx open-panel-analytics.tsx data-fast-analytics.tsx seline-analytics.tsx This modular structure makes it easy to enable or disable specific analytics providers, and to add new ones as needed. ## [Setup](https://mksaas.com/docs/analytics\#setup) MkSaaS comes pre-configured with support for several popular analytics services: ### [Vercel Analytics](https://mksaas.com/docs/analytics\#vercel-analytics) [Vercel Analytics](https://vercel.com/analytics) provides detailed insights into your website's visitors without compromising user privacy. 1. Enable Web Analytics in your Vercel project: - Go to the Vercel dashboard and select your project - Navigate to the Analytics tab - Click "Enable" in the Web Analytics section 2. No environment variables are required as MkSaaS integrates Vercel Analytics through website configuration: src/config/website.tsx ``` analytics: { enableVercelAnalytics: true, } ``` 3. If you don't want to use Vercel Analytics, you can disable it in the website configuration: src/config/website.tsx ``` analytics: { enableVercelAnalytics: false, } ``` Vercel Analytics is implemented using the official [@vercel/analytics](https://vercel.com/docs/analytics/quickstart) package. ### [Vercel Speed Insights](https://mksaas.com/docs/analytics\#vercel-speed-insights) [Speed Insights](https://vercel.com/docs/speed-insights) helps you monitor and improve your website's performance by measuring Core Web Vitals and user interactions. 1. Enable Speed Insights in your Vercel project: - Go to the Vercel dashboard and select your project - Navigate to the Analytics tab - Click "Enable" in the Speed Insights section 2. No environment variables are required as MkSaaS integrates Speed Insights through website configuration: src/config/website.tsx ``` analytics: { enableSpeedInsights: true, } ``` 3. If you don't want to use Speed Insights, you can disable it in the website configuration: src/config/website.tsx ``` analytics: { enableSpeedInsights: false, } ``` Speed Insights is implemented using the official [@vercel/speed-insights](https://vercel.com/docs/speed-insights/quickstart) package. ### [Google](https://mksaas.com/docs/analytics\#google) [Google Analytics](https://analytics.google.com/) is a widely used analytics service that provides comprehensive website tracking and analytics capabilities. 1. Create a Google Analytics account at [analytics.google.com](https://analytics.google.com/) 2. Set up a new property and get your Measurement ID (starts with "G-") 3. Add the following environment variable: .env ``` NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX" ``` Google Analytics is integrated using the official [@next/third-parties](https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-analytics) package for Next.js. ### [Umami](https://mksaas.com/docs/analytics\#umami) [Umami](https://umami.is/) is a simple, privacy-focused alternative to Google Analytics. It provides essential website statistics without compromising visitor privacy. 1. Create a Umami account at [umami.is](https://umami.is/) or set up your own Umami instance 2. Create a new website in your Umami dashboard 3. Get your Website ID and script URL 4. Add the following environment variables: .env ``` NEXT_PUBLIC_UMAMI_WEBSITE_ID="YOUR-WEBSITE-ID" NEXT_PUBLIC_UMAMI_SCRIPT="https://cloud.umami.is/script.js" ``` For self-hosted Umami instances, use your custom script URL instead of the default one. ### [Plausible](https://mksaas.com/docs/analytics\#plausible) [Plausible](https://plausible.io/) is a lightweight, open-source, and privacy-friendly analytics tool that doesn't require cookie notices. 1. Create a Plausible account at [plausible.io](https://plausible.io/) or set up your own Plausible instance 2. Add your website 3. Get your domain 4. Add the following environment variables: .env ``` NEXT_PUBLIC_PLAUSIBLE_DOMAIN="YOUR-DOMAIN" NEXT_PUBLIC_PLAUSIBLE_SCRIPT="https://plausible.io/js/script.js" ``` For self-hosted Plausible instances, use your custom script URL instead of the default one. ### [OpenPanel](https://mksaas.com/docs/analytics\#openpanel) [OpenPanel](https://openpanel.dev/) is an open-source product analytics platform designed for tracking user behavior. 1. Create an OpenPanel account at [openpanel.dev](https://openpanel.dev/) 2. Create a new project 3. Get your Client ID 4. Add the following environment variable: .env ``` NEXT_PUBLIC_OPENPANEL_CLIENT_ID="YOUR-CLIENT-ID" ``` ### [DataFast](https://mksaas.com/docs/analytics\#datafast) [DataFast](https://datafa.st/) is a simple, privacy-friendly analytics tool focused on speed and reliability. 1. Create a DataFast account at [datafa.st](https://datafa.st/) 2. Add your website 3. Get your Website ID and domain 4. Add the following environment variables: .env ``` NEXT_PUBLIC_DATAFAST_ANALYTICS_ID="YOUR-WEBSITE-ID" NEXT_PUBLIC_DATAFAST_ANALYTICS_DOMAIN="YOUR-DOMAIN" ``` ### [Seline](https://mksaas.com/docs/analytics\#seline) [Seline](https://seline.com/) is an analytics platform with a focus on subscription businesses and conversion tracking. 1. Create a Seline account at [seline.com](https://seline.com/) 2. Set up your project 3. Get your token 4. Add the following environment variable: .env ``` NEXT_PUBLIC_SELINE_TOKEN="YOUR-TOKEN" ``` ## [How It Works](https://mksaas.com/docs/analytics\#how-it-works) MkSaaS implements analytics tracking through a central `Analytics` component that conditionally renders individual analytics components based on environment variables and configuration: src/analytics/analytics.tsx ``` export function Analytics() { if (process.env.NODE_ENV !== 'production') { return null; } return ( <> {/* google analytics */} {/* umami analytics */} {/* plausible analytics */} {/* datafast analytics */} {/* openpanel analytics */} {/* seline analytics */} {/* vercel analytics */} {websiteConfig.analytics.enableVercelAnalytics && ( )} {/* speed insights */} {websiteConfig.analytics.enableSpeedInsights && ( )} ); } ``` Each analytics component is: - Only active in production mode - Only loaded if the required environment variables are set or enabled in website configuration - Implemented with minimal overhead This means you can enable multiple analytics services simultaneously, or just use one that fits your needs. ## [Customization](https://mksaas.com/docs/analytics\#customization) ### [Adding a Custom Analytics](https://mksaas.com/docs/analytics\#adding-a-custom-analytics) You can add support for additional analytics services by following these steps: 1. Create a new file in the `src/analytics` directory (e.g., `my-analytics.tsx`) 2. Implement your analytics component 3. Add it to the `Analytics` component Here's an example of adding a custom analytics service: src/analytics/my-analytics.tsx ``` 'use client'; import Script from 'next/script'; /** * My Custom Analytics * * https://example.com */ export function MyAnalytics() { if (process.env.NODE_ENV !== 'production') { return null; } const apiKey = process.env.NEXT_PUBLIC_MY_ANALYTICS_API_KEY; if (!apiKey) { return null; } return (