TheLazy.Dev
Portfolio GitHub

Blog

french |jamstack |nextjs |markdown

Jamstack, et puis quoi encore !

dofbi

Mamadou Diagne

Posted on September 13, 2021

Jamstack, et puis quoi encore !

Jamstack

Oui, je sais, mais ne sois pas étonné de découvrir un nouveau mot ou une nouvelle façon de faire des sites internet ou applications. Avec la technologie, tout n'est qu'une question de temps.

Hé oui, le temps est venu pour toi de passer au Jamstack !

Pas de panique

3 ingrédients, c'est tout ce qu'il te faut !

J (JavaScript)

A (API)

M (Markup)

Trêve de bavardage, au travail

Nous allons faire notre première recette Jamstack qui sera un Blog sans base de données, juste des fichier texte en format Markdown.

Créé une application Next.js 

yarn create next-app blogjam
# or
npx create-next-app blogjam
Enter fullscreen mode Exit fullscreen mode

Rends-toi à la racine de ton projet

cd blogjam
Enter fullscreen mode Exit fullscreen mode

🚨 Attention Next.js active par défaut une télémétrie je vous recommande de le désactivé

npx next telemetry disable
Enter fullscreen mode Exit fullscreen mode

Ajouter webpack pour Markdown 

yarn add frontmatter-markdown-loader
# or
npm i -D frontmatter-markdown-loader
Enter fullscreen mode Exit fullscreen mode

Si vous ête sur NextJS v11.0.0 ou supérieur, vous devez ajouter aussi @babel/core et @babel/preset-react

yarn add @babel/core @babel/preset-react
# or
npm i -D @babel/core @babel/preset-react
Enter fullscreen mode Exit fullscreen mode

Configurer Next.js pour webpack loader for Markdown

Éditer le fichier next.config.js qui est dans la racine du projet et apporter les modifications suivantes.

// next.config.js
module.exports = {
  reactStrictMode: true,
+ webpack: (cfg) => {
+   cfg.module.rules.push(
+     {
+       test: /\.md$/,
+       loader: 'frontmatter-markdown-loader',
+       options: { mode: ['react-component'] }
+     }
+   )
+   return cfg;
+ }
}
Enter fullscreen mode Exit fullscreen mode

Mettre à jour le script du package

Ouvrez le fichier package.json ajouté la ligne suivante "export": "npm run build && next export", comme indiqué

"scripts": {
+ "export": "npm run build && next export",
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},
Enter fullscreen mode Exit fullscreen mode

Ajouter du contenu

Crée un nouveau dossier content dans la racine du projet et crée un fichier Markdown content/home.md

mkdir content
touch content/home.md
Enter fullscreen mode Exit fullscreen mode

Ajouter le contenu suivant dans content/home.md

---
title: "Hello Jamstack !"
date: 2021-09-17T19:31:20.591Z
ingredients:
  - description: "JavaScript dans le navigateur comme couche exécutable"
    name: JavaScript
  - description: "Des API, réutilisables plutôt que des bases de données spécifiques à l'application"
    name: API
  - description: "Balise pré construit comme mécanisme de livraison"
    name: Markup
---
Bienvenue sur mon formidable Blog sur **Jamstack**, pour bien démarrer, il te suffit de 3 ingrédients, c'est tout ce qu'il te faut !
Enter fullscreen mode Exit fullscreen mode

Ajouter un template

Vous avez votre contenu reste plus cas choisir comment l'afficher, nous allons créer un template en remplaçant le contenue de pages/index.js par

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { attributes, react as HomeContent } from '../content/home.md';

export default function Home() {
  let { title, date, ingredients } = attributes;
  return (
    <div className={styles.container}>
      <Head>
        <title>Hello Jamstack !</title>
        <meta name="description" content="Jamstack, et puis quoi encore !" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          {title}
        </h1>

        <HomeContent />

        <ul>
          {ingredients.map((ingredient, index) => (
            <li key={index}>
              <h2>{ingredient.name}</h2>
              <p>{ingredient.description}</p>
            </li>
          ))}
        </ul>
      </main>

      <footer className={styles.footer}>
        Propulsé par toi, en {new Date(date).getFullYear()}
      </footer>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Démarrer le serveur

Démarre ton serveur local à la racine de ton projet cd blogjam

yarn dev
# or
npm run dev
Enter fullscreen mode Exit fullscreen mode

Hello Jamstack

Et voilà ton blog marche, je te donne rendez-vous au prochain post "Jamstack, et on déploie !" pour la suite de cette aventure "Jamstack, et puis quoi encore !"

dofbi image

Mamadou Diagne

Hi there I'm Mamadou Diagne, Civic hacker living in Dakar, Senegal.

Buy me a coffee

💖 💪 🙅 🚩
dofbi
Mamadou Diagne

Posted on September 13, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Jamstack, et puis quoi encore !
french Jamstack, et puis quoi encore !

September 13, 2021