Cómo crear una tienda online con panel de administración en Next.js

Al final de esta guía sabrás cómo crear una tienda online con panel de administración, usando Next.js, NestJS y la plantilla de e-commerce de Aniq UI. Tendrás un storefront, un panel de pedidos para tu equipo y una API que guarda el catálogo, los clientes y los pedidos.

Seguimos una tienda de ejemplo desde el primer plan hasta el día del lanzamiento. Cada paso nombra la pantalla o el ajuste que interviene y usa los comandos y las rutas de archivo exactos de la documentación. El mismo camino sirve para un fundador que lanza su tienda o para una agencia que la construye para un cliente.

El planteamiento

Cedar & Cloth es una tienda pequeña que vende camisas de lino y bolsos de lona. La dueña la lleva con dos personas que preparan los pedidos. Esto es lo que necesita la tienda:

• Un catálogo de unos treinta productos, cada uno con tallas y colores, escrito en inglés y en árabe.
• Compra como invitado, para que un visitante nuevo pueda comprar sin crear una cuenta y seguir el pedido después.
• Pago con tarjeta, o contra reembolso para los clientes que lo prefieran.
• Envío gratis a partir de un total de pedido y una tarifa fija por debajo de ese total.
• Un panel de pedidos donde la dueña tiene control total y quienes preparan los envíos solo pueden ver los pedidos.
• Una página de inicio que la dueña pueda reorganizar sin tocar código.
• Fotos de producto limpias sobre fondo liso, hechas a partir de fotos tomadas con el móvil.
• Una forma de ver de dónde llegan los visitantes, con Google Analytics.

Cómo cubre la plantilla el planteamiento

Necesidad	Dónde está	Qué usas
Catálogo bilingüe con variantes	Panel de administración y API	Las pantallas Products y Categories, con variantes de talla y color
Compra como invitado y seguimiento	Storefront	La página de pago y Track Order, que pide el número de pedido y el correo
Tarjeta o contra reembolso	Storefront y API	Stripe para tarjetas, con contra reembolso seleccionado por defecto
Regla de envío	Storefront y API	Un archivo de configuración de envío y el servicio de pedidos, mantenidos de forma coherente
Panel de pedidos y permisos	Panel de administración	Orders, Admin Management y Admin Roles
Página de inicio editable	Panel de administración	La pantalla Home Page, sección por sección
Fotos de producto	Panel de administración	El estudio de IA del formulario de producto y la eliminación de fondo
Analítica de visitantes	Storefront	Los ids de las etiquetas, pegados en el archivo de entorno del storefront

Antes de empezar: decisiones que tomar

Una tienda toca dinero, clientes y obligaciones legales, así que conviene tomar algunas decisiones antes de escribir una sola línea de configuración.

¿Qué vas a vender exactamente?

Cuenta tus productos y, para cada uno, decide qué opciones elige el comprador: talla, color o ninguna. Las variantes llevan su propio SKU, su ajuste de precio y su stock, así que la forma de tu catálogo decide cuántos datos tendrás que introducir. Cedar & Cloth vende camisas en varias tallas y colores y bolsos en una sola talla.

¿En qué idiomas vas a vender?

El inglés y el árabe vienen listos, con un diseño de derecha a izquierda incluido. Los productos y las categorías guardan nombre y descripción en ambos. Un tercer idioma es posible para la interfaz, pero exige editar varios archivos.

¿Cómo pagarán los compradores?

Los compradores pueden pagar con tarjeta (Stripe) o elegir contra reembolso, y PayPal no forma parte del pago. Stripe cobra en dólares estadounidenses. Si vendes en otra moneda, es una decisión que conviene resolver antes del lanzamiento, no después.

¿Y el envío y los impuestos?

La plantilla incluye una sola regla de envío: gratis a partir de un total de pedido y una tarifa fija por debajo. No aplica ningún impuesto. Si tu negocio debe cobrar impuestos, planifícalo en el código o en la forma de poner precio a los productos.

¿Invitados, cuentas o ambos?

