Next Tools Schwab Application

The Next Tools Schwab application serves as an internal development toolkit for Charles Schwab developers and operations teams. It provides essential development utilities, deployment management tools, and administrative interfaces for managing applications across different environments.

Overview

Application: apps/nexttools.schwab.com
Port: 3010
Version: 1.0.94
Framework: Next.js 15.3.2 with App Router
Purpose: Internal development tools and deployment management
Access: Internal-only development and operations tool

Key Features

Deployment Aliasing: Domain alias management for staged deployments
Development Environment Tools: Environment-specific testing and validation
Vercel Integration: Direct integration with Vercel deployment platform
Analytics Integration: Built-in Vercel Analytics and Speed Insights
Server Actions: Form handling with Next.js server actions
Test Mode: Special build mode for testing environments
Vercel Toolbar: Enhanced development debugging capabilities

Technical Architecture

Framework Stack

Technology	Version	Purpose
Next.js	15.3.2	React framework with App Router
React	19.1.0	Component library
TypeScript	5.8.2	Type safety and development experience
Tailwind CSS	3.4.17	Utility-first styling
Vercel Functions	1.6.0	Serverless function utilities
Vercel Analytics	1.5.0	Usage analytics and monitoring

Core Dependencies

Key dependencies from package.json
{
  "@schwab/fetch": "workspace:*",
  "@schwab/schema": "workspace:*",
  "@schwab/security": "workspace:*",
  "@schwab/server-actions": "workspace:*",
  "@schwab/ui": "workspace:*",
  "@schwab/utilities": "workspace:*",
  "@vercel/analytics": "^1.5.0",
  "@vercel/edge-config": "^1.4.0",
  "@vercel/functions": "^1.6.0",
  "@vercel/speed-insights": "^1.2.0",
  "@vercel/toolbar": "^0.1.36"
}

Monorepo Integration

The application leverages several internal packages:

@schwab/fetch: Deployment and API data fetching utilities
@schwab/server-actions: Server-side form handling and actions
@schwab/schema: Data validation and enums
@schwab/security: Security utilities and middleware
@schwab/ui: Shared React component library
@schwab/utilities: Common utility functions

Directory Structure

apps/nexttools.schwab.com/
├── src/
│   ├── app/                   # App Router directory (Next.js 13+)
│   │   ├── aliasing/         # Domain aliasing tool
│   │   │   ├── page.tsx      # Main aliasing interface
│   │   │   └── form-aliaser.tsx # Aliasing form component
│   │   ├── layout.tsx        # Root layout component
│   │   ├── favicon.ico       # Application favicon
│   │   ├── icon.png          # App icon
│   │   └── apple-icon.png    # Apple touch icon
│   └── global/               # Global styles and assets
│       ├── styles.css        # Global CSS styles
│       └── icons.scss        # Icon definitions
├── public/                   # Static assets
│   └── nextassets/          # Next.js specific assets
├── .allowlists/             # Security allowlist configurations
├── next.config.js           # Next.js configuration
├── tailwind.config.ts       # Tailwind CSS configuration
├── postcss.config.js        # PostCSS configuration
└── tsconfig.json            # TypeScript configuration

Core Functionality

Deployment Aliasing Tool

The primary feature is a deployment aliasing management system:

Route: /aliasing
Purpose: Manage domain aliases for Vercel deployments

Aliasing page structure
export default async function Page() {
  const deployments = await getDeployments();
  const availableDomainAliases = Object.values(EDataLayerDomains);
  
  const allDeployments = await Promise.all(
    deployments.map(async (dpl) => {
      const aliases = await getDomainAliases(dpl?.id);
      return { ...dpl, ...aliases };
    })
  );
  
  return (
    <Container>
      {/* Deployment listing and aliasing interface */}
    </Container>
  );
}

Key capabilities:

Deployment Listing: View all staged deployments
Alias Management: Assign and modify domain aliases
Environment Mapping: Map deployments to specific domains
Real-time Updates: Dynamic deployment status monitoring

Form-Based Aliasing Interface

Server action integration
export default function FormAliaser({ deployment, EDataLayerDomains }) {
  const initialState = { errors: [] };
  const extraData = {
    dpl: deployment.id,
    buildUrl: deployment.url,
  };
  
  const attachExtraData = AliaserAction.bind(null, extraData);
  const [state, formAction] = useActionState(attachExtraData, initialState);
  
  return (
    <form action={formAction}>
      {/* Form fields for alias configuration */}
    </form>
  );
}

Features:

Server Actions: Next.js server-side form processing
Error Handling: Comprehensive validation and error display
State Management: React hooks for form state
Toast Notifications: User feedback for actions

Development Workflow

Local Development

Development commands
# Install dependencies
pnpm install

# Start development server on port 3010
pnpm dev

# Build for production
pnpm build

# Build in test mode
pnpm build-testmode

# Start production server
pnpm start

# Type checking
pnpm type-check

# Conformance checking
pnpm conformance

The development server automatically runs on port 3010 with process management to prevent port conflicts.

Test Mode Configuration

The application supports a special test mode build:

Test mode build
# Build with test mode enabled
pnpm build-testmode

# Environment variable set during build
__NEXT_TEST_MODE=true next build

This enables:

Test-Specific Behavior: Different configurations for testing
Debug Features: Enhanced logging and debugging capabilities
Mock Data Integration: Test data instead of production APIs

Configuration Management

Next.js Configuration

Key Next.js configuration features
const nextConfig = {
  reactStrictMode: true,
  trailingSlash: false,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'prospectsitecollection.uat-schwab.acsitefactory.com',
        pathname: '**',
      },
      // Additional Drupal image sources...
    ],
  },
};

Key features:

Vercel Toolbar Integration: Enhanced development debugging
Remote Image Patterns: Access to Drupal CMS images
React Strict Mode: Development safety checks
URL Configuration: No trailing slashes for cleaner URLs

Tailwind CSS Integration

Tailwind configuration
import sharedConfig from '@schwab/tsconfig/tailwind.config';

const config: Pick<Config, 'content' | 'presets'> = {
  content: ['./src/app/**/*.tsx'],
  presets: [sharedConfig],
};

Features:

Shared Configuration: Inherits from monorepo Tailwind config
App Router Support: Scoped to App Router directory structure
Design System Integration: Charles Schwab design tokens

TypeScript Configuration

Strict Mode: Enhanced type checking for reliability
Next.js Plugin: Native Next.js TypeScript integration
Incremental Compilation: Faster builds with build info caching
Module Resolution: Bundler-compatible module resolution

Vercel Platform Integration

Analytics and Monitoring

The application includes comprehensive monitoring:

Analytics integration
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

// Integrated into application layout
<Analytics />
<SpeedInsights />

Monitoring features:

Usage Analytics: User interaction tracking
Performance Insights: Core Web Vitals monitoring
Speed Metrics: Load time and performance data
Error Tracking: Runtime error monitoring

Vercel Toolbar integration
const withVercelToolbar = require('@vercel/toolbar/plugins/next')();

module.exports = withVercelToolbar(nextConfig);

Toolbar features:

Deployment Information: Current deployment details
Environment Variables: Runtime configuration inspection
Performance Metrics: Real-time performance data
Debug Tools: Enhanced debugging capabilities

Deployment Management Workflow

Deployment Aliasing Process

Environment Management

The tool facilitates management across multiple environments:

Development: Local and development environment deployments
Staging: Pre-production testing environments
UAT: User acceptance testing environments
Production: Live production deployments (view-only)

Security and Access Control

Internal Access Only

Private Application: Not exposed to public internet
Developer Access: Restricted to Charles Schwab development teams
Allowlist Configuration: Defined security boundaries
Vercel Team Integration: Team-based access control

Security Features

Server-Side Validation: Form validation using Zod schemas
CSRF Protection: Built-in Next.js CSRF protection
Environment Isolation: Secure handling of deployment credentials
Audit Logging: Action tracking for compliance

Testing Strategy

Development Testing

Testing framework setup
{
  "@faker-js/faker": "^8.4.1",
  "@jest/globals": "^29.7.0",
  "@schwab/mock-data": "workspace:*",
  "@schwab/test": "workspace:*",
  "@swc/jest": "^0.2.37",
  "@testing-library/react": "^16.2.0",
  "jest": "^29.7.0",
  "jest-extended": "^4.0.2"
}

Testing capabilities:

Unit Testing: Jest with React Testing Library
Mock Data: Faker.js for realistic test data
Component Testing: Isolated component testing
Server Action Testing: Server-side logic validation

Quality Assurance

TypeScript Strict Mode: Comprehensive type checking
Conformance Rules: Vercel conformance validation
Code Quality: Automated linting and formatting
Performance Testing: Core Web Vitals monitoring

API Integration Patterns

Deployment Data Fetching

Deployment API integration
import { getDeployments } from '@schwab/fetch/getDeployments';
import { getDomainAliases } from '@schwab/fetch/getDomainAliases';

// Fetch deployment data
const deployments = await getDeployments();
const aliases = await getDomainAliases(deploymentId);

Server Actions

Server action usage
import AliaserAction from '@schwab/server-actions/AliaserAction';

// Bind extra data to server action
const attachExtraData = AliaserAction.bind(null, {
  dpl: deployment.id,
  buildUrl: deployment.url,
});

// Use in form component
const [state, formAction] = useActionState(attachExtraData, initialState);

