Cómo integrar Strapi con Next.js y React Native: Guía paso a paso

Introducción

En la era del desarrollo full-stack moderno, la combinación de Strapi + Next.js + React Native ofrece una solución poderosa para crear aplicaciones web y móviles con un mismo backend centralizado. Esta arquitectura permite:

• Desarrollar interfaces dinámicas y responsivas (Next.js)
• Crear aplicaciones móviles nativas o híbridas (React Native)
• Gestionar todo el contenido desde un CMS headless potente (Strapi)

En este artículo te explicamos cómo integrar Strapi con Next.js (para el desarrollo web) y con React Native (para apps móviles), mostrándote cómo compartir lógica, datos y autenticación entre ambas plataformas usando una única fuente de verdad.

---

¿Por qué usar Strapi con Next.js y React Native?

1. ✅ Arquitectura isomórfica y reutilización de código

Next.js y React Native comparten sintaxis y patrones comunes gracias al uso de React. Esto facilita la reutilización de componentes, hooks y lógica de negocio entre ambas plataformas.

2. 🔄 Backend único con Strapi

Strapi actúa como un backend centralizado que alimenta tanto a tu sitio web como a tu app móvil, evitando duplicados y asegurando consistencia de datos.

3. ⚡ Velocidad de desarrollo

Gracias al panel administrativo de Strapi y al SSR/ISR de Next.js, puedes desarrollar y desplegar rápidamente prototipos funcionales o productos mínimos viables (MVP).

4. 💻 Multiplataforma

Con esta combinación, puedes cubrir tanto el entorno web como el móvil con un mismo stack técnico y reducir costos de mantenimiento.

---

Requisitos previos

Antes de comenzar, asegúrate de tener instalado lo siguiente:

• Node.js (recomendado v18+)
• npm o yarn
• Git
• Expo CLI (si usas React Native)
• Conocimientos básicos de JavaScript, React y REST APIs

---

Estructura del proyecto

Para este ejemplo, vamos a estructurar nuestro proyecto de la siguiente manera:

Cada uno de estos directorios será un proyecto independiente conectado a la misma API de Strapi.

---

Paso 1: Configurar Strapi como backend

Primero, creamos el backend con Strapi que servirá de fuente de datos para ambos proyectos.

Instalación rápida de Strapi

Este comando crea un proyecto con SQLite y levanta el servidor localmente en http://localhost:1337.

Crear modelos personalizados

Supongamos que queremos crear una entidad llamada “Producto” con los siguientes campos:

Campo	Tipo
Nombre	text
Descripción	text area
Precio	number
Imagen	media
En stock	boolean

Usamos el Content Types Builder de Strapi para crear este modelo sin escribir código.

Publicar contenido

Desde el Content Manager , agregamos varios productos que luego consumiremos desde Next.js y React Native.

---

Paso 2: Consumir Strapi desde Next.js

Ahora configuramos una aplicación web con Next.js que consume los productos desde Strapi.

Crear proyecto con Next.js

Instalar Axios para consumo de API

Crear página dinámica de productos

Dentro de pages/products/index.js:

import axios from 'axios';
import Link from 'next/link';

export default function Products({ products }) {
  return (
    <div>
      <h1>Productos</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link href={`/products/${product.id}`}>
              {product.attributes.name} - ${product.attributes.price}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await axios.get('http://localhost:1337/api/products');
  const products = res.data.data;

  return {
    props: { products },
    revalidate: 60,
  };
}

Ventajas de usar ISR (Incremental Static Regeneration)

Al usar getStaticProps, podemos pre-renderizar páginas estáticas y actualizarlas periódicamente sin reconstruir toda la aplicación. Esto mejora el SEO y el rendimiento.

---

Paso 3: Consumir Strapi desde React Native

Ahora configuramos una aplicación móvil con React Native que consume los mismos productos desde Strapi.

Crear proyecto con React Native

Usamos Expo para simplificar el proceso:

npx create-expo-app react-native-app
cd react-native-app
npm start

Instalar dependencias necesarias

npm install axios react-native-paper

Crear pantalla de productos

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import axios from 'axios';

export default function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:1337/api/products')
      .then(res => setProducts(res.data.data))
      .catch(err => console.log(err));
  }, []);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.attributes.name}</Text>
      <Text>${item.attributes.price}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={products}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  item: { marginBottom: 20 }
});

