strapi starter next corporate

⛔ déprécié

Ce référentiel n'est plus maintenu et fonctionne uniquement pour Strapi V3. Vous pouvez trouver la dernière version Strapi V4 de ce démarreur sur les entrées et les templates Monorepo.

---

Strapi Starter Next Corporate Site

Prochain démarreur pour créer un site d'entreprise avec Strapi.

Voir la démo en direct • Lisez le billet de blog

Ce démarreur est conçu pour la flexibilité. En utilisant, vous pourrez gérer entièrement le contenu de votre site Web dans Strapi et obtenir une prochaine application générée automatiquement. Les équipes marketing pourront créer des pages et concevoir leur disposition sans l'aide des développeurs.

Ce démarreur présente:

• Pages Création dans Strapi, aucun code nécessaire
• Structure de page entièrement flexible: concevez les pages que vous souhaitez utiliser des sections d'interface utilisateur
• 8 sections d'interface utilisateur hors de la boîte: Hero, RichText, Bigvideo, Témoignages, Prix, Bottomactions, Featorrows, FeatureColumns
• Facile à thème avec le vent arrière
• Génération de sites statique avec Suivant
• Un mode d'aperçu intégré, pour afficher vos pages sur une URL privée avant de les publier
• Contenu en plusieurs langues en utilisant i18n

Ce démarreur utilise le modèle d'entreprise Strapi

Découvrez tous nos entrées ici

Commencer

Utilisez notre CLI create-strapi-starter pour créer votre projet.

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

La CLI créera un monorepo, installera les dépendances et exécutera automatiquement votre projet.

Le prochain serveur Frontend s'exécutera ici => http: // localhost: 3000

Le serveur backend Strapi s'exécutera ici => http: // localhost: 1337

Mode d'aperçu

Vous pouvez activer le mode d'aperçu avec une URL comme ceci:

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

<preview-secret> est le jeton secret défini dans votre configuration .env, <slug> est la limace que vous avez entrée dans Strapi pour votre page.

Bien que le mode d'aperçu soit en cours, vous pouvez accéder à des pages draft comme vous le feriez published des pages.

Par exemple, http: // localhost: 3000 / Secret serait disponible en mode prévisualisation.

Une bannière restera sous la navigation pour vous faire savoir que le mode d'aperçu est activé et vous permettra également de l'éteindre.

Personnalisez votre site d'entreprise

Pour modifier ce site Web, vous devrez exécuter le frontend et le backend dans votre environnement de développement.

Ajout de sections

Nous avons construit des sections pour vous, mais vous voudrez probablement en ajouter plus pour répondre à vos besoins. Suivez ces étapes:

• Créez un nouveau composant dans Strapi dans la catégorie "Sections"
• Dans le constructeur de types de contenu, ouvrez la collection de pages et vérifiez votre nouvelle section sur le champ contentSections .
• Créer un composant React qui prend un accessoire data dans /frontend/components/sections
• Pour lier votre section Strapi à ce composant React, ouvrez /frontend/components/sections.js , et ajoutez une entrée à l'objet sectionComponents .

Thème personnalisé

Nous utilisons CSS à vent arrière pour le style. Pour modifier le look de votre page, vous pouvez modifier le thème dans /front/tailwind.config.js . Lisez les documents de vent arrière pour afficher toutes les modifications que vous pouvez apporter. Par exemple, vous pouvez modifier la couleur principale comme ceci:

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

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

Déploiement à la production

Vous devrez déployer séparément les projets frontend et backend . Voici les documents pour déployer chacun:

• Déployer Strapi
• Déployer Next.js

N'oubliez pas de configurer vos variables d'environnement sur vos applications de production.

Voici ceux requis pour le frontend:

• NEXT_PUBLIC_STRAPI_API_URL : URL de votre backend Strapi, sans traîner la barre oblique
• PREVIEW_SECRET : une chaîne aléatoire utilisée pour protéger vos pages d'aperçu

Et pour le backend:

• FRONTEND_URL : URL de votre frontend, sans track slash
• FRONTEND_PREVIEW_SECRET : Token of Next.js Mode d'aperçu défini sur le frontend

Amusez-vous à utiliser ce démarreur!