🚀 Noxtable - Lovable to Next.js Migration Tool

Seamlessly convert your Lovable (Vite) applications to Next.js with modern App Router architecture

🎯 Live Demo | 📖 Documentation | 🚀 Get Started

---

✨ Features

• 🔄 Zero-Risk Migration - Your original Lovable files remain untouched
• 🏗️ Modern Architecture - Converts to Next.js 15 App Router with React 19
• 🎨 Tailwind 4 Support - Full compatibility with the latest Tailwind CSS
• 📁 Clean Output - Generates a standalone nextjs folder ready for deployment
• ⚡ Fast Setup - One command to migrate your entire application

🎯 Overview

This tool bridges the gap between Lovable's rapid prototyping environment and Next.js production deployments. Instead of manual migration, lovable-nextjs automatically transforms your Lovable application structure to work seamlessly with Next.js App Router architecture.

How It Works

1. Analyzes your Lovable project structure
2. Transforms components and routes to Next.js patterns
3. Generates a production-ready Next.js application
4. Preserves your original codebase for continued Lovable development

📋 Prerequisites

Before you begin, ensure your development environment meets these requirements:

Requirement	Version	Installation Guide
Node.js	≥ 22.0.0	Download Node.js
React	19.x	Ask Lovable to upgrade your project
Tailwind CSS	4.x	Ask Lovable to upgrade your project

💡 Pro Tip: Ask Lovable AI to handle the React 19 and Tailwind 4 upgrades for you - it knows exactly how to update dependencies safely!

Platform Support

• ✅ macOS - Full support
• ✅ Linux - Full support
• ⚠️ Windows - Not currently supported (shell script dependency)

Cross-platform Script support is planned based on community interest.

🚀 Quick Start

1. Setup Migration Tool

Copy the migration tool to your Lovable project:

# Navigate to your Lovable project root
cd your-lovable-project

# Copy the noxtable folder to your project
# (Download and extract from this repository)

# Add to .gitignore to keep your repo clean
echo "noxtable/" >> .gitignore

2. Install Dependencies

cd noxtable
npm install

3. Run Full Migration

npm run setup

4. Run An Update

An update will only replace lovable components (nextjs/src/client) and create new NextJS pages.

All NextJS configuration, layout, providers, package.json and config files will remain unchanged.

npm run update

4. Launch Your Next.js App

cd ../nextjs
npm run dev

🎉 That's it! Your Lovable app is now running on Next.js at http://localhost:3000

5. Watch for development

If you are actively developing and you want your components edited in Lovable to automatically be converted, you can let the below command run in a separate terminal or window.

npm run watch

📦 Deployment

Your generated Next.js application is deployment-ready:

Vercel (Recommended)

1. Connect your repository to Vercel
2. Set the Root Directory to nextjs
3. Deploy with zero configuration

Other Platforms

cd nextjs
npm run build  # Creates optimized production build
npm start      # Starts production server

🗂️ Project Structure

After migration, your project will have this structure:

your-lovable-project/
├── src/                    # Your original Lovable files (unchanged)
├── noxtable/              # Migration tool (add to .gitignore)
└── nextjs/                # Generated Next.js application
    ├── src/app/           # App Router pages and layouts
    ├── client/            # Transformed lovable components
    ├── public/           # Static assets
    └── package.json      # Merged Lovable and Next.js dependencies

🤝 Contributing

We welcome contributions! Here are some ways to get involved:

• 🐛 Submit an issue here by creating an issue
• 💡 Request features - upvoted issues get priority
• 📝 Improve documentation
• 🔧 Submit pull requests

Roadmap

• Cross-platform scripts compatibility
• Next.js Page Router support
• Lovable Cloud API Conversion

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ for the Lovable community

Report Bug • Request Feature • Documentation