NextJS Base Boilerplate

Let's go through the basic and important information about the base boilerplate.

It includes all the features and templates required to build a SaaS application quickly and efficiently. You can also find pre-built, commonly used AI modules that you can simply import and use in your application.

File Structure

We are following the standard file structure accross the BuilderKit.ai (opens in a new tab), as mentioned below.

• 🗂️ src - We follow the src directory pattern, which is the root directory for the application code.
  • 🗂️ app - The application folder that contains the pages, API routes, layout, providers, etc. It also contains globals.css file, which holds the css variables for styling. You can modify it as per your requirements.
  • 🗂️ components - This folder contains reusable components used accross the project. And the ui folder inside it conatins the Shadcn componenets.
  • 🗂️ types - This folder primarily contains an autogenerated file named supabase.ts, which includes the table schema. Additionally, it has a types.ts file created to store custom types used globally.
  • 🗂️ utils
    • The Supabase folder here contains the Supabase client initializations separately for client, server, middleware and admin setups. The admin client is used when you need admin access for operations in the Supabase table (e.g., it is commonly used in webhooks). Remember to use the admin client only on the server side for security reasons.
    • The get-user.ts file is used to read user details on the server side. It serves as a common function for use in any pages and components in the project.
    • The seo-metadata.tsx file contains modular SEO configuration that can be imported and used in any of the pages.
    • The utils.ts file contains helper functions used throughout the project.
  • 📄 config.ts - This file contains configurations used across the project (e.g., app name or Stripe base URL).
• 📄 .env.example - This file contains all the environment variables required in the project.
• 📄 next-sitemap.config.js - Contains the configuration for generating the sitemap automatically.

Click on any of the folders in the structure below to toggle them open and closed to view the content inside: