Integrating Odoo Backend with Next.js and Flutter
Odoo is a powerful open-source ERP system that helps businesses manage inventory, CRM, eCommerce, HR, and finance efficiently, thereby streamlining business operations. One of its biggest strengths is its flexible API, which allows seamless integration with modern frontend frameworks like Next.js and Flutter.
By adopting a headless architecture, businesses can decouple their frontend from Odoo’s backend, enabling faster development, better performance, and richer user experiences. This guide explores how to integrate Odoo with Next.js (for web apps) and Flutter (for mobile apps), complete with practical examples.
Section 1: Why Use a Headless Odoo Setup?
A headless architecture, often referred to as Odoo headless, separates the frontend (what users see) from the backend (business logic and data). Here’s why businesses choose this approach with Odoo:
Example: Odoo’s REST API Capabilities
Odoo supports REST, XML-RPC, and JSON-RPC APIs, making it easy to fetch products, create CRM leads, or process orders from external apps using Odoo RPC and RPC calls.
Section 2: Integrating Odoo with Next.js
Next.js is a React-based framework that enables server-side rendering (SSR) and static site generation (SSG), making it ideal for fast, SEO-friendly web apps that connect Odoo seamlessly.
Step-by-Step Integration
1. Set Up an API Endpoint in Next.js
Create a Next.js API route (pages/api/odoo.js) to communicate with the Odoo server:
import axios from 'axios';
export default async function handler(req, res) {
const { method, body } = req;
if (method === 'POST') {
try {
const response = await axios.post(
'http://your-odoo-server.com/api/create_lead',
body,
{
headers: { 'Content-Type': 'application/json' },
}
);
res.status(200).json(response.data);
} catch (error) {
res.status(500).json({ error: 'Failed to create lead' });
}
}
}
2. Create a Contact Form in Next.js
Build a form that submits data to Odoo’s CRM:
import { useState } from 'react';
export default function ContactForm() {
const [formData, setFormData] = useState({ name: '', email: '', message: '' });
const handleSubmit = async (e) => {
e.preventDefault();
const response = await fetch('/api/odoo', {
method: 'POST',
body: JSON.stringify(formData),
});
const result = await response.json();
alert(result.success ? 'Lead created!' : 'Error submitting form.');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Name" onChange={(e) => setFormData({...formData, name: e.target.value})} />
<input type="email" placeholder="Email" onChange={(e) => setFormData({...formData, email: e.target.value})} />
<textarea placeholder="Message" onChange={(e) => setFormData({...formData, message: e.target.value})} />
<button type="submit">Submit</button>
</form>
);
}
3. Configure Odoo to Receive Data
In Odoo, create a custom API controller to handle form submissions:
from odoo import http
import json
class OdooAPIController(http.Controller):
@http.route('/api/create_lead', type='json', auth='public', methods=['POST'])
def create_lead(self, **kwargs):
data = json.loads(request.httprequest.data)
lead = http.request.env['crm.lead'].create({
'name': data.get('name'),
'email_from': data.get('email'),
'description': data.get('message'),
})
return {'success': True, 'lead_id': lead.id}
Additionally, developers can retrieve information about installed modules using the Dart Odoo RPC Client Library, showcasing the functionality and operations available after establishing a connection.
Benefits of Next.js + Odoo Integration
Section 3: Integrating Odoo with Flutter
Flutter allows businesses to build cross-platform mobile apps that connect to the Odoo database for sales, inventory, and CRM functions.
Step-by-Step Integration
1. **Add the Odoo RPC Library**
Include the package in pubspec.yaml:
dependencies:
odoorpc: ^0.4.0
2. Connect Flutter to Odoo
To fetch products from Odoo in a Flutter app using the REST API, start by importing the necessary package:
import 'package:odoorpc/odoorpc.dart';
Future<void> fetchProducts() async {
final odoo = OdooRPC('http://your-odoo-server.com');
await odoo.login('database_name', 'username', 'password');
final products = await odoo.callKw({
'model': 'product.product',
'method': 'search_read',
'args': [],
'kwargs': {
'fields': ['name', 'list_price'],
},
});
print(products);
}
This setup allows the Flutter app to connect to the Odoo backend, retrieve product data, and utilize it within the app, enhancing overall performance and user experience on mobile devices.
3. Display Odoo Data in Flutter
Show products in a ListView:
ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(products[index]['name']),
subtitle: Text('Price: ${products[index]['list_price']}'),
);
},
)
Benefits of Flutter + Odoo Integration
Conclusion
Odoo with Next.js (for web) and Flutter (for mobile) opens up many possibilities:
✅ Faster, more engaging websites with Next.js.
✅ Seamless mobile CRM & sales apps with Flutter, one codebase for both iOS and Android.
✅ Scalable, headless architecture for growth.
Ready to Build Your Custom Odoo Frontend?
Want to add a modern frontend to your #Odoo ERP and create amazing user interfaces, try Next.js or Flutter today. Need help? Talk to an Odoo developer to integrate!
By following this you can use Odoo’s backend and deliver amazing user experience on web and mobile. Happy coding!