Post on X	Analytics

• 12K+ impressions
• 700+ likes
• 560+ bookmarks
• 120+ reblogs
• 290+ link clicks

View launch thread on X
Visit Project's account on X

• App Router–first Next.js architecture
• Complex i18n with dynamic routes
• Type-safe JSON-driven content systems
• Performance optimization for fonts, images, and JS bundles
• Practical UX decisions for content-heavy layouts

• 6 detailed companion guides
• 3 languages fully localized (EN/JA/RU)
• 100+ images optimized
• 90% font size reduction (JP fonts, local WOFF2)
• 90+ Lighthouse (Production Build – Vercel in Incognito Mode)

• Lighthouse audits conducted in production environment (Vercel)
• Desktop performance: 90–100
• Mobile performance: 80–90 (content-heavy pages)
• Accessibility / Best Practices / SEO: consistently 100

This project was built as my first full Next.js App Router application to deeply understand:

• Internationalized routing at scale
• Data-driven dynamic pages
• Performance constraints with large localized assets (JP fonts, images)

I chose a real game system to avoid artificial demo logic and to simulate real-world complexity.

It was an important project for me personally since I chose the game I did enjoy playing myself and it was an interesting journey to learn and This project allowed me to translate a personal interest into a structured, production-grade web application.

• Structure: JSON files for all dynamic data
• Rationale: Started with TypeScript files but migrated to JSON for better performance with dynamic routing
• Organization: Separate JSON files for companions, weapons, and game data
• Type Safety: TypeScript interfaces for all JSON data structures

• Structure: Namespaced translation files in /messages/[locale]/
• Languages: EN (English), JA (日本語), RU (Русский)
• Organization: Separated by feature/section to avoid monolithic files
• Implementation: Custom request.ts to load all namespaced translations

lads-next/
├── src/
│ ├── app/                            # Next.js 16 App Router
│ │ ├── [locale]/                     # i18n routing (en/ja/ru)
│ │ │ ├── characters/                 # Dynamic companion pages
│ │ │ ├── contact/                    # Contact form
│ │ │ └── layout.tsx                  #  Root layout with navigation
│ │ ├── components/                   # React components
│ │ │ ├── side-nav/                   # Sidebar navigation
│ │ │ ├── loading-skeletons/          # Loading states
│ │ │ └── ...                         # Reusable UI components
│ │ ├── utils/                        # Utilities & helpers
│ │ │ ├── loaders/                    # Type-safe data loaders
│ │ │ └── types/                      # TypeScript interfaces
│ │ └── hooks/                        # Custom React hooks
│ ├── data/                           # All game data (JSON)
│ │ ├── characters/                   # Character metadata
│ │ ├── gameplay/                     # Companion gameplay guides
│ │ ├── skills/                       # Skill descriptions
│ │ └── weapons/                      # Weapon data
│ └── messages/                       # next-intl translations
│ ├── en/                             # English
│ ├── ja/                             # Japanese
│ └── ru/                             # Russian
├── public/                           # Static assets
│ ├── fonts/                          # Localized WOFF2 fonts
│ ├── images/                         # Game assets
│ │ ├── companions/                   # Character banners & icons
│ │ └── standard_weapons/             # Weapon images
│ └── ...                             # Icons etc
└── config files                      # Next.js, TypeScript configs

• Detailed character pages with protocores, skills, weapons, and gameplay tips
• Section navigation with smooth scrolling
• Back/Up buttons for easy navigation
• Responsive design for all screen sizes

• Real-time search using Fuse.js
• Locale-aware search functionality
• Lazy-loaded search module for performance
• Results displayed with relevant context

• Dynamic image blocks with Lightbox integration
• Proper aspect ratio handling with object-cover
• Optimized loading for weapon/companion images
• WOFF2 font optimization for Japanese characters

• Main Navigation at top and Footer at the bottom of the page
• Left sidebar navigation for additional functions
• Section jump functionality
• Mobile-responsive navigation buttons
• Loading states and skeletons

