Configuration Guide

This guide covers all configuration options for TamborraData, including environment variables, Next.js configuration, and TypeScript settings.

Environment Variables

Overview

TamborraData uses environment variables for configuration. Variables are loaded from .env.local for local development and configured in Vercel for production.

.env.local is ignored by Git and should never be committed. Use .env.example as a template.

Required Variables

SUPABASE_URL

string

required

Your Supabase project URL.Format: https://xxxxx.supabase.co
Example: https://abcdefghijk.supabase.coWhere to find: Supabase Dashboard > Settings > API > Project URL

SUPABASE_ANON_KEY

string

required

Your Supabase anonymous/public API key.Format: JWT token starting with eyJ...
Example: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...Where to find: Supabase Dashboard > Settings > API > Project API keys > anon public

Use the anon/public key, NOT the service_role key. The service_role key bypasses Row Level Security and should never be exposed to the client.

Environment File Structure

Create .env.local in your project root:

.env.local

# Supabase credentials
SUPABASE_URL="https://xxxxx.supabase.co"
SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."

Always use double quotes around values. This prevents issues with special characters in keys.

Environment Loading

Next.js automatically loads environment variables from:

.env.local (local development, highest priority)
.env.production (production builds)
.env.development (development builds)
.env (all environments, lowest priority)

# .env.local (gitignored)
SUPABASE_URL="your-dev-database-url"
SUPABASE_ANON_KEY="your-dev-key"

Next.js Configuration

File: `next.config.ts`

The Next.js configuration file controls framework behavior, redirects, headers, and optimizations.

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // Domain redirect (production only)
  async redirects() {
    const redirects = [];

    if (process.env.NODE_ENV === 'production') {
      redirects.push({
        source: '/:path*',
        has: [{
          type: 'host' as const,
          value: 'www.tamborradata.com',
        }],
        destination: 'https://tamborradata.com/:path*',
        permanent: true,
      });
    }

    return redirects;
  },

  // Performance & Security
  poweredByHeader: false,
  compress: true,

  // Security Headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-DNS-Prefetch-Control', value: 'on' },
          { key: 'X-XSS-Protection', value: '1; mode=block' },
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

Configuration Options Explained

Redirects

Purpose: Force non-www domain in production.

async redirects() {
  // Only in production
  if (process.env.NODE_ENV === 'production') {
    return [{
      source: '/:path*',
      has: [{ type: 'host', value: 'www.tamborradata.com' }],
      destination: 'https://tamborradata.com/:path*',
      permanent: true,  // 301 redirect
    }];
  }
  return [];
}

Behavior: www.tamborradata.com → tamborradata.com

Security Headers

Purpose: Enhance security and prevent common attacks.

Header	Value	Purpose
`X-DNS-Prefetch-Control`	`on`	Enable DNS prefetching
`X-XSS-Protection`	`1; mode=block`	Block XSS attacks
`X-Frame-Options`	`DENY`	Prevent clickjacking
`X-Content-Type-Options`	`nosniff`	Prevent MIME sniffing
`Referrer-Policy`	`origin-when-cross-origin`	Control referrer info
`Strict-Transport-Security`	`max-age=63072000`	Force HTTPS

These headers are automatically applied to all routes.

Performance Options

poweredByHeader: false
Removes X-Powered-By: Next.js header for security (hides framework).compress: true
Enables gzip/brotli compression for responses.

Do not modify next.config.ts unless you understand the implications. Incorrect configuration can break routing or security.

TypeScript Configuration

File: `tsconfig.json`

TypeScript configuration for the project.

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "noEmit": true,
    "incremental": true,
    "module": "esnext",
    "esModuleInterop": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "plugins": [{ "name": "next" }],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

Key Settings

target

string

default:"ES2017"

ECMAScript version for compiled JavaScript.

strict

boolean

default:"false"

Currently disabled for faster development.

Consider enabling "strict": true for production-ready code. This enables:

strictNullChecks
strictFunctionTypes
strictBindCallApply
strictPropertyInitialization

moduleResolution

string

default:"bundler"

Uses modern bundler resolution (Node16 + extras).

paths

object

Path aliases for imports.

// Instead of:
import Component from '../../../components/Component';

// You can write:
import Component from '@/components/Component';

TailwindCSS Configuration

File: `tailwind.config.ts`

TamborraData uses TailwindCSS 4 with CSS-first configuration.

TailwindCSS 4 uses @import in CSS files instead of tailwind.config.ts. The config file is minimal.

PostCSS Configuration

postcss.config.mjs

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

CSS Entry Point

Tailwind is imported via CSS:

app/globals.css

@import 'tailwindcss';

/* Custom theme variables */
@theme {
  --color-primary: #1e40af;
  --color-secondary: #7c3aed;
}

ESLint Configuration

File: `eslint.config.mjs`

Linting rules for code quality.

eslint.config.mjs

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [...compat.extends("next/core-web-vitals")];

export default eslintConfig;

Running ESLint

pnpm lint

ESLint automatically runs during pnpm build. Fix all errors before deploying.

Package Manager Configuration

Using pnpm

The project uses pnpm for package management. Why pnpm?

⚡ Fast: 2-3x faster than npm
💾 Efficient: Uses hard links to save disk space
🔒 Strict: Better dependency resolution

Lock File

pnpm-lock.yaml tracks exact dependency versions.

