Des outils low-code comme WordPress simplifient le processus de création de blog. Vous pouvez utiliser un thème prédéfini et commencer à écrire des articles de blog en quelques heures. Si vous voulez plus de contrôle sur votre code et que vous avez du temps libre, il est préférable de créer votre blog à partir de zéro. Vous pouvez même utiliser un framework comme Next.js pour simplifier le processus.
Apprenez à créer un blog Next.js simple qui affiche des articles de démarquage.
Création d'un projet Next.js
Next.js est un framework React qui simplifie la façon dont vous créez des applications. Il fournit de nombreux outils et configurations prêts à l'emploi, vous permettant de commencer à écrire du code immédiatement après l'avoir installé.
Le moyen le plus simple de démarrer avec Next.js consiste à exécuter la commande create-next-app dans un terminal :
npx créer-suivant-app markdown-blog
Cette commande crée un projet Next.js contenant tous les fichiers nécessaires pour démarrer.
Tout d'abord, nettoyez index.js fichier ressemble à ceci :
importer Diriger depuis 'suivant/tête'
importer modes depuis '../styles/Accueil.module.css'
exporterdéfautfonctionMaison() {
retour (
<div className={styles.container}>
<Diriger>
<titre>Créer l'application suivante</title>
<méta nom="description" contenu="Généré par créer l'application suivante" />
<lien rel="icône" href="/favicon.ico" />
</Head>
</div>
)
}
Créer des articles de blog Markdown
Le blog rendra fichiers de démarquage stocké localement dans le dossier du projet. Donc, créez un nouveau dossier à la racine appelé contenu pour stocker les fichiers. Dans ce dossier, créez un nouveau fichier appelé créer-lien-actif-nextjs.md et ajoutez ce qui suit :
titre: Comment faire créer un actif liendans Suivantjs
description: Personnalisation des liens actifs à l'aide de useRouter()
est publié: vrai
Date de publication: 2022/07/22
Mots clés:
- suivant
## Contenu principal
Le nom du fichier de démarquage fera partie de l'URL de la publication, alors assurez-vous qu'il est bon. Notez également le contenu entre les tirets. Il s'agit des métadonnées de la publication et s'appelle le front matter.
Analyser les fichiers Markdown
Pour chaque article de blog, vous devez analyser le contenu de démarquage et les abords. Pour Markdown, utilisez react-markdown et pour les données préliminaires, utilisez gray-matter.
React-markdown est un composant React construit sur une remarque qui convertit en toute sécurité le démarquage en HTML. La bibliothèque de matière grise analyse la matière liminaire et convertit YAML en objet.
Exécutez la commande suivante dans le terminal pour installer react-markdown et gray-matter.
npm installer matière grise React-Markdown
Dans un nouveau dossier appelé utils, créez un nouveau fichier appelé md.js. Vous allez créer des fonctions d'assistance qui renvoient le contenu des articles de blog dans ce fichier.
Obtenir tous les messages publiés
Dans md.js, ajoutez le code suivant pour renvoyer tous les articles du dossier de contenu.
importer fs depuis "fs" ;
importer chemin depuis "chemin";
importer matière depuis "matière grise";exporterconstante getPath = (dossier: chaîne) => {
retour path.join (process.cwd(), `/${dossier}`); // Récupère le chemin complet
}exporterconstante getFileContent = (nom de fichier: chaîne, dossier:chaîne) => {
constante POSTS_PATH = getPath (dossier)
return fs.readFileSync (path.join (POSTS_PATH, nom de fichier), "utf8");
};exporterconstante getAllPosts = (dossier: chaîne) => {
constante POSTS_PATH = getPath (dossier)
retour fs
.readdirSync (POSTS_PATH) // récupère les fichiers dans le répertoire
.filter((chemin) => /\\.md?$/.test (chemin)) // uniquement les fichiers .md
.map((nomfichier) => { // mappe sur chaque fichier
constante source = getFileContent (fileName, dossier); // récupérer le contenu du fichier
constante slug = nom_fichier.replace(/\\.md?$/, ""); // récupère le slug du nom de fichier
constante { données } = matière (source); // extrait le frontmatter
retour {
avant-propos: données,
limace: limace,
};
});
};
Dans la fonction getAllPosts() :
- Obtenez le chemin d'accès complet au dossier de contenu à l'aide du module de chemin.
- Obtenez les fichiers dans le dossier de contenu à l'aide de la méthode fs.readdirSync().
- Filtrez les fichiers pour n'inclure que les fichiers avec l'extension .md.
- Récupérez le contenu de chaque fichier, y compris les abords à l'aide de la méthode map.
- Renvoie un tableau contenant les prémisses et le slug (le nom de fichier sans l'extension .md) de chaque fichier.
Pour n'obtenir que les articles publiés, vous pouvez filtrer tous les articles et ne renvoyer que ceux dont la clé isPublished dans l'avant-propos est définie sur true.
exporterconstante getAllPublished = (dossier: chaîne) => {
constante posts = getAllPosts (dossier)constante publié = posts.filter((post) => {
retour post.frontmatter.isPublished vrai
})
retour publié
}
Dans md.js, ajoutez la fonction getSinglePost() pour récupérer le contenu d'un seul article.
exporterconstante getSinglePost = (slug: chaîne, dossier:chaîne) => {
constante source = getFileContent(`${limace}.md`, dossier);
constante { données: frontmatter, content } = matière (source);
retour {
avant-propos,
contenu,
};
};
Cette fonction appelle la fonction getFileContent() pour obtenir le contenu de chaque fichier. Puis à l'aide du package gray-matter, la fonction récupère le front matter et le contenu de démarque.
Afficher tous les articles du blog
Next.js fournit différentes options de rendu, l'une d'entre elles étant la génération statique. La génération statique est un type de pré-rendu où Next.js génère toutes les pages HTML pendant la construction. Vous l'utilisez pour créer des pages statiques rapides.
Vérifiez documentation officielle de Nextjs pour plus d'informations sur le rendu.
Next.js pré-rendra une page au moment de la construction à l'aide des accessoires renvoyés par la fonction getStaticProps. Dans ce cas, les accessoires seront un tableau de messages publiés.
exporterconstante getStaticProps = asynchrone () => {
messages const = getAllPublished("des postes");
retour {
accessoires: { messages },
};
};
Modifiez le fichier index.js pour afficher une liste des articles de blog.
importer Diriger depuis "suivant/tête" ;
importer Lien depuis "suivant/lien" ;
importer { getAllPublished } depuis "../utils/md" ;fonctionMaison({ des postes }) {
retour (
<div className={styles.container}>
<Diriger>
<titre>Créer l'application suivante</title>
<méta nom="description" contenu="Généré par créer l'application suivante" />
<lien rel="icône" href="/favicon.ico" />
</Head>
<div>
{messages.map((message) => (
<clé d'article={post.slug}>
<p>[ {post.frontmatter.tags.join(", ")} ]</p>
`messages/${post.slug}`}>
<un>{post.frontmatter.title}</un>
</Link>{""}
<p>{post.frontmatter.description}</p>
</article>
))}
</div>
</div>
);
}exporterconstante getStaticProps = asynchrone () => {
messages const = getAllPublished("contenu");retour {
accessoires: { messages },
};
};
exporterdéfaut Maison;
Le composant Home utilise les publications renvoyées par getStaticProps. Il les parcourt à l'aide de la fonction de carte et, pour chaque article, affiche un titre, un lien vers l'article complet et une description.
Afficher un article de blog
Comme mentionné, les noms de fichiers des messages seront utilisés comme chemins d'URL. Ces chemins sont également dynamiques, vous devez donc les générer au moment de la construction. Next.js vous permet de le faire en utilisant la fonction getStaticPaths().
Par exemple, dans ce code, les chemins sont générés à partir des noms des fichiers de démarquage.
exporterconstante getStaticPaths = asynchrone () => {
chemins const = getAllPublished("des postes").map(({ limace }) => ({ params: { slug } }) );
retour {
chemins,
se retirer: FAUX,
};
};
Notez que vous utilisez les données de publication renvoyées par la fonction d'assistance getAllPublished() que vous avez créée auparavant.
Vous définissez également fallback sur false, qui renvoie un erreur 404 pour les chemins qui n'existent pas.
getStaticPaths() est généralement utilisé avec getStaticProps() qui récupère le contenu de chaque article en fonction des paramètres.
exporterconstante getStaticProps = asynchrone ({ paramètres }) => {
constante poste = attendre getSinglePost (params.slug, "messages");
retour {
accessoires: { ...poster },
};
};
Pour rendre le démarquage au format HTML, utilisez react-markdown.
importer ReactMarkdown depuis 'react-markdown'
importer { getAllPosts, getSinglePost } depuis "../../utils/md" ;
constante Message = ({ contenu, frontmatter }) => {
retour (
<div>
<p>{frontmatter.tags.join(', ')}</p>
<h2>{frontmatter.title}</h2>
<portée>{frontmatter.publishedDate}</span>
<ReactMarkdown>{contenu}</ReactMarkdown>
</div>
);
};
Ce composant affichera le contenu de chaque article de blog et son URL correspondante.
Si vous créez un blog de développeur, vous pouvez ajouter la coloration syntaxique capacités pour chaque composant.
Styliser le blog Next.js Markdown
Jusqu'à présent, vous avez créé un blog Markdown Next.js qui affiche une liste d'articles de blog et affiche le contenu de cet article. Pour rendre le blog plus agréable, vous devez ajouter des styles CSS.
Next.js a un bon support CSS, et vous pouvez choisir d'utiliser des bibliothèques CSS-in-JS comme des composants stylés. Si vous préférez séparer CSS de JS, vous pouvez utiliser des modules CSS.