Qu'est-ce que ButterCMS
ButterCMS est un CMS sans tête basé sur le cloud, basé sur l'API, qui vous permet de créer rapidement des applications et des sites Web alimentés par CMS. Il dispose d'un tableau de bord facile à utiliser pour créer et gérer du contenu. Il est livré avec un moteur de blog prédéfini, basé sur l'API et optimisé pour le référencement, qui vous permet de créer et d'intégrer rapidement un système de blog fonctionnel pour les sites Web ou les applications. Il s'intègre de manière transparente dans les applications nouvelles et existantes et est l'un des meilleurs CMS sans tête disponibles sur le marché.
Prérequis du didacticiel
Vous trouverez ci-dessous les principales exigences à suivre avec ce didacticiel :
- Connaissances de base de Next.js
- Un éditeur de code tel que Sublime ou Visual Studio Code
- Tous les produits - Cookiestruct
- A BeurreCMS compte d'essai.
Configuration de l'environnement de développement
Avant de commencer, ouvrez un terminal et accédez à l'endroit où vous souhaitez créer/stocker et exécutez cette commande ci-dessous pour exécuter create-next-app pour démarrer le projet.
$ npx create-next-app my-blog
Ensuite, une invite s'affichera, vous demandant de confirmer certaines dépendances supplémentaires. Après cela, la commande ci-dessus créera automatiquement une structure de dossiers pour notre projet.
L'étape suivante consiste à configurer ButterCMS dans notre projet Next.js avec le SDK ButterCMS à l'aide de la commande suivante :
$ npm install butter --save
# OR
$ yarn add buttercms
Après cela, créez un compte Butter. Cliquez ici lien pour créer votre compte. Ensuite, pour connecter ButterCMS à votre application, vous devrez enregistrer la clé READ API Token en tant que variable d'environnement. Créez un fichier .env à la racine de votre répertoire de projet et ajoutez votre jeton d'API ButterCMS en tant que variable d'environnement :
NEXT_PUBLIC_API_KEY=YOUR_API_KEY
Vous pouvez obtenir votre LIRE L'API Jeton de votre tableau de bord des paramètres.
Configurer ButterCMS
Après avoir créé un compte ButterCMS, connectez-vous à votre tableau de bord sur le BeurreCMS site Internet. L'une des fonctionnalités les plus impressionnantes de ButterCMS est qu'il est livré avec un moteur de blog pré-construit qui s'intègre facilement à vos sites Web ou applications à l'aide d'une API bien structurée. Le moteur de blog a une configuration de contenu intuitive conçue pour créer des articles de blog, donc aucune configuration n'est requise de votre côté ; c'est une approche plug-and-play. Pour configurer un blog, accédez à votre tableau de bord et cliquez sur les articles de blog dans la barre latérale gauche :
Une fois la nouvelle page ouverte, cliquez sur le Nouveau message dans le coin supérieur droit du tableau de bord et ajoutez les informations de votre article de blog sur la page qui s'ouvre.
Le moteur de blog ButterCMS est livré avec un WYSIWYG éditeur qui vous permet de créer facilement du contenu pour votre site de blog. Il dispose de plusieurs fonctionnalités qui vous permettent d'insérer des fichiers multimédias tels que des vidéos et des images, fournit un éditeur de texte facile à utiliser et comprend une section pour configurer toutes les métadonnées de votre blog.
Sur la page d'édition de blog, entrez le titre de votre article de blog, ajoutez du contenu à l'aide de l'éditeur de texte et incluez une image de couverture, des informations sur l'auteur, des balises pertinentes et des données SEO importantes.
Dans l'image ci-dessus, le moteur de blog comprend une section qui vous permet d'ajouter des catégories et des balises, le résumé du blog et une section pour le référencement du blog. Vous pouvez suivre les étapes ci-dessus pour ajouter d'autres articles de blog. Après avoir inséré tous les détails de votre blog, cliquez sur le Publier bouton dans le coin supérieur droit de votre tableau de bord pour publier votre publication.
Intégration et rendu des données à partir de l'API ButterCMS
N'oubliez pas que pour connecter votre ButterCMS à votre application, vous devez enregistrer votre Lire l'API key comme variable d'environnement. Une fois que vous avez terminé de préparer votre contenu dans ButterCMS, ouvrez votre éditeur de code et créez un dossier de composants dans le src dossier de votre projet Next, puis créez un Pied de page composant et Disposition composant.
Ouvrez le composant Footer.js et ajoutez le code suivant :
const Footer = () => { return ( <> <hr/> <div className="footer-container"> <p> (c) {new Date().getFullYear()} David Adeneye </p> <div className="social_icons"> <a href="https://twitter.com/davidadeneye" aria-label="Twitter" target="_blank" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/daacode" aria-label="GitHub" target="_blank" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/david-adeneye-490027188/" aria-label="LinkedIn" target="_blank" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </> ) } export default Footer;
Consultez notre guide pratique et pratique pour apprendre Git, avec les meilleures pratiques, les normes acceptées par l'industrie et la feuille de triche incluse. Arrêtez de googler les commandes Git et en fait apprendre il!
Le code ci-dessus ajoutera la section de pied de page de la page, qui sera affichée sur toutes les pages du blog.
Dans cet article, nous utiliserons les icônes Font Awesome. Pour utiliser Font Awesome, vous pouvez soit l'installer dans votre projet, soit utiliser son CDN. Vous pouvez ajouter le lien CDN à votre _document.js
fichier comme celui-ci:
import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( <Html lang="en"> <Head> <meta charSet="utf-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossOrigin="anonymous" referrerPolicy="no-referrer" /> </Head> <body> <Main /> <NextScript /> </body> </Html> )
}
Créez ensuite le composant Layout et ajoutez le composant Footer à votre page en y enveloppant le contenu de votre page. Par conséquent, le composant Layout acceptera les enfants comme accessoires, vous permettant d'accéder au contenu de vos pages Next.js.
Ouvrez le Mise en page.js composant et ajoutez le code suivant ci-dessous :
import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;
Vous pouvez désormais intégrer le composant Mise en page dans vos pages en enveloppant le contenu de la page.
Ouvert _app.js
fichier pour ajouter le code suivant :
import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}
Ouvrez ensuite votre index.js fichier et ajoutez le code suivant :
import React, { useEffect, useState } from "react"; import Link from "next/link"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Blog({ posts }) { console.log(posts); return ( <> <div className="nav-container"> <div className="logo"> <Link href="/"> David Adeneye </Link> </div> <Link href="#" className="blog-menu"> My Blog </Link> <a href="" className="cta-btn">Subscribe</a> </div> <div className="blogpost-container"> {posts.data.map((post, index) => ( <div className="blogpost-box" key={index}> <div className="blogpost-img"> <img src={post.featured_image} alt="Blog" width={300} height={300}/> </div> <div className="blogpost-text"> <span className="blogpost-tag">{post.tags[0].name}</span> <a href={`/posts/${post.slug}`} className="blogpost-title">{post.title}</a> <p>{post.summary}</p> </div> <div className="blogpost-footer"> <div> <img src={post.author.profile_image} alt="avatar" /> <p className="blogpost-name">{ post.author.first_name + " " + post.author.last_name }</p> </div> <Link href={`/posts/${post.slug}`} className="blogpost-link"> Read More </Link> </div> </div> ))} </div> </> );
} export async function getStaticProps() { const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() return { props: { posts, }, } }
Le code ci-dessus récupère les données de publication de l'API ButterCMS et les affiche sur la page.
Ensuite, nous devons créer une page de blog individuelle vers laquelle chaque article de blog est lié à l'aide d'itinéraires dynamiques. Next.js vous permet de générer des pages avec des chemins qui dépendent de données externes. Pour créer des itinéraires dynamiques pour les articles de blog, créez un dossier nommé des postes à l'intérieur de l' source/pages dossier. Dans le dossier actuel, créez un nouveau fichier nommé [identifiant].js et ajoutez le code suivant:
import React, { useEffect, useState } from "react"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Post({ post }) { console.log(post.data.title) return( <> <div className="blog-container"> <span className="blog-goBack"><a href="/fr/blog">Go back</a></span> <div className="blog-wrap"> <header> <p className="blog-date">Published {post.data.created}</p> <h1>{post.data.title}</h1> <div className="blog-tag"> <div></div> </div> </header> <img src={post.data.featured_image} alt="cover" /> <div className="blog-content" dangerouslySetInnerHTML={{__html: post.data.body }}></div> </div> </div> </> )
} // This function gets called at build time
export async function getStaticPaths() { // Call an external API endpoint to get posts const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.data.map((post) => ({ params: { id: post.slug }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } // This also gets called at build time
export async function getStaticProps({ params }) { // params contains the post `id`. // If the route is like /posts/1, then params.id is 1 const res = await fetch(`https://api.buttercms.com/v2/posts/${params.id}?auth_token=${read_token}`) const post = await res.json() // Pass post data to the page via props return { props: { post } } }
Dans le code ci-dessus, chaque page sera générée en fonction du identifiant des paramètres : post.slug.
Remarque : n'oubliez pas de copier le fichier style/global.css du Github repo et ajoutez-le dans votre propre fichier de projet si vous suivez le didacticiel.
Exécutez ensuite la commande ci-dessous pour lancer votre application en mode dev :
Votre page de blog ressemblera à ceci :
Et chaque page de publication de blog ressemblera à ceci :
Vous pouvez obtenir la base de code pour ce tutoriel ici sur Github.
Conclusion
Dans cet article, nous avons expliqué comment échafauder facilement un site Web de blog ou intégrer un moteur de blog dans votre site Web à l'aide de Next.js et du moteur de blog ButterCMS. ButterCMS est un excellent CMS sans tête pour créer des blogs ; cela vous évitera des maux de tête et du temps pour créer un blog manuellement. Vous pouvez facilement créer un blog avec n'importe quel langage de programmation ou pile de framework de votre choix avec ButterCMS.
Pour en savoir plus sur ButterCMS, vous pouvez consulter le ButterCMS Documentation.
- Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
- PlatoData.Network Ai générative verticale. Autonomisez-vous. Accéder ici.
- PlatoAiStream. Intelligence Web3. Connaissance Amplifiée. Accéder ici.
- PlatonESG. Automobile / VE, Carbone, Technologie propre, Énergie, Environnement, Solaire, La gestion des déchets. Accéder ici.
- Décalages de bloc. Modernisation de la propriété des compensations environnementales. Accéder ici.
- La source: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/
- :possède
- :est
- :où
- ][p
- $UP
- 1
- 12
- 20
- 7
- 8
- a
- A Propos
- au dessus de
- Accepter
- accès
- Compte
- actually
- ajouter
- Supplémentaire
- Après
- Tous
- Permettre
- permet
- le long de
- aussi
- an
- et les
- Témoignages
- tous
- api
- appli
- Application
- applications
- une approche
- applications
- SONT
- article
- AS
- At
- auteur
- automatiquement
- disponibles
- Avatar
- attendre
- basé
- bash
- BE
- ci-dessous
- LES MEILLEURS
- Blog
- Blogue
- blogue
- bénéficie d'
- corps
- Bootstrap
- frontière
- construire
- Développement
- bouton (dans la fenêtre de contrôle qui apparaît maintenant)
- by
- Appelez-nous
- appelé
- CAN
- Peut obtenir
- catégories
- vérifier
- Enfants
- le choix
- cliquez
- CloudFlare
- Cms
- code
- Base de code
- vient
- composant
- composants électriques
- conclusion
- Confirmer
- NOUS CONTACTER
- Console
- contient
- contenu
- contenu
- Coin
- couverture
- engendrent
- La création
- CSS
- Courant
- tableau de bord
- données
- David
- Réglage par défaut
- un
- détails
- dev
- Développement
- Commande
- dans
- affiche
- Don
- fait
- Dynamic
- chacun
- même
- facile à utiliser
- éditeur
- non plus
- permettre
- permet
- fin
- Endpoint
- Moteur
- Entrer
- Environment
- exécuter
- existant
- Exporter
- externe
- non
- Fonctionnalités:
- Déposez votre dernière attestation
- Fichiers
- Focus
- suivre
- Abonnement
- Pour
- Framework
- De
- fonction
- fonctionnel
- générer
- généré
- obtenez
- Git
- GitHub
- Go
- l'
- guide
- hands-on
- Vous avez
- front
- ici
- flotter
- Comment
- How To
- HTML
- HTTPS
- icônes
- ID
- if
- image
- satellite
- important
- impressionnant
- in
- comprendre
- inclus
- inclut
- indice
- individuel
- d'information
- à l'intérieur
- installer
- intégrer
- Intègre
- développement
- intuitif
- IT
- SES
- ACTIVITES
- spécialisées
- langue
- lancer
- Disposition
- APPRENTISSAGE
- apprentissage
- à gauche
- LG
- comme
- LINK
- Gauche
- ll
- enregistrer
- logo
- Style
- ressembler
- Entrée
- Fabrication
- les gérer
- manuellement
- veux dire
- Médias
- Métadonnées
- m.
- Mode
- PLUS
- (en fait, presque toutes)
- must
- my
- Nommé
- NAVIGUER
- Besoin
- Nouveauté
- next
- Next.js
- aucune
- of
- on
- ONE
- uniquement
- ouvert
- ouvre
- or
- Autre
- nos
- ande
- propre
- page
- pages
- pass
- Platon
- Intelligence des données Platon
- PlatonDonnées
- Post
- Poteaux
- Méthode
- en train de préparer
- processus
- Programmation
- Projet
- fournit
- publier
- publié
- vite.
- rapidement
- RE
- Réagir
- Lire
- pertinent
- rendu
- conditions
- Exigences
- résultat
- retourner
- Bagues
- racine
- Itinéraire
- routes
- Courir
- s
- Épargnez
- Sdk
- de façon transparente
- Section
- seo
- set
- installation
- plusieurs
- Shadow
- feuille
- devrait
- site
- So
- quelques
- envergure
- empiler
- Stackabuse
- Normes
- j'ai commencé
- étapes
- Étapes
- Arrêter
- structure
- studio
- tel
- RÉSUMÉ
- combustion propre
- terminal
- qui
- Le
- Les
- puis
- Là.
- Ces
- this
- Avec
- fiable
- Titre
- à
- jeton
- transition
- procès
- tutoriel
- utilisé
- en utilisant
- via
- Vidéos
- marcha
- souhaitez
- we
- Site Web
- sites Internet
- qui
- sera
- comprenant
- dans les
- XML
- Vous n'avez
- Votre
- zéphyrnet