NextLang Documentation

Next.js 16React 19

The best way to learn new languages with AI-powered flashcards and real-life phrases.

Live Demo: www.nextlang.co

✨ Features

🎯 AI-Powered Language Learning
Quizlet GeneratorCreate Quizlet-compatible translation dictionaries
Anki GeneratorGenerate Anki flashcards with spaced repetition
Mochi GeneratorCreate Mochi cards in CSV and Markdown formats
Brainscape GeneratorGenerate Brainscape flashcards with CBR algorithm
Multi-languageSupport for 11+ languages
Smart Spaced RepetitionOptimize memory retention with proven algorithms
🔧 Customizable Learning
Flexible GenerationChoose 5+ cards per generation
Custom FieldsCustomize Anki card fields and tags
Multiple FormatsSupport for different separators
Smart TaggingAdd custom tags to organize flashcards
💳 Credit-Based System
Pay-per-useOnly pay for what you use
Flexible PricingMultiple credit packages available
Stripe IntegrationSecure payment processing
Real-time TrackingMonitor usage and balance
♿ Accessibility & UX
WCAG CompliantFull accessibility support
Responsive DesignWorks on all devices
Dark/Light ModeToggle between themes
PWAInstall as native app
Real StatsTrack usage analytics
Health MonitoringSystem health checks
🔄 Data Management & State
TanStack QueryPowerful data fetching & caching
Optimistic UpdatesInstant UI updates with rollback
Background RefetchingKeep data fresh automatically
Query InvalidationSmart cache invalidation
Error HandlingComprehensive error states
DevToolsBuilt-in debugging tools
🔒 Security & Performance
Input SanitizationXSS protection
Rate LimitingRedis-powered protection
Error MonitoringRollbar integration
Environment ValidationZod-based validation
Content SecurityMultiple sanitization levels
TurbopackFast builds & development

🧪 Testing & Quality

🧪 Testing Framework
VitestFast unit testing framework
Testing LibraryReact component testing utilities
JSDOMDOM environment for testing
Coverage ReportsV8 coverage analysis
🔧 Test Structure
Centralized MocksReusable mock management
Component TestsUI component behavior testing
Hook TestsCustom React hooks testing
Integration TestsEnd-to-end functionality testing

📚 How-to Guides

Step-by-Step Guides
  • Create Anki Decks - Complete guide to effective Anki flashcards
  • Create Quizlet Sets - Step-by-step Quizlet study set creation
  • Create Mochi Cards - Guide to Mochi card creation and formatting
  • Create Brainscape Decks - Complete guide to Brainscape flashcard generation
Best Practices
  • Anki Best Practices - Advanced techniques for effective Anki usage
  • Quizlet Study Sets - Proven strategies for Quizlet study sets
  • Mochi Cards Best Practices - Optimization techniques for Mochi cards
  • Brainscape Study Decks - Strategies for effective Brainscape learning
Documentation
  • Complete Documentation - Comprehensive feature documentation
  • API Reference - Detailed API endpoint documentation
  • Troubleshooting - Common issues and solutions
Access Guides
/how-toBrowse all guides
/docsComplete documentation

🎯 Usage

Creating Quizlet Dictionaries
  1. 1. Navigate to /quizlet
  2. 2. Select source and target languages
  3. 3. Enter a prompt describing what you want to learn
  4. 4. Choose the number of words and format
  5. 5. Generate your dictionary
Creating Anki Flashcards
  1. 1. Navigate to /anki
  2. 2. Select source and target languages
  3. 3. Enter a prompt for your flashcards
  4. 4. Customize card fields and settings
  5. 5. Generate your Anki deck
Creating Mochi Cards
  1. 1. Navigate to /mochi
  2. 2. Select source and target languages
  3. 3. Enter a prompt for your flashcards
  4. 4. Choose format (CSV or Markdown)
  5. 5. Configure separator and quote options for CSV
  6. 6. Generate your Mochi cards
Creating Brainscape Decks
  1. 1. Navigate to /brainscape
  2. 2. Select source and target languages
  3. 3. Enter a prompt describing what you want to learn
  4. 4. Choose the number of cards (1-25)
  5. 5. Select file format (CSV or TXT)
  6. 6. Configure separator for CSV/TXT formats
  7. 7. Generate your Brainscape deck
Managing Credits
  1. 1. Sign in to your account
  2. 2. Visit /pricing to purchase credits
  3. 3. Check your credit balance on the user page
Progressive Web App
  1. 1. Visit the website on your mobile device
  2. 2. Tap "Add to Home Screen" when prompted
  3. 3. Use the app like a native application
Security Features
  • Input sanitization prevents XSS attacks
  • Rate limiting protects API endpoints
  • Content security with multiple sanitization levels
  • Error monitoring with Rollbar integration
Health Monitoring
  • System health checks at /api/health
  • Service dependency monitoring
  • Performance metrics tracking
  • Real-time error reporting
Data Management
  • TanStack Query for efficient data fetching
  • Automatic background refetching
  • Smart cache invalidation
  • Optimistic updates with rollback
  • Built-in loading and error states
  • DevTools for debugging queries

📚 Quizlet Integration

Quizlet Study Sets
  • Create translation dictionaries for Quizlet
  • Direct import into Quizlet study sets
  • Supports Quizlet's term-definition format
  • Compatible with Quizlet's spaced repetition
  • Works with Quizlet's mobile and web apps