Ambos funcionan. Los invitados compran con un correo y siguen los pedidos con el número y el correo. Los clientes con cuenta también tienen direcciones guardadas, historial de pedidos y lista de deseos.

¿Quién se encarga del correo?

La plantilla no envía ninguno: ni confirmaciones, ni avisos de envío, ni restablecimientos de contraseña. Elige pronto un proveedor de correo, porque los clientes esperan al menos una confirmación de pedido.

¿Qué herramientas de IA, si alguna?

Cada una necesita su propia clave, y algunas necesitan el bucket de medios. Decide cuáles merece la pena activar para el lanzamiento. Una tienda que solo necesita fotos de producto limpias puede activar la eliminación de fondo y nada más.

Paso a paso

Paso 1: Elige el paquete

La plantilla tiene cuatro paquetes: Full Stack (storefront, panel de administración y API), solo el Storefront, solo el Admin Dashboard y solo la Backend API. Cada uno de los dos frontends puede funcionar por separado con una tienda de muestra integrada en el navegador. Es útil para una revisión del diseño, pero los pedidos reales, los pagos y las funciones de IA necesitan la API de NestJS.

Cedar & Cloth elige el paquete Full Stack. La licencia comercial cubre proyectos ilimitados, incluidas las tiendas que construyes y entregas a un cliente.

La página My templates muestra un ZIP para cada paquete, así que elige el que compraste.

Qué comprobar: el ZIP de Full Stack se extrae en e-commerce-1, que contiene admin-dashboard, back-end, storefront y docker-compose.yml. Los paquetes de una sola aplicación se extraen en su propia carpeta con un Dockerfile, un package.json y un .env.example.

Paso 2: Ejecútalo en local con Docker

Descarga el ZIP desde My templates, descomprímelo y abre una terminal en la carpeta e-commerce-1. Inicia Docker y ejecuta:

docker compose up --build

Docker construye tres imágenes en la primera ejecución y carga una tienda de demostración en la base de datos, así que espera unos minutos. El storefront se abre en localhost:3030, el panel de administración en localhost:3031 y la API en localhost:8000. Un puerto ocupado se puede cambiar con SITE_PORT, ADMIN_PORT o API_PORT en un archivo .env junto a docker-compose.yml.

Inicia sesión en el panel como Super Admin (admin@example.com, contraseña Admin@123) y en el storefront como cliente de demostración (john.doe@example.com, contraseña password123). Una cuenta de personal de solo lectura, john.smith@admin.com con admin123, muestra lo que ve el rol Viewer. Haz un pedido de prueba como cliente y búscalo después en el panel.

Una nota honesta: en el resumen del panel, varias tarjetas (ingresos, ventas, objetivo, visitantes, conversión y el mapa) muestran cifras de ejemplo hasta que conectes tus propios datos. Comprueba qué tarjetas están conectadas a datos reales antes de fiarte de ellas.

Esta captura muestra una terminal abierta dentro de la carpeta extraída, que es donde debe ejecutarse cada comando.

Fíjate en que la API pase su comprobación de estado, ya que los dos frontends arrancan solo después de que lo haga.

La ruta con Node.js empieza por la API, después de que el seed haya creado la base de datos y la tienda de demostración.

El panel de administración se ejecuta en su propia terminal en el puerto 3031, junto al storefront en el 3030.

La captura de arriba es el resumen del panel que deberías ver después de iniciar sesión como Super Admin.

Qué comprobar: abre localhost:8000/api/health, que debería responder con un estado ok. Después añade un producto al carrito como cliente de demostración, paga como invitado y busca el pedido en el panel.

Qué suele salir mal:

• Docker no está en marcha, o el puerto 3030, 3031 u 8000 está ocupado. Libéralo, o pon SITE_PORT, ADMIN_PORT o API_PORT en un número libre.
• El primer arranque parece atascado. Está cargando la tienda de demostración, y los frontends arrancan solo cuando la API responde bien.
• Aparece un aviso de "Sample data". El frontend se construyó sin una dirección de API y funciona con su propia tienda de muestra.
• Yarn indica la versión 1.22. Ejecuta corepack enable e instala de nuevo.