Error Handling and User Feedback

Form Validation

Error display component
{state?.errors && state?.errors?.length > 0 && (
  <div className="toast-danger" role="alert">
    <div className="error-icon">
      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        {/* Error icon SVG */}
      </svg>
    </div>
    <div className="error-messages">
      <ul>
        {state.errors.map((error) => (
          <li key={`${error.path[0]}_${error.code}`}>
            {error.message}
          </li>
        ))}
      </ul>
    </div>
  </div>
)}

Features:

Structured Error Display: Clear error messaging
Accessibility: Proper ARIA roles and screen reader support
Visual Feedback: Toast-style notifications
Field-Specific Errors: Targeted validation messages

Common Use Cases

Domain Alias Assignment

Typical workflow
# 1. Developer creates deployment
vercel deploy

# 2. Access Next Tools
open https://nexttools.schwab.com/aliasing

# 3. Find deployment in list
# 4. Select target domain from dropdown
# 5. Submit form to apply alias
# 6. Access deployment via custom domain

Environment Testing

Environment-specific testing
// Test deployment on specific domain
const testUrl = 'https://test-domain.schwab.com';
const deployment = await getDeploymentByAlias(testUrl);

// Validate deployment functionality
await validateDeployment(deployment.id);

Troubleshooting

Common Issues

Issue	Cause	Solution
Port 3010 in use	Previous process running	Use kill script in dev command
Deployment not found	Deployment may be expired	Check Vercel dashboard for active deployments
Alias assignment fails	Domain already in use	Check existing aliases before assignment
Form validation errors	Missing required fields	Ensure all form fields are completed
TypeScript build errors	Type mismatches	Run `pnpm type-check` to identify issues

Development Tips

Performance

Use the Vercel Toolbar to monitor performance metrics and identify bottlenecks in real-time.

Access Control

This application is for internal use only. Never expose production deployment management to external users.

Monitoring and Analytics

Usage Tracking

Page Views: Track tool usage across different features
Form Submissions: Monitor aliasing actions and success rates
Error Rates: Track validation and processing errors
Performance Metrics: Core Web Vitals and load times

Operational Metrics

Deployment Volume: Number of deployments managed
Alias Assignment Frequency: Tool usage patterns
Error Categories: Common failure modes
User Engagement: Feature adoption and usage trends

Future Enhancements

Multi-Environment Dashboard: Unified view across all environments
Automated Alias Management: Rule-based alias assignment
Deployment History: Historical deployment and alias tracking
Integration APIs: Programmatic access to aliasing functionality
Advanced Security: Role-based access control and audit trails
Batch Operations: Bulk alias management capabilities

This Next Tools application provides essential infrastructure for Charles Schwab's development operations, enabling efficient deployment management and environment configuration across the entire development lifecycle.

Overview​

Key Features​

Technical Architecture​

Framework Stack​

Core Dependencies​

Monorepo Integration​

Directory Structure​

Core Functionality​

Deployment Aliasing Tool​

Form-Based Aliasing Interface​

Development Workflow​

Local Development​

Test Mode Configuration​

Configuration Management​

Next.js Configuration​

Tailwind CSS Integration​

TypeScript Configuration​

Vercel Platform Integration​

Analytics and Monitoring​

Development Toolbar​

Deployment Management Workflow​

Deployment Aliasing Process​

Environment Management​

Security and Access Control​

Internal Access Only​

Security Features​

Testing Strategy​

Development Testing​

Quality Assurance​

API Integration Patterns​

Deployment Data Fetching​

Server Actions​

Error Handling and User Feedback​

Form Validation​

Common Use Cases​

Domain Alias Assignment​

Environment Testing​

Troubleshooting​

Common Issues​

Development Tips​

Monitoring and Analytics​

Usage Tracking​

Operational Metrics​

Future Enhancements​

Overview

Key Features

Technical Architecture

Framework Stack

Core Dependencies

Monorepo Integration

Directory Structure

Core Functionality

Deployment Aliasing Tool

Form-Based Aliasing Interface

Development Workflow

Local Development

Test Mode Configuration

Configuration Management

Next.js Configuration

Tailwind CSS Integration

TypeScript Configuration

Vercel Platform Integration

Analytics and Monitoring

Development Toolbar

Deployment Management Workflow

Deployment Aliasing Process

Environment Management

Security and Access Control

Internal Access Only

Security Features

Testing Strategy

Development Testing

Quality Assurance

API Integration Patterns

Deployment Data Fetching

Server Actions

Error Handling and User Feedback

Form Validation

Common Use Cases

Domain Alias Assignment

Environment Testing

Troubleshooting

Common Issues

Development Tips

Monitoring and Analytics

Usage Tracking

Operational Metrics

Future Enhancements