Always commit pnpm-lock.yaml to ensure consistent installs across environments.

Common Commands

pnpm install

Dependency Management

Production Dependencies

Key runtime dependencies:

Package	Version	Purpose
`next`	16.1.0	React framework
`react`	19.2.3	UI library
`@supabase/supabase-js`	2.89.0	Database client
`@tanstack/react-query`	5.90.12	Data fetching
`@nivo/bar`, `@nivo/line`	0.99.0	Charts
`framer-motion`	12.23.26	Animations
`@vercel/analytics`	1.6.1	Analytics

Development Dependencies

Package	Version	Purpose
`typescript`	5.9.3	Type checking
`tailwindcss`	4.1.18	CSS framework
`eslint`	9.39.2	Code linting
`prettier`	3.7.4	Code formatting

Run pnpm outdated to check for package updates.

Build Configuration

Production Build

pnpm build

This command:

Type-checks TypeScript
Lints code with ESLint
Compiles Next.js app
Generates static pages
Optimizes assets

Build Output

Build artifacts are stored in .next/:

.next/
├── cache/              # Build cache
├── server/             # Server-side code
├── static/             # Static assets
└── types/              # Generated types

Never commit the .next directory. It’s regenerated on each build.

Environment-Specific Configuration

Development

pnpm dev

Features:

Hot Module Replacement (HMR)
React Query Devtools
Verbose error messages
Source maps enabled

Production

pnpm build
pnpm start

Features:

Minified code
No devtools
Optimized bundles
Server-side rendering

Vercel Configuration

Automatic Detection

Vercel automatically detects:

Framework: Next.js
Build Command: pnpm build
Output Directory: .next
Install Command: pnpm install

Environment Variables in Vercel

Open Project Settings

Go to your Vercel project > Settings > Environment Variables

Add Variables

Add:

SUPABASE_URL (Plain Text)
SUPABASE_ANON_KEY (Plain Text)

Select Environments

Choose which environments to apply:

✅ Production
✅ Preview
✅ Development (optional)

Redeploy

Trigger a new deployment for changes to take effect.

Use different Supabase projects for production and preview/development environments.

Configuration Troubleshooting

Environment Variables Not Loading

Problem: App can’t connect to Supabase. Solutions:

Verify .env.local exists and has correct values
Restart dev server after changing .env.local
Check for typos in variable names
Ensure no trailing spaces in values
Variables must start with NEXT_PUBLIC_ to be accessible in browser (Supabase keys don’t need this)

TypeScript Path Alias Errors

Problem: Cannot find module '@/...' Solution: Ensure tsconfig.json has:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Restart TypeScript server in your IDE.

Build Failures

Problem: pnpm build fails. Solutions:

Clear build cache:
```
rm -rf .next
pnpm build
```
Check for TypeScript errors:
```
pnpm tsc --noEmit
```

Verify all dependencies installed:

rm -rf node_modules pnpm-lock.yaml
pnpm install

Best Practices

DO:

Keep .env.local out of version control
Use different credentials for dev/staging/production
Regularly update dependencies
Run pnpm lint before committing
Test builds locally before deploying

DON’T:

Commit .env.local or .env.production
Use service_role key in client code
Modify next.config.ts without testing
Ignore TypeScript errors
Skip pnpm install after pulling changes

Next Steps

Deployment

Learn how to deploy to production

Mock Data

Understand the synthetic data structure

API Reference

Explore API endpoints

Architecture

Deep dive into system design

Get Started

Core Features

Architecture

Development

Advanced Topics

​Configuration Guide

​Environment Variables

​Overview

​Required Variables

​Environment File Structure

​Environment Loading

​Next.js Configuration

​File: next.config.ts

​Configuration Options Explained

​TypeScript Configuration

​File: tsconfig.json

​Key Settings

​TailwindCSS Configuration

​File: tailwind.config.ts

​PostCSS Configuration

​CSS Entry Point

​ESLint Configuration

​File: eslint.config.mjs

​Running ESLint

​Package Manager Configuration

​Using pnpm

​Lock File

​Common Commands

​Dependency Management

​Production Dependencies

​Development Dependencies

​Build Configuration

​Production Build

​Build Output

​Environment-Specific Configuration

​Development

​Production

​Vercel Configuration

​Automatic Detection

​Environment Variables in Vercel

​Configuration Troubleshooting

​Environment Variables Not Loading

​TypeScript Path Alias Errors

​Build Failures

​Best Practices

​Next Steps

Deployment

Mock Data

API Reference

Architecture

Build docs developers (and LLMs) love

Configuration Guide

Environment Variables

Overview

Required Variables

Environment File Structure

Environment Loading

Next.js Configuration

File: `next.config.ts`

Configuration Options Explained

TypeScript Configuration

File: `tsconfig.json`

Key Settings

TailwindCSS Configuration

File: `tailwind.config.ts`

PostCSS Configuration

CSS Entry Point

ESLint Configuration

File: `eslint.config.mjs`

Running ESLint

Package Manager Configuration

Using pnpm

Lock File

Common Commands

Dependency Management

Production Dependencies

Development Dependencies

Build Configuration

Production Build

Build Output

Environment-Specific Configuration

Development

Production

Vercel Configuration

Automatic Detection

Environment Variables in Vercel

Configuration Troubleshooting

Environment Variables Not Loading

TypeScript Path Alias Errors

Build Failures

Best Practices

Next Steps