Paso 3: Conviértelo en Cedar & Cloth

La marca vive en archivos, y el storefront y el panel de administración guardan cada uno su propia copia. En el storefront, src/config/brand.config.ts contiene el nombre de la tienda (viene como un logotipo de texto), el nombre de la pestaña del navegador, los datos de contacto y los enlaces sociales, cada uno con valores en inglés y en árabe. Pon en NEXT_PUBLIC_SITE_URL tu dominio real, porque los enlaces canónicos, el sitemap y las tarjetas para compartir lo usan.

El texto incluido describe una tienda de moda masculina. Tres lugares llevan ese texto: los bloques de texto de brand.config.ts, la carpeta messages/home/ para la página de inicio y messages/seo/ para los títulos de página. Cedar & Cloth también vende moda masculina, así que edita menos que la mayoría de las tiendas.

Cada aplicación guarda sus colores en src/styles/theme-variables.css, como variables CSS, con un bloque para el tema claro y otro para el oscuro. El color de acento es --primaryColor. El storefront carga Plus Jakarta Sans para el texto latino y dos fuentes árabes. El panel de administración tiene su propio archivo de marca y usa la pila de fuentes del sistema.

Qué comprobar: reconstruye y busca el nombre antiguo en la pestaña del navegador, el pie de página, la vista previa al compartir y las páginas en árabe. Sustituye los datos de contacto de ejemplo, porque vienen como marcadores.

Qué suele salir mal: el pie de página no muestra iconos sociales, porque los enlaces vienen vacíos y solo aparecen los rellenados. Otro caso es una imagen para compartir que sigue mostrando la foto principal de la plantilla. Apunta meta.ogImage a tu propia imagen.

Paso 4: Añade categorías y productos

Empieza por las categorías: un nombre y una descripción en ambos idiomas, además de una imagen, un slug, una posición de orden y un interruptor de activado o desactivado. Son de un solo nivel. Después añade los productos. Un producto admite:

• Un nombre y descripciones en ambos idiomas (solo el nombre en inglés es obligatorio), un slug, un SKU y una categoría.
• Un precio, un precio de comparación opcional, un precio de coste y una cantidad en stock.
• Hasta 12 imágenes y vídeos en cualquier orden, uno marcado como principal, cada uno con texto alternativo.
• Variantes como Size con M, o Colour con su código hexadecimal. Cada variante tiene su propio SKU, ajuste de precio y stock.
• Indicadores de activo, destacado y más vendido, y etiquetas libres.

Las subidas van a un bucket de Cloudflare R2, o a otro almacén compatible con S3, y fallan con un 503 hasta que rellenes las cinco variables R2_* de back-end/.env. El catálogo de demostración se muestra desde archivos incluidos, así que puedes construir todo el flujo antes de configurar un bucket.

Trabaja en este orden, para que nada apunte a algo que aún no existe:

1. Crea primero las categorías, porque cada producto necesita una.
2. Añade un producto completo, con fotos, variantes y ambos idiomas, antes de añadir el resto.
3. Ábrelo en el storefront en inglés y en árabe y comprueba la galería, el selector de variantes y el precio.
4. Solo entonces repite con los demás productos.

Mira la lista plana de categorías con su orden y su interruptor de activo: el orden aquí define la fila de categorías de la página de inicio.

La vista compacta muestra más filas en pantalla, lo que ayuda cuando revisas el stock y los precios de muchos productos.

Qué comprobar: los productos eliminados tienen su propia lista, así que comprueba dónde acaba uno después de borrarlo. Los SKU de las variantes deben ser únicos, así que usa un patrón de nombres claro desde el principio.

Qué suele salir mal: las subidas fallan con un 503, porque las variables del bucket no están definidas. O las imágenes se cargan a tamaño completo, porque no se indicó a los frontends el host público de tu bucket. Pon NEXT_PUBLIC_MEDIA_HOSTNAME con ese host, sin https://, y reconstruye.

Paso 5: Organiza la página de inicio

