Siguiente Js Commerce: descripción general y pautas

Como desarrolladores, tenemos esta necesidad inquebrantable de seguir lo último en tecnología. Nos impulsa esta sed insaciable de aprender todo, absolutamente todo, sobre cada tecnología grande e innovadora. Anhelamos tener una visión exclusiva del futuro, y este deseo nos mantiene en marcha. Nuestra búsqueda de la última tecnología de comercio electrónico nos llevó a – Next Commerce.

Next Commerce es la última oferta de BigCommerce en colaboración con los equipos de Next.js y Vercel. Con Next Commerce, los desarrolladores de comercio electrónico pueden instalar una aplicación completamente autónoma que se integra con BigCommerce en cuestión de minutos. Es el primer esfuerzo de este tipo de Next y BigCommerce.

El comercio sin cabeza es probablemente el futuro del comercio electrónico. El comercio sin cabeza facilita a los desarrolladores diseñar y desarrollar aplicaciones innovadoras, llegar a un mercado global más amplio y ayudar a que el gráfico de ventas de la tienda de comercio electrónico apunte hacia el norte.

Según un informe sobre el rendimiento del sitio, en una encuesta de 120 ejecutivos de comercio electrónico, el 62% opinaba que el comercio sin cabeza puede mejorar significativamente las tasas de conversión y la participación del cliente.

Estamos encantados de mostrarle lo fácil que es instalar sin esfuerzo y lo increíble que es usar esta última oferta de BigCommerce y Next. Esta guía paso a paso es todo lo que necesita para comenzar con Next Commerce.

Comenzaremos con una descripción general.

Una descripción general de Next Commerce

Next.js es un marco web de código abierto ampliamente utilizado con el que puede crear sus propias aplicaciones, tanto de representación del lado del servidor como de aplicaciones estáticas con React. Actualmente, el marco nos trae Next.js Commerce. Es un kit de desarrollador con el que podemos crear sitios de comercio electrónico atractivos, personalizables y de alto rendimiento. Al ofrecerse junto con una sólida plataforma SaaS abierta como BigCommerce, las posibilidades y el potencial de Next Commerce son inmensos.

¿Por qué el mercado se dirige hacia el comercio electrónico sin cabeza?

Next.js es una poderosa herramienta para construir su sitio de comercio electrónico. Es una arquitectura completa y robusta que se puede escalar, personalizar y configurar para diversas implementaciones de comercio electrónico.

Aunque Next.js extiende una serie de beneficios, estos son algunos de los pocos significativos:

• Representación del servidor

  Los componentes de React se pueden representar en el lado del servidor antes de que el HTML se pueda enviar a los clientes.

• Recarga de código caliente

  Cada vez que Next.js detecta cambios, la página se recarga. Cualquier URL se enruta automáticamente al sistema de archivos. Esto no requiere ninguna habilidad de configuración de su parte. Sin embargo, siempre puedes personalizarlo según tus necesidades.

• Compatibilidad del ecosistema

  Next.js es altamente compatible con React, Node y, por supuesto, JavaScript.

• División automática del código

  Las páginas vienen solo con las bibliotecas y el JavaScript, nada más. En lugar de generar un solo JavaScript que tenga todos los códigos de la aplicación, Next.js en realidad divide la aplicación en varios recursos, lo que facilita todo el proceso.



• Compatibilidad con mecanografiado

  Dado que Next.js está escrito en TypeScript, ofrece soporte completo.

• captación previa

  El componente Link admite un accesorio de búsqueda previa que obtiene automáticamente los recursos de la página, incluso los que escupen código automáticamente.

• Aplicaciones Híbridas

  Es posible hacer uso de SSR y aplicaciones web estáticas en un solo proyecto usando Next.js.

• No se requiere configuración

  Este marco listo para producción es perfecto para los equipos de ingeniería que intentan ofrecer escalabilidad y facilidad de uso a las tiendas de comercio electrónico. Viene con compilación y empaquetado automáticos, compatibilidad con CSS integrada, enrutamiento del sistema de archivos, división automática de código y creación de API.

Información general sobre cómo implementar

Ahora equipado con una comprensión básica de Next Commerce, entremos rápidamente en los detalles más jugosos: la implementación. Comencemos con los requisitos previos. Next.js no es muy pegajoso, por lo que viene con los requisitos mínimos.

requisitos previos

• un IDE
• TypeScript en lugar de JavaScript
• Un conocimiento básico de las API de BigCommerce
• Directorio para /pages y /public. El directorio para /pages tendrá un _app.tsx y el index.tsx
• El directorio para /public tendrá medios que se pueden servir de forma estática.
• Además, las /páginas también tendrán páginas de tiendas de comercio electrónico con sus rutas.
• Cualquier proveedor de Git, ya sea Bitbucket, GitHub o GitLab.
• MNP

Estos son los requisitos básicos para la funcionalidad de Next Commerce. Siempre puede reorganizar el resto de los directorios más adelante.

Paquetes y Configuración

Además de NPM e Yarn, la ejecución de Next Commerce utiliza archivos .env y .config para comenzar.

Para que la aplicación funcione correctamente, deberá utilizar el paquete BigCommerce Storefront Data Hooks. Los ganchos se pueden reutilizar según las necesidades de los componentes. Puede encontrar los componentes en el directorio /components, y estos se representan en páginas. El enlace de los ganchos a los componentes y las páginas necesita grandes cantidades de datos del escaparate. Si no desea gastar una fortuna en costos de desarrollador, puede utilizar fácilmente el paquete BigCommerce Storefront Data Hooks para su beneficio.

Este paquete lo ayuda a acceder a categorías, datos cruciales de clientes, páginas de productos, detalles y mucho más. Una vez que haya instalado correctamente el paquete, puede vincular sus variables .env al par clave-valor apropiado en el escaparate de BigCommerce.

