Skip to main content

​
Overview

AiVault uses several configuration files to customize the build process, styling, and development environment. This guide covers the key configuration files you’ll work with.

​
Next.js Configuration

The next.config.ts file contains the Next.js configuration.

​
Configuration Options

next.config.ts
import type {NextConfig} from 'next';

const nextConfig: NextConfig = {
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: false,
  },
  // Allow access to remote image placeholder.
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'picsum.photos',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'logos.hunter.io',
        port: '',
        pathname: '/**',
      },
    ],
  },
  output: 'standalone',
  transpilePackages: ['motion'],
  webpack: (config, {dev}) => {
    // HMR is disabled in AI Studio via DISABLE_HMR env var.
    // Do not modify—file watching is disabled to prevent flickering during agent edits.
    if (dev && process.env.DISABLE_HMR === 'true') {
      config.watchOptions = {
        ignored: /.*/,
      };
    }
    return config;
  },
};

export default nextConfig;

​
Key Settings Explained

​
reactStrictMode
boolean
default:"true"
Enables React’s Strict Mode for additional development checks and warnings.
​
eslint.ignoreDuringBuilds
boolean
default:"true"
Skips ESLint checks during production builds to speed up deployment.
​
typescript.ignoreBuildErrors
boolean
default:"false"
Enforces TypeScript type checking during builds. Set to false to maintain code quality.
​
images.remotePatterns
array
Configures allowed external image sources for Next.js Image optimization:
  • picsum.photos - Placeholder images
  • logos.hunter.io - Logo images for AI tools
​
output
string
default:"standalone"
Generates a standalone build optimized for Docker containers and serverless deployments.
​
transpilePackages
array
Packages to transpile. Currently transpiling motion (Framer Motion) for compatibility.

​
Adding Remote Image Domains

To add a new remote image source: 
images: {
  remotePatterns: [
    // ... existing patterns
    {
      protocol: 'https',
      hostname: 'your-domain.com',
      port: '',
      pathname: '/**',
    },
  ],
}

​
Tailwind CSS Configuration

AiVault uses Tailwind CSS 4 with the new CSS-first configuration approach.

​
Global Styles

The main Tailwind configuration is in app/globals.css:
app/globals.css
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);
    --radius-3xl: calc(var(--radius) + 12px);
    --radius-4xl: calc(var(--radius) + 16px);
    --color-card: var(--card);
    --color-ring: var(--ring);
    --color-input: var(--input);
    --color-muted: var(--muted);
    --color-accent: var(--accent);
    --color-border: var(--border);
    /* ... more color variables */
}

​
Features

  • Tailwind CSS 4 - Latest version with CSS-first configuration
  • tw-animate-css - Extended animation utilities
  • shadcn/ui - Pre-configured component styles
  • Custom dark mode - Custom variant for dark theme
  • CSS variables - Design tokens for colors and spacing

​
shadcn/ui Configuration

The components.json file configures shadcn/ui components:
components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "rtl": false,
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

​
Convex Configuration

Convex is configured through the convex/ directory in your project.

​
Development Setup

Start the Convex development server: 
npx convex dev
This will:
  1. Connect to your Convex deployment
  2. Watch for schema changes
  3. Push updates automatically
  4. Provide real-time logs

​
Production Deployment

The build script automatically handles Convex deployment:
package.json
{
  "scripts": {
    "build": "if [ -n \"$CONVEX_DEPLOY_KEY\" ]; then npx convex deploy --cmd \"next build\"; else next build; fi"
  }
}
This ensures that:
  • If CONVEX_DEPLOY_KEY is set (production), Convex is deployed before building
  • Otherwise (development), only Next.js is built

​
Convex Environment Variables

Convex automatically syncs environment variables. Add them in the Convex dashboard or via CLI: 
npx convex env set CLERK_SECRET_KEY "sk_test_..."
npx convex env set RESEND_API_KEY "re_..."

​
TypeScript Configuration

The tsconfig.json configures TypeScript compilation:
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  }
}

​
Running the Development Server

To run AiVault in development mode, you need two terminal windows:

​
Terminal 1: Convex Backend

npx convex dev

​
Terminal 2: Next.js Frontend

npm run dev

​
Available Scripts

From package.json:
​
dev
command
Starts the Next.js development server
npm run dev
​
build
command
Builds the application for production with conditional Convex deployment
npm run build
​
start
command
Starts the production server (after building)
npm run start
​
lint
command
Runs ESLint to check for code quality issues
npm run lint
​
test
command
Runs the Vitest test suite
npm run test
​
clean
command
Cleans the Next.js build cache
npm run clean

​
Hot Module Replacement (HMR)

HMR is disabled in AI Studio environments to prevent flickering during agent edits. This is controlled by the DISABLE_HMR environment variable.
For normal development, HMR is enabled by default and provides instant feedback as you edit files.

​
Next Steps

Database Schema

Learn about the Convex database schema

Convex Backend

Explore the Convex backend architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us