La pantalla Home Page del panel decide, sección por sección, lo que ven los compradores en la portada del storefront. Las categorías solo necesitan un orden. Las demás secciones admiten un número limitado de productos o textos: hasta 3 pilares de estilo, 2 paneles editoriales, 6 novedades, 8 más vendidos, 6 destacados y 5 diapositivas en el carrusel final. Si New drops está vacía, muestra los productos más recientes. Editar una sección exige el permiso products.edit.

Qué comprobar: añade un producto que use todas las secciones, abre después la página de inicio del storefront y confirma que cada sección muestra lo que elegiste. Vacía la sección New drops y confirma que recurre a los productos más recientes.

Qué suele salir mal: un cambio no aparece porque te falta el permiso products.edit, o porque el storefront está en su tienda de muestra y no lee la API.

Paso 6: Configura el envío, los pagos y el flujo de pedidos

El pago ofrece tarjeta con Stripe y contra reembolso. El contra reembolso está seleccionado por defecto, y la API siempre calcula el precio de un pedido a partir de su propio catálogo, nunca con las cifras que envía el navegador. No hay opción de PayPal.

La regla de envío viene como gratis a partir de $75 y $9.99 por debajo, sin impuestos. Está escrita en dos lugares, storefront/src/config/shipping.ts y back-end/src/modules/orders/orders.service.ts. Edita ambos en un mismo cambio, o el carrito y el cobro no coincidirán.

Para aceptar tarjetas, usa primero las claves de prueba de Stripe:

1. Añade STRIPE_SECRET_KEY y STRIPE_WEBHOOK_SECRET a back-end/.env.
2. Pon NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY en el .env del storefront y reconstruye.
3. En el panel de Stripe, crea un endpoint de webhook que apunte a la dirección de tu API más /api/payments/webhook, y haz que escuche dos eventos: payment_intent.succeeded y payment_intent.payment_failed.

Un pedido pagado con tarjeta queda pendiente hasta que Stripe llama a ese webhook, y entonces pasa a pagado y confirmado. Para las pruebas locales, la CLI de Stripe puede reenviar los eventos a http://localhost:8000/api/payments/webhook. En el panel, un pedido avanza un paso cada vez: pending, confirmed, processing, shipped, delivered, o cancelled antes de cerrarse. Añade el número de seguimiento cuando lo envíes y descarga cualquier pedido como archivo CSV.

Qué comprobar: haz un pedido contra reembolso y un pedido con tarjeta usando las claves de prueba de Stripe. El primero debería quedar confirmado y sin pagar. El segundo debería quedar pendiente hasta que llegue el webhook, y luego pagado y confirmado. Haz que una tarjeta falle a propósito y confirma que el pedido queda marcado como fallido.

Qué suele salir mal:

• La opción de tarjeta no aparece en el pago. La clave pública está vacía o no es una clave de prueba o real válida, lo que deja el contra reembolso como única opción.
• Los pedidos con tarjeta siguen pendientes. El endpoint del webhook o su secreto de firma son incorrectos.
• El storefront sigue mostrando la clave pública antigua. Está compilada en el código, así que reconstruye después de cambiarla.

Paso 7: Añade personal y define sus permisos

Las cuentas del personal están en Admin Management y sus permisos en Admin Roles. El seed te da un Super Admin con todos los permisos y un rol Viewer con todos los permisos de lectura, que deja fuera al asistente de IA. Los roles Admin, Manager y Editor existen pero empiezan sin nada, así que marca sus permisos antes de dárselos a nadie.

Cedar & Cloth mantiene a la dueña como Super Admin. A las dos personas que preparan los pedidos les da acceso de lectura a los pedidos, más el permiso de edición que hace falta para avanzar un pedido. Todo lo demás queda oculto para ellas, porque la barra lateral y la API comprueban los mismos nombres de permiso.

Qué comprobar: inicia sesión con la cuenta Viewer y confirma que puede ver las listas pero no modificarlas. Después inicia sesión con el rol de preparación de pedidos que creaste y confirma que avanzar un pedido funciona.

Qué suele salir mal: un nuevo miembro del personal casi no ve nada, porque su rol no tiene permisos marcados. Los cambios de permisos llegan al personal conectado por una conexión en vivo, así que no necesitan cerrar sesión.

