strapi starter next corporate

⛔ Deprecido

Este repositorio ya no se mantiene y solo funciona para Strapi V3. Puede encontrar la última versión Strapi V4 de este inicio en el monorepo de arrancadores y placeres.

---

Strapi Starter Next Corporate Sitio

Siguiente iniciador para crear un sitio corporativo con Strapi.

Ver la demostración en vivo • Lea la publicación del blog

Este arrancador está diseñado para la flexibilidad. Usándolo, podrá administrar el contenido de su sitio web por completo en Strapi y obtener una próxima aplicación generada automáticamente. Los equipos de marketing podrán crear páginas y diseñar su diseño sin la ayuda de los desarrolladores.

Este arranque caracteriza:

• Creación de páginas dentro de strapi, no se necesita código
• Estructura de página totalmente flexible: Diseñe las páginas que desea usar secciones de interfaz de usuario
• 8 secciones de UI fuera de la caja: héroe, richtext, granvideo, testimonios, precios, fondo, largometrajes, largometraje
• Fácil de tema con el viento de cola
• Generación de sitios estático con el siguiente
• Un modo de vista previa integrada, para ver sus páginas en una URL privada antes de publicarlas
• Contenido en varios idiomas usando i18n

Este arrancador usa la plantilla corporativa Strapi

Mira todos nuestros entrantes aquí

Empezando

Use nuestra CLI create-strapi-starter para crear su proyecto.

npx create-strapi-starter@3 my-site next-corporate

La CLI creará un monorepo, instalará dependencias y ejecutará su proyecto automáticamente.

El próximo servidor frontend se ejecutará aquí => http: // localhost: 3000

El servidor de backend strapi se ejecutará aquí => http: // localhost: 1337

Modo de vista previa

Puede activar el modo de vista previa con una URL como esta:

http://localhost:3000/api/preview?secret=<preview-secret>&slug=<slug>

<preview-secret> es el token secreto definido en su configuración .env, <slug> es la babosa que ingresó en Strapi para su página.

Mientras que el modo de vista previa está encendida, puede acceder a las páginas draft como lo haría con las páginas published .

Por ejemplo, http: // localhost: 3000/secreto estaría disponible en modo de vista previa.

Un banner permanecerá bajo la navegación para hacerle saber que el modo de vista previa está encendida y también le permitirá apagarlo.

Personalizar su sitio corporativo

Para editar este sitio web, deberá ejecutar tanto el frontend como el backend en su entorno de desarrollo.

Agregar secciones

Hemos construido secciones para usted, pero es probable que desee agregar más para satisfacer sus necesidades. Sigue estos pasos:

• Cree un nuevo componente en Strapi en la categoría "Secciones"
• En el Content-Types Builder, abra la colección de páginas y consulte su nueva sección en el campo contentSections .
• Cree un componente React que tome un accesorio data en /frontend/components/sections
• Para vincular su sección Strapi a este componente React, abrir /frontend/components/sections.js , y agregue una entrada al objeto sectionComponents .

Tema personalizado

Usamos CSS de viento de cola para el estilo. Para modificar el aspecto de su página, puede editar el tema en /front/tailwind.config.js . Lea los documentos de Vwind para ver todos los cambios que puede hacer. Por ejemplo, puede cambiar el color principal como este:

 const { colors } = require ( `tailwindcss/defaultTheme` )

module . exports = {
  theme : {
    extend : {
      colors : {
        primary : colors . green ,
      } ,
    } ,
  } ,
} 

Desplegando a la producción

Deberá implementar los proyectos frontend y backend por separado. Aquí están los documentos para implementar cada uno:

• Implementar una stapi
• Implementar next.js

No olvide configurar sus variables de entorno en sus aplicaciones de producción.

Aquí están los requeridos para la frontend:

• NEXT_PUBLIC_STRAPI_API_URL : URL de su backend strapi, sin desarrayarse
• PREVIEW_SECRET : una cadena aleatoria utilizada para proteger sus páginas de vista previa

Y para el backend:

• FRONTEND_URL : URL de su frontend, sin arrastrar la barra
• FRONTEND_PREVIEW_SECRET : token de next.js Modo de vista previa definida en frontend

¡Diviértete usando este iniciador!