• Sensitive data partially hidden with * (e.g., s******@gmail.com) and Spoiler component
• Environment variables used for sensitive data (both locally and on vercel)
• Avoids hardcoded contact information

• Node.js 18+
• npm or yarn

# Clone repository
git clone [repository-url]

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

1. Data Management

   • Problem: TypeScript data files became too large and inflexible
   • Solution: Migrated to JSON files with TypeScript interfaces
   • Benefit: Better performance with dynamic routing

2. Internationalization Scaling

   • Problem: Single translation file became unmanageable
   • Solution: Namespaced JSON files per section
   • Challenge: Manual updates to request.ts for new files

3. Component Organization

   • Problem: Component folder became cluttered
   • Solution: Feature-based subfolders (skills, weapons, etc.)
   • Result: Better maintainability and easier navigation

4. Performance Optimization

   • Japanese Fonts: Converted to WOFF2 and hosted locally
   • CSS Blocking: Minimized font imports and optimized delivery
   • Search: Lazy-loaded Fuse.js to reduce initial bundle size
   • Images: Proper sizing with fill + object-cover

5. Error Handling

   • Challenge: Error pages with locale routing
   • Solution: Custom error components within locale folder
   • Implementation: Leveraged next-intl documentation

6. UI/UX Improvements

   • Section Navigation: Added detection for fully loaded sections
   • Mobile Responsiveness: Redesigned navigation for smaller screens
   • Accessibility: Proper focus management and keyboard navigation

• Font Optimization: Reduced Japanese font size to 1.3Mb
• Code Splitting: Dynamic imports for heavy components
• Image Optimization: Proper formats and sizes for all assets
• Search: Lazy-loaded to improve initial page load

• English: Original content (fluent proficiency)
• Russian: Self-translated (native proficiency)
• Japanese: Self-translated with AI assistance for natural phrasing
  • N2-level foundation + AI refinement for game terminology
  • Non-game UI translations primarily self-created
  • All translations verified for accuracy

messages/
├── en/
│   ├── characters.json
│   ├── gameplay.json
│   ├── weapons.json
│   └── ...
├── ja/
└── ru/

1. Create new locale folder in /messages/ for each respective locale
2. Add locale to i18n.ts configuration
3. Update routing.ts and request.ts to add new locale and message paths
4. Add language switcher component in LanguageSwitch.tsx

NB: Translation keys for data-driven sections are located in src/data

• Typography: Local fonts with proper language fallbacks
• Colors: Theme-based with Tailwind classes
• Spacing: Consistent spacing scale
• Components: Reusable with variant props

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

• ESLint for code quality
• TypeScript for type safety
• Tailwind CSS for consistent styling
• Next.js built-in optimizations

• Lighthouse audits for PWA metrics
• DevTools Coverage for unused CSS/JS
• Image optimization verification
• Bundle size analysis

• Multi-language support (EN/JA/RU)
• Companion guide pages structure
• Rafayel companion pages 6/6
• No guide page for other companions
• Weapon section
• Gameplay section
• Search functionality
• Responsive design
• Custom error pages (404, 500)
• Loading states
• Performance optimizations
• Navigation improvements
• Font optimization

• More companions and updates
• Login interface
• User accounts (for saving favorites)
• Comment section
• More battle related sections like Open Orbits etc

1. Fork the repository
2. Create a feature branch
3. Make changes with proper TypeScript types
4. Test with multiple screen sizes
5. Ensure translations are updated for all languages (empty translation keys included)
6. Submit a pull request

• Follow existing JSON structure
• Maintain consistent terminology
• Check glossary structure for the terms that might need explanation for the users
• Test with actual UI components
• Check for text overflow issues

• Data is static JSON
• Search is client-side only
• Content accuracy depends on community knowledge
• No automated tests yet (manual QA + Lighthouse used instead)