Paso 8: Añade las herramientas de IA que quieras

Cada función de IA se activa solo cuando su clave está en back-end/.env, y una clave que aún tiene el valor de ejemplo cuenta como no definida.

• Asistente del panel: necesita una clave de Google Gemini. Responde preguntas sobre la tienda, encuentra pedidos, edita productos y stock, y dibuja gráficos de ventas, siempre dentro de los permisos del administrador que ha iniciado sesión.
• Estudio de producto con IA: está en el formulario de producto. Su modo de asistente necesita una clave de Gemini y el bucket de medios. Su modo Animate necesita una clave y un secreto de Higgsfield.
• Probador virtual: permite a los compradores ver un producto puesto sobre un modelo o sobre su propia foto. Necesita una clave de Gemini y el bucket.
• Eliminación de fondo: necesita un archivo de modelo en tu propio servidor y el bucket, pero ninguna clave, y no cuesta nada por imagen.

Cedar & Cloth activa solo la eliminación de fondo, para que las fotos hechas con el móvil se conviertan en fotos de catálogo limpias. La imagen de Docker deja fuera el modelo salvo que lo pidas al construirla. Los cargos de los proveedores por las funciones con clave corren por tu cuenta.

Qué comprobar: abre la página AI Assistant y pide un resumen de ventas. Confirma que la respuesta llega con un gráfico hecho con tus propios datos. Para la eliminación de fondo, abre una foto de producto y confirma que aparece el botón Remove background.

Qué suele salir mal: una función se declara desactivada. O le falta la clave, o la clave aún tiene el valor de ejemplo, o necesita también el bucket de medios. El estudio, el probador virtual y la eliminación de fondo necesitan el bucket. Recuerda además que el asistente y el estudio no están disponibles en la tienda de muestra.

Paso 9: Conecta la analítica

El storefront integra seis redes de publicidad y analítica. Pega un id en storefront/.env y reconstruye. Un id en blanco no carga ningún script. Las variables son NEXT_PUBLIC_GTM_ID, NEXT_PUBLIC_GA4_MEASUREMENT_ID, NEXT_PUBLIC_META_PIXEL_ID, NEXT_PUBLIC_TIKTOK_PIXEL_ID, NEXT_PUBLIC_SNAPCHAT_PIXEL_ID y NEXT_PUBLIC_PINTEREST_TAG_ID.

Si solo configuras una, que sea Google Tag Manager, que puede cargar las demás por sí mismo. Si GA4 ya funciona dentro de tu contenedor de Tag Manager, deja en blanco la variable de GA4, o cada sesión se contará dos veces. El storefront registra vistas de página, vistas de producto, añadir al carrito, inicio de pago, compra, búsqueda y registro. Pon NEXT_PUBLIC_ANALYTICS_DEBUG=true para registrar cada evento en la consola del navegador mientras pruebas.

Las etiquetas se cargan en cuanto carga una página. Si vendes en la UE o en el Reino Unido, muestra un banner de consentimiento antes de que se ejecuten.

Qué comprobar: activa el registro de depuración, recorre una compra y observa cómo aparecen los eventos en la consola del navegador en orden: vista de producto, añadir al carrito, inicio de pago, compra. Después confirma los mismos eventos en la vista previa de Tag Manager o en tu herramienta de analítica.

Qué suele salir mal: un cambio en un id no tiene efecto, porque los ids se compilan en el código y necesitan una reconstrucción. O el evento de compra se dispara sin la moneda correcta. Define NEXT_PUBLIC_ANALYTICS_CURRENCY si no vendes en dólares estadounidenses.

Paso 10: Sal en vivo

Cubre los huecos que deja la plantilla y despliega:

• No envía ningún correo: ni confirmación de pedido, ni aviso de envío, ni restablecimiento de contraseña. Conecta un proveedor de correo en el hook forgotPassword de back-end/src/modules/customer-auth/customer-auth.controller.ts y para los pedidos.
• Tanto el formulario de contacto como el de suscripción al boletín confirman al visitante pero no entregan nada, y la plantilla no trae páginas de términos ni de privacidad. Conecta los formularios y escribe las páginas.

