Capacitor + Vite Frontend + Next.js Backend

Purpose

This skill provides a comprehensive guide for setting up a Vite + React frontend with Capacitor for native mobile support and Ionic React for UI components, paired with a separate Next.js backend API. This architecture separates concerns: the frontend is a pure SPA built with Vite, and the backend is a Next.js API server.

When to Use

Use this skill when:

• Setting up a new Capacitor mobile app with Vite + React frontend and Next.js backend
• Adding Capacitor to an existing Vite + React app that calls a Next.js API
• Configuring API base URLs for Capacitor apps (critical: native apps can't use localhost)
• Understanding the monorepo structure for frontend/backend separation
• Troubleshooting Capacitor build or sync issues with Vite

Architecture Overview

Monorepo Structure