Quizlet Features
  • Multiple study modes (Learn, Flashcards, Write)
  • Audio pronunciation support
  • Progress tracking and analytics
  • Collaborative study sets
  • Offline study capabilities
Quizlet Format
  • Simple term-definition pairs
  • Clean, readable format
  • Supports special characters and accents
  • Optimized for language learning
  • Easy to edit and customize
Quizlet Customization
  • Choose card count (5-25 cards)
  • Select source and target languages
  • Customize prompt for content generation
  • Save preferences for future use

🃏 Anki Integration

Anki Flashcards
  • Generate Anki-compatible flashcard decks
  • Support for multiple card types and fields
  • Customizable card templates
  • Advanced spaced repetition algorithms
  • Cross-platform synchronization
Anki Features
  • Sophisticated spaced repetition system
  • Rich media support (images, audio, video)
  • Add-ons and customization options
  • Detailed statistics and progress tracking
  • Mobile apps for iOS and Android
Anki Format
  • HTML formatting support
  • Multiple field types (text, audio, images)
  • Custom tags and metadata
  • Deck organization and structure
  • Import/export compatibility
Anki Customization
  • Customize card fields and templates
  • Choose separator types and formatting
  • Add custom tags for organization
  • Configure card count and complexity
  • Save preferences for future generations

📋 Mochi Cards Support

CSV Format
  • Configurable separators (comma, semicolon, tab, pipe)
  • Optional quote wrapping for values
  • Direct import into Mochi Cards app
  • Compatible with spreadsheet applications
  • Supports large card sets efficiently
Markdown Format
  • Human-readable card format
  • Supports rich text formatting
  • Easy to edit and customize
  • Compatible with Mochi's markdown parser
  • Great for sharing and collaboration
Mochi Integration
  • Direct import into Mochi Cards application
  • Preserves card structure and metadata
  • Supports spaced repetition algorithms
  • Compatible with Mochi's template system
  • Maintains language learning context
Format Customization
  • Choose between CSV and Markdown output
  • Customize CSV separators and quoting
  • Select markdown style (basic or detailed)
  • Configure card count (5+ cards)
  • Save preferences for future generations

🧠 Brainscape Integration

Brainscape Flashcards
  • Generate Brainscape-compatible flashcard decks
  • CSV and TXT format support for easy import
  • Front and Back column structure
  • Confidence-Based Repetition (CBR) algorithm
  • Optimized for adaptive spaced repetition
Brainscape Features
  • Confidence-Based Repetition (CBR) learning system
  • Self-assessed confidence levels for adaptive review
  • Focus on challenging concepts automatically
  • Mobile and web app synchronization
  • Progress tracking and analytics
Brainscape Format
  • CSV format with Front and Back columns
  • TXT format for simple text-based import
  • Configurable separators (comma, semicolon, tab)
  • Clean, readable structure
  • Supports special characters and accents
Brainscape Customization
  • Choose card count (1-25 cards per generation)
  • Select source and target languages
  • Customize prompt for content generation
  • Choose between CSV and TXT formats
  • Configure separator type for CSV/TXT
  • Save preferences for future use

📊 Analytics & Monitoring

Real-time Statistics
  • Platform analytics and user engagement tracking
  • Language statistics and popular language pairs
  • Usage dashboards with real-time insights
  • Credit usage and generation metrics
Health Monitoring
  • System health checks at /api/health
  • Database, Redis, OpenAI, and Stripe connectivity
  • Performance metrics and response times
  • Uptime tracking and error rates
Error Tracking
  • Rollbar integration for real-time error monitoring
  • Client-side error handling and reporting
  • Server-side logging and debugging
  • Automatic error alerting and notifications
Security Monitoring
  • Rate limiting analytics and abuse detection
  • Input sanitization monitoring
  • Security event logging and tracking
  • Performance impact analysis

🏗️ Tech Stack

Frontend
  • Next.js 16 - React framework with App Router
  • React 19 - UI library
  • TypeScript 5.9 - Type safety
  • Tailwind CSS 4 - Styling with latest features
  • Radix UI - Accessible component primitives
  • React Hook Form - Form management
  • TanStack Query - Data fetching and state management
  • Zod - Schema validation
  • Lucide React - Icon library
  • Sonner - Toast notifications
Backend
  • Next.js API Routes - Serverless API
  • NextAuth.js - Authentication
  • Drizzle ORM - Database ORM
  • PostgreSQL - Database
  • OpenAI API - AI-powered content generation
  • Redis (Upstash) - Rate limiting and caching
  • Rollbar - Error monitoring and logging
Payments & Infrastructure
  • Stripe - Payment processing with webhooks
  • Vercel - Deployment platform
  • Neon - PostgreSQL database hosting
  • Upstash - Redis database hosting
Security & Performance
  • Rate Limiting - Redis-powered API rate limiting
  • Input Validation - Zod schema validation
  • Environment Validation - Runtime environment checks
  • Turbopack - Fast bundling and development
Development Tools
  • TanStack Query DevTools - Query debugging
  • Drizzle ORM - Type-safe database operations
  • ESLint - Code linting and formatting
  • Prettier - Code formatting with Tailwind plugin
  • TypeScript - Static type checking
  • Husky - Git hooks for code quality
  • Vitest - Fast unit testing framework
  • Testing Library - React component testing
  • Commitlint - Conventional commit validation
  • Consola - Elegant console logger

🐛 Bug Reports

If you find a bug, please email us directly.

Email Support

Made with ❤️ for language learners worldwide