Después configura la API en back-end/.env: un JWT_SECRET nuevo (generado con node -e "console.log(require('crypto').randomBytes(48).toString('hex'))"), NODE_ENV=production, CORS_ORIGIN con las direcciones del storefront y del panel, y FRONTEND_URL con la dirección del panel. Construye la API, ejecuta yarn db:sync:prod una vez para crear las tablas e iníciala. En cada frontend define NEXT_PUBLIC_API_BASE_URL con /api al final y reconstruye. Define NEXT_PUBLIC_STOREFRONT_URL en el panel para que funcione su enlace Go to storefront.

No uses yarn railway:setup en una tienda real: borra todas las tablas cada vez que se ejecuta. Cambia las contraseñas de demostración publicadas, o empieza con las tablas vacías.

Qué comprobar tras salir en vivo: haz un pedido real pequeño en tu dominio, mira cómo aparece en el panel con una notificación, avánzalo por sus estados y sigue su rastro como invitado con el número de pedido y el correo. Confirma que la campana de notificaciones funciona en vivo, lo que significa que la dirección del panel coincide con FRONTEND_URL.

Qué suele salir mal:

• La API bloquea a los navegadores. CORS_ORIGIN debe incluir ambos frontends exactamente como los muestra el navegador.
• Todo el mundo recibe "Too many attempts" detrás de un proxy. Cada una de esas rutas (inicio de sesión, registro, restablecimiento de contraseña, seguimiento de invitado) acepta diez peticiones por minuto desde una misma dirección. Pon en TRUST_PROXY cuántos proxies hay por delante.
• El restablecimiento de contraseña no llega a ninguna parte. En producción, el token de restablecimiento no se entrega hasta que conectes un proveedor de correo.

El día a día

Cuando la tienda está en marcha, la dueña y quienes preparan los pedidos usan una lista corta de pantallas del panel.

Empezar el día por el resumen

El resumen está arriba en la barra lateral y muestra la tienda de un vistazo. Recuerda que varias tarjetas muestran cifras de ejemplo hasta que conectes números reales, así que mantén una fuente aparte y fiable para los ingresos hasta entonces.

Mira los últimos pedidos y la campana de la barra superior, que es donde aparece primero la actividad nueva.

Hacer avanzar los pedidos

Filtra la lista por estado del pedido o por estado del pago; los pedidos más recientes van primero. Abre un pedido, revisa los artículos, los totales y las direcciones, añade el número de seguimiento cuando se envíe y hazlo avanzar un paso. Cancela solo antes de que el pedido esté cerrado. El estado del pago lo fija el pago, nunca se cambia a mano.

El progreso de preparación de cada fila muestra hasta dónde ha avanzado un pedido, de modo que quienes preparan los envíos pueden localizar lo que sigue esperando.

Ayudar a un cliente

La pantalla de clientes lista los clientes de la tienda, y los eliminados tienen su propia lista. Un cliente que no puede seguir un pedido necesita el número de pedido exacto y el correo usado al pagar, porque el seguimiento pide ambos.

Usa esta lista para encontrar a un cliente por su cuenta y abrir su ficha cuando te escriba.

Mantener fresco el storefront

Reorganiza las secciones de la página de inicio cuando lances un producto nuevo, añadas una oferta o quieras dar más protagonismo a un más vendido. Esas ediciones se hacen en el panel, así que no requieren cambios de código.

Los ajustes son valores guardados

La pestaña App settings contiene pares de clave y valor, incluidos los de pago, correo y generales. El storefront y la API incluidos aún no los leen, así que cambiar uno no cambia nada hasta que lo haga tu propio código.

Un plan de lanzamiento de ejemplo, semana a semana

Este calendario es un ejemplo para Cedar & Cloth, no una promesa sobre lo que tardará tu lanzamiento.