Nota: Si estás probando en un dispositivo físico, asegúrate de que tu computadora y el dispositivo estén en la misma red y usa la IP local de tu máquina (http://192.168.x.x:1337) en lugar de localhost.

---

Paso 4: Compartir lógica entre Next.js y React Native

Una forma efectiva de ahorrar tiempo es crear paquetes compartidos con:

• Hooks personalizados (ej: useProducts)
• Tipos de datos (interfaces TypeScript)
• Servicios de API (ej: apiClient.js)

Ejemplo: Archivo compartido shared/hooks/useProducts.js

js

import axios from 'axios';

export const useProducts = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('http://localhost:1337/api/products')
      .then(res => {
        setProducts(res.data.data);
        setLoading(false);
      });
  }, []);

  return { products, loading };
};

Importas este hook tanto en Next.js como en React Native y mantienes coherencia en la lógica de negocio.

---

Paso 5: Implementar autenticación con Strapi

Strapi tiene un plugin oficial para gestión de usuarios y permisos (@strapi/plugin-users-permissions). Usarlo te permite implementar login/register/logout fácilmente.

Pasos generales:

1. Instalar el plugin:bash1npm install @strapi/plugin-users-permissions
2. Reiniciar Strapi.
3. Configurar roles y permisos desde el panel admin.
4. Exponer endpoints /auth/local para login y registro.

Ejemplo básico en React Native:

const handleLogin = async () => {
  try {
    const res = await axios.post('http://localhost:1337/api/auth/local', {
      identifier: 'user@example.com',
      password: 'password'
    });
    console.log('JWT:', res.data.jwt);
  } catch (err) {
    console.error('Error logging in', err);
  }
};

Guarda el token JWT en AsyncStorage o SecureStore y úsalo en encabezados de autorización para proteger tus rutas.

---

Ventajas de usar Strapi con Next.js y React Native

Ventaja	Descripción
Centralización del backend	Un solo backend para múltiples frontends
Consistencia de datos	Evita discrepancias entre web y móvil
Ahorro de tiempo	Reutiliza lógica, tipos y servicios
Escalabilidad	Fácil de escalar y mantener
Flexibilidad	Adaptable a cualquier tecnología frontend
Personalización completa	Total control sobre diseño y experiencia de usuario
Integración con herramientas CI/CD	Automatiza flujos de desarrollo y deploy

---

Caso práctico: Marketplace multiplataforma

Imagina que estás desarrollando un marketplace donde los usuarios pueden publicar productos y otros comprarlos. La arquitectura podría ser:

• Backend : Strapi (gestiona usuarios, productos, categorías, comentarios, etc.)
• Web : Next.js (sitio principal, catálogo, perfil de usuario)
• Mobile : React Native (app móvil para compradores y vendedores)
• Admin Panel : Strapi Admin UI (para moderación y gestión)

Esta arquitectura permite a tu equipo trabajar paralelamente en cada capa, mientras comparten la misma fuente de datos y reglas de negocio.

---

Consejos avanzados para optimizar tu integración

1. Usa GraphQL si prefieres consultas más específicas
2. Implementa caching con SWR o React Query
3. Optimiza imágenes con Cloudinary o Uploadcare
4. Usa Tailwind CSS en Web y NativeWind en Mobile para reusar diseños
5. Automatiza el build con GitHub Actions o CircleCI

---

Herramientas recomendadas

Herramienta	Uso recomendado
Postman	Probar endpoints de Strapi
Swagger/OpenAPI	Documentar tu API
Apollo Client	Para integración con GraphQL
Zustand / Redux	Manejo global de estado
NativeWind	Estilos reutilizables entre web y móvil
Firebase Auth	Alternativa de autenticación externa

---

Conclusión

La combinación de Strapi + Next.js + React Native no solo representa una arquitectura técnica moderna, sino también una estrategia inteligente para construir productos digitales completos con menos recursos y mayor velocidad. Al aprovechar las capacidades de Strapi como CMS headless y backend API, junto con las ventajas de React en dos de sus entornos más populares, logras un ecosistema flexible, escalable y altamente productivo.

Si estás trabajando en un MVP, un producto digital multiplataforma o simplemente quieres ganar agilidad en el desarrollo, esta combinación tecnológica puede convertirse en tu mejor aliada.