Configuration Reference

SaaSStinger Lite uses several configuration files to control:

• Next.js behavior
• TypeScript settings
• Firebase integration
• Styling
• Package management
• Development tooling

This guide explains the purpose of each important configuration file.

Configuration Overview

Main configuration files:

root/

├── package.json
├── next.config.ts
├── tsconfig.json
├── components.json
├── postcss.config.mjs
├── eslint.config.mjs
├── firebase.json
├── firestore.rules
└── firestore.indexes.json

package.json

Location:

package.json

Controls:

• Project metadata
• Dependencies
• Scripts
• Package manager configuration

Scripts

Example scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "lint": "next lint"
  }
}

Common commands:

Development

pnpm dev

Starts the local Next.js development server.

Production Build

pnpm build

Creates a production build.

Linting

pnpm lint

Checks code quality.

Dependencies

Important dependencies include:

Next.js

Provides:

• App Router
• Server Components
• Server Actions
• Application routing

React

Provides the component system.

Firebase SDK

Used for:

• Authentication
• Firestore access

Firebase Admin SDK

Used server-side for:

• Secure database operations
• Administrative actions

Tailwind CSS

Provides utility-based styling.

shadcn/ui

Provides reusable UI components.

next.config.ts

Location:

next.config.ts

Controls Next.js configuration.

Common uses:

• Image configuration
• Build options
• Runtime configuration
• Framework settings

Example:

const nextConfig = {
  reactStrictMode: true,
};

export default nextConfig;

tsconfig.json

Location:

tsconfig.json

Controls TypeScript behavior.

Important settings include:

• Compiler options
• Path aliases
• Type checking rules

Example alias:

{
  "paths": {
    "@/*": [
      "./src/*"
    ]
  }
}

This allows imports like:

import Button from "@/components/ui/button";

components.json

Location:

components.json

Used by shadcn/ui.

Controls:

• Component style
• Component locations
• Utility paths

Example:

{
  "style": "default",
  "tailwind": {
    "css": "src/app/globals.css"
  }
}

Tailwind Configuration

SaaSStinger Lite uses Tailwind CSS for styling.

Main styling file:

src/app/globals.css

Tailwind provides:

• Utility classes
• Responsive design
• Theme customization

Example:

<div className="flex items-center gap-4">

PostCSS Configuration

Location:

postcss.config.mjs

Controls CSS processing.

Used by:

• Tailwind CSS
• CSS transformations

ESLint Configuration

Location:

eslint.config.mjs

Controls code quality rules.

Used for:

• Detecting issues
• Maintaining consistent code style

Run:

pnpm lint

Firebase Configuration

SaaSStinger Lite uses Firebase configuration files.

firebase.json

Location:

firebase.json

Defines Firebase project behavior.

Controls:

• Emulator configuration
• Firebase services
• Deployment settings

Example:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

Firestore Rules

Location:

firestore.rules

Defines database security rules.

Controls:

• Authentication requirements
• Workspace isolation
• Role permissions

Security decisions should be made here, not only in application code.

Firestore Indexes

Location:

firestore.indexes.json

Defines required Firestore indexes.

Indexes support:

• Queries
• Filtering
• Sorting

Environment Configuration

Environment variables are stored locally in:

.env.local

Example:

NEXT_PUBLIC_FIREBASE_PROJECT_ID=

FIREBASE_PROJECT_ID=

FIREBASE_CLIENT_EMAIL=

FIREBASE_PRIVATE_KEY=

Client vs Server Variables

Client Variables

Use:

NEXT_PUBLIC_

prefix.

These are available in browser code.

Server Variables

Examples:

FIREBASE_PRIVATE_KEY=
FIREBASE_CLIENT_EMAIL=

These must remain server-only.

Firebase Architecture

Configuration flow:

Environment Variables

        ↓

Firebase Client SDK

        ↓

Next.js Application


Server Side:

Environment Variables

        ↓

Firebase Admin SDK

        ↓

Firestore

Modifying Configuration

Before changing configuration:

1. Understand the purpose of the file.
2. Test locally.
3. Run:

pnpm tsc --noEmit

4. Run:

pnpm lint

5. Run:

pnpm build

Files Requiring Care

Changes to these files can affect the entire application:

• next.config.ts
• tsconfig.json
• firebase.json
• firestore.rules
• package.json

Review carefully before modifying.

Best Practices

• Keep secrets out of source control.
• Document configuration changes.
• Avoid unnecessary dependency additions.
• Test configuration changes locally.
• Keep Firebase rules synchronized with application behavior.

Related Articles

• Environment Variables
• Firebase Setup
• Folder Structure
• Firestore Schema

Next Steps

Continue with API Reference for server actions, services, and application interfaces.