Next.js + Capacitor + Ionic React Setup

Purpose

This skill provides a comprehensive, project-agnostic guide for setting up a Next.js application with Capacitor for native mobile support and Ionic React for UI components. It covers core setup requirements, optional enhancements, and complete push notification implementation.

When to Use

Use this skill when:

• Setting up a new Next.js project with Capacitor and Ionic React
• Adding Capacitor to an existing Next.js application
• Configuring push notifications for a Capacitor app
• Troubleshooting Capacitor build or sync issues
• Understanding the conditional static export pattern for Next.js + Capacitor

Architecture Overview

Project Structure Options