• Semana 1, entender. Ejecuta el stack, haz un pedido de prueba y cierra la lista de decisiones.
• Semana 2, marca y catálogo. Cambia la marca de ambas aplicaciones, reescribe los textos incluidos y añade categorías y un producto completo.
• Semana 3, el resto de la tienda. Añade los demás productos, organiza la página de inicio y configura el almacenamiento en bucket y las fotos.
• Semana 4, dinero y personal. Define la regla de envío, conecta Stripe en modo de prueba, crea los roles para quienes preparan los pedidos y haz pasar pedidos por todos los estados.
• Semana 5, producción. Configura el alojamiento, los archivos de entorno y las tablas. Conecta un proveedor de correo, añade las etiquetas de seguimiento y escribe las páginas de términos y privacidad que faltan.
• Semana 6, lanzamiento suave. Empieza con un público reducido y pasa a las claves en vivo de Stripe cuando estés seguro.

Checklist de lanzamiento

• Nombre de la tienda, logotipos, iconos, colores y fuentes sustituidos en ambas aplicaciones.
• Textos de moda masculina incluidos reescritos en el archivo de marca, los mensajes de inicio y los mensajes de SEO.
• Datos de contacto, enlaces sociales e imágenes para compartir sustituidos.
• Categorías y productos completos en ambos idiomas, con variantes y fotos.
• Regla de envío cambiada en ambos archivos, si la cambiaste.
• Claves en vivo de Stripe y webhook en vivo configurados, tras una prueba completa en modo de prueba.
• Roles marcados para cada miembro del personal y contraseñas de demostración cambiadas.
• JWT_SECRET, CORS_ORIGIN, FRONTEND_URL y las dos direcciones de API de los frontends definidos para producción.
• NEXT_PUBLIC_SITE_URL definido con el dominio real.
• Un proveedor de correo conectado, y el formulario de contacto y el del boletín conectados.
• Páginas de términos y privacidad escritas.
• Ids de seguimiento pegados y un banner de consentimiento añadido si vendes en la UE o el Reino Unido.
• Rellenado automático del pago de demostración desactivado.
• Copias de seguridad programadas para la base de datos y el bucket de medios.

Plantilla, desde cero o un creador de tiendas alojado

Un creador de tiendas alojado

Puedes empezar a vender enseguida, con alojamiento, pago y actualizaciones resueltos por la plataforma. Pagas cuotas continuas, trabajas dentro del diseño y las reglas de la plataforma y tus datos quedan en su sistema. Encaja con una tienda que quiere vender, no gestionar software.

Construir desde cero

Obtienes exactamente lo que diseñes. También tienes que construir un catálogo con variantes, carritos, compra como invitado, seguimiento de pedidos, pagos y webhooks, cuentas para clientes y personal, permisos, un panel de administración, dos idiomas y una API antes del primer pedido. Y lo mantienes todo tú.

Partir de una plantilla

Eres dueño del código, alojas el stack y puedes cambiar lo que quieras. El storefront, el panel y la API ya están conectados, así que dedicas tu tiempo a los productos y la marca. A cambio aceptas el trabajo que enumera esta guía: correo, reglas de impuestos, páginas de términos, alojamiento y actualizaciones. Encaja con fundadores que quieren control y con agencias que construyen tiendas para clientes.

Cuánto cuesta mantenerlo

Los paquetes de la plantilla empiezan desde $79, y el paquete Full Stack que usa Cedar & Cloth cuesta $179. Incluye una licencia comercial y soporte de por vida. Aparte de eso, pagas por lo que actives:

• Alojamiento para el storefront, el panel y la API, y una base de datos si pasas de SQLite.
• Las comisiones de procesamiento de Stripe, que figuran en la página de precios de Stripe. El contra reembolso no necesita procesador de pagos.
• Un bucket como Cloudflare R2 para las imágenes de producto.
• Una clave de Google Gemini para el asistente, el estudio o el probador virtual, facturada por Google, y una cuenta de Higgsfield para el vídeo.
• Un proveedor de correo y un dominio.

Partes gratuitas: SQLite para el trabajo local, la tienda de demostración, el contra reembolso y la eliminación de fondo en tu propio servidor.

Qué personalizar a continuación