Los archivos .env se almacenan automáticamente en Vercel. Puede extraer fácilmente el archivo .env utilizando el comando "vercel env pull". Ahora puede configurar las claves API de la tienda de BigCommerce y el token de GraphQL mediante el archivo .env.local.

El siguiente paso es la configuración de los archivos .config. tsconfig.json le permite compilar JavaScript para su proyecto y next.config.js es el módulo de nodo. Muchos desarrolladores lo pasan por alto, pero es muy recomendable si está buscando lograr alguna funcionalidad específica.

Ejecutando el Proyecto

Ejecutar el proyecto en el servidor del entorno de desarrollo es bastante sencillo. Todo lo que tienes que hacer es usar el siguiente comando:

desarrollo de hilo o desarrollo de ejecución de npm

Despliegue

Crear Next.js Commerce también es bastante fácil: visite nextjs.org/commerce y haga clic en el botón Clonar e implementar. Al final, debería poder tener su propia aplicación en funcionamiento en Vercel, con el logotipo de su tienda. Una vez que haya implementado, puede personalizar su tienda de acuerdo con sus necesidades.

Tomaremos el proceso de integración paso a paso.

Paso 1:

Una vez que presiona el botón Clonar e implementar, puede comenzar a implementar usando Vercel con un proveedor de Git.

Si tiene una cuenta de Vercel, puede iniciar sesión con sus credenciales.

Si no tiene una cuenta de Vercel, se le pedirá que cree una cuenta utilizando cualquiera de los proveedores de Git de su elección.

Paso 2:

Después de iniciar sesión en la cuenta de Vercel, podrá ver un cuadro de diálogo Clone Git Repository con una lista desplegable. Seleccione su cuenta de Vercel y escriba el nombre de su proyecto en el campo provisto y presione Continuar.

Paso 3:

El siguiente paso es instalar integraciones. Para conectar su tienda BigCommerce a su proyecto Vercel, presione el botón Instalar. Una vez que presione el botón Instalar, debería ver Agregar BigCommerce a su pantalla de Proyecto Vercel.

Paso 4:

Si ya tiene una tienda BigCommerce, simplemente puede iniciar sesión con sus credenciales existentes para integrar Vercel y BigCommerce. Sin embargo, si es nuevo en BigCommerce, haga clic en Registrarse.

La página de registro lo guiará a través de la creación de un espacio aislado para desarrolladores mediante un formulario simple. Ingrese sus datos y acepte todos los términos y condiciones para registrarse. Haga clic en Continuar cuando vea una marca de verificación azul junto a la pestaña de integración de BigCommerce.

Paso 5:

Ahora puede crear el repositorio Git escribiendo el nombre de su repositorio. Haga clic en Continuar.

Paso 6:

Una vez que llegue a la pantalla Importar proyecto, debería poder confirmar la configuración de su proyecto y hacer clic en Implementar. La implementación completa no debería llevar más de unos minutos.

Una vez que se realiza la implementación en Vercel, podrá ver una imagen en miniatura de su sitio implementado.

¡Felicitaciones, su proyecto se ha implementado con éxito!

Reaccionar + Siguiente.js

Puede configurar su tienda de comercio electrónico con Next - Generador de SSR para React y luego implementarlo en Vercel. Con Crystallize y el modelo estándar de Next.js, puede crear fácilmente una tienda de comercio electrónico de desarrollo web Jamstack. Ahora, usaremos Crystallize CLI para desarrollar un nuevo proyecto.

Ingrese el siguiente comando en su terminal.

npx @cristalizar/cli

Con este comando, podrá agregar su plantilla preferida, elegir ir con su propio inquilino o elegir un inquilino de demostración y agregar la API de servicio.

Para implementar en Vercel, necesitará estos requisitos básicos instalados en su computadora.

• CLI de Vercel
• Un proveedor de Git
• Al menos, la versión 10 de Node.js
• Un inquilino al registrarse en Crystallize

Ejecute el proyecto en el servidor de desarrollo usando:

desarrollo de hilo o desarrollo de ejecución de npm

Con esto, puede acceder al sitio de desarrollo, comprender la estructura de la aplicación y editar las páginas según sus requisitos.

Una vez que haya terminado de crear páginas para varias formas de elementos, puede comenzar a implementar en Vercel.

Nuevamente, para implementar su proyecto en Vercel, deberá pasar por la integración de Vercel Github. Sin embargo, también puede implementar manualmente con la misma facilidad. Use la línea de comando para escribir - inicio de sesión de vercel: configure las dos variables de entorno usando el panel de control de Vercel.

La implementación de su proyecto con Vercel necesita un proveedor de Git. Envíe su proyecto al proveedor de Git y casi habrá terminado: se iniciará la implementación.

Terminando

La era del comercio electrónico sin cabeza está aquí. El desarrollo del sitio de comercio electrónico tradicional se centró en ofrecer una experiencia completa con un front-end y un back-end bien integrados. Esto ayudó a las tiendas a lanzar rápidamente sus aplicaciones. Sin embargo, pronto experimentará problemas de rendimiento y, lo que es más importante, no podrá escalar tanto como quisiera. Pero con el comercio electrónico sin cabeza, no tienes que luchar tanto.

Un diseño sin cabeza le da mucha libertad para diseñar su propio front-end desde cero o usar uno preconstruido. Tendrá la capacidad de responder rápidamente a los cambios en el mercado y personalizar las experiencias de los clientes en consecuencia. Lo más importante de todo: puede realizar cambios en su front-end sin alterar su back-end. Ahora sabe por qué, como desarrolladores, estamos seguros de que el futuro del comercio electrónico seguramente no tiene cabeza.