• Textos y fotos. Sustituye los mensajes de la página de inicio y los títulos de página en ambos idiomas.
• Reglas de envío. Cambia el umbral de envío gratis o la tarifa en los dos archivos a la vez.
• Otra red de seguimiento. Las etiquetas de marketing se configuran en src/config/analytics.config.ts, y la plantilla describe añadir una más como una tarea de un solo archivo.
• Tarjetas del resumen del panel. Conecta las tarjetas de ingresos y conversión de ejemplo a tus propios números.
• Roles. Crea un rol para cada persona del equipo.
• Un tercer idioma. Añádelo a ambos frontends y a la API. Los productos guardan dos idiomas, inglés y árabe.

Errores comunes

Pedidos con tarjeta que siguen pendientes

Un pedido pasa a pagado solo después de que el webhook de Stripe llegue a tu API; que el comprador vuelva al sitio no lo consigue. Revisa la dirección del endpoint, los dos eventos suscritos y el secreto de firma.

Cambiar la regla de envío en un solo lugar

El carrito, el resumen del pago y la API deben coincidir. Edita la configuración del storefront y el servicio de pedidos en el mismo cambio.

Dejar los frontends en la tienda de muestra

Sin NEXT_PUBLIC_API_BASE_URL, cada frontend responde con datos de muestra en el navegador, muestra un aviso y no cobra a nadie. Define la dirección y reconstruye.

Contar dos veces cada sesión de GA4

Si GA4 se carga desde Tag Manager, deja vacía la variable de GA4 de la plantilla.

Entregar un rol vacío

Admin, Manager y Editor empiezan sin permisos. Un miembro del personal con uno de ellos casi no ve nada hasta que marques lo que necesita.

Preguntas frecuentes

¿Cómo creo una tienda online con panel de administración en Next.js?

Usa una plantilla que ya tenga el storefront, el panel y la API en un solo proyecto, y cambia la marca y el catálogo. Esta te da los tres, con un seeder que llena la base de datos con una tienda de demostración con un solo comando.

¿Puedo usarla para clientes?

Sí. La licencia cubre proyectos ilimitados, incluidas las tiendas construidas para un cliente y entregadas. No puedes revender el código ni publicarlo como plantilla.

¿Admite árabe y RTL?

Sí. El storefront, el panel y la API vienen en inglés y árabe, con el árabe dispuesto de derecha a izquierda. Los productos y las categorías se guardan con ambos idiomas.

¿Necesito un backend?

Para pedidos reales, sí. Los frontends funcionan solos con una tienda de muestra, pero los pedidos reales, los pagos y las funciones de IA dependen de la API de NestJS, que viene con los paquetes Full Stack y Backend API.

¿Admite compra como invitado?

Sí. Los invitados compran con un correo y siguen el pedido con el número y el correo, sin cuenta.

¿Qué métodos de pago funcionan?

Los pagos con tarjeta funcionan con Stripe, y los compradores también pueden elegir contra reembolso. PayPal no se ofrece en el pago.

¿Qué base de datos usa?

SQLite para el trabajo local y MySQL por configuración, sin cambios de código.

¿Gestiona los impuestos?

No. La regla de envío y el total del pago no aplican impuestos. Si tu negocio debe cobrarlos, añádelos a la lógica de precios tanto del storefront como de la API para que los totales sigan siendo iguales.

¿Pueden los clientes pagar en otras monedas?

Los pagos con tarjeta se cobran en dólares estadounidenses. Vender en otra moneda implica cambiarlo en el código, y la moneda del seguimiento es un ajuste aparte.

¿Qué pasa cuando se rechaza una tarjeta?

El pedido se marca como fallido cuando Stripe informa del pago fallido. El contra reembolso sigue disponible para ese cliente.

Pruébalo tú mismo

Abre la demostración del storefront y la demostración del panel de administración. Después lee la documentación o visita la página de la plantilla de e-commerce. Encontrarás más opciones en la categoría de plantillas de e-commerce y en la guía de plantillas de e-commerce de Next.js.

La plantilla de e-commerce es también una de las diez plantillas del Next.js Templates Bundle.