Jamstack, et puis quoi encore !
Tags: french, jamstack, nextjs, markdown
Published: 2021-09-13 01:43:05

## [Jamstack](https://jamstack.org)
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)](https://jamstack.org/what-is-jamstack/)

### [A (API)](https://jamstack.org/glossary/api/)

### [M (Markup)](https://jamstack.org/glossary/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](https://fr.wikipedia.org/wiki/Markdown).

* [Créé une application Next.js](#cree-une-application-nextjs)
* [Ajouter webpack pour Markdown](#ajouter-webpack-pour-markdown)
* [Configurer Next.js pour webpack loader for Markdown](#configurer-Nextjs-pour-webpack-loader-for-markdown)
* [Mettre à jour le script du package](#mettre-a-jour-le-script-du-package)
* [Ajouter du contenu](#ajouter-du-contenu)
* [Ajouter un template](#ajouter-un-template)
* [Démarrer le serveur](#demarrer-le-serveur)

### Créé une application [Next.js](https://jamstack.org/generators/next/) <a name="cree-une-application-nextjs"></a>

```sh
yarn create next-app blogjam
# or
npx create-next-app blogjam
```
Rends-toi à la racine de ton projet

```sh
cd blogjam
```

> :rotating_light: Attention Next.js active par défaut une [télémétrie](https://nextjs.org/telemetry#telemetry) je vous recommande de le désactivé

```sh
npx next telemetry disable
```

### Ajouter webpack pour Markdown <a name="ajouter-webpack-pour-markdown"></a>

```sh
yarn add frontmatter-markdown-loader
# or
npm i -D frontmatter-markdown-loader
```
Si vous ête sur NextJS v11.0.0 ou supérieur, vous devez ajouter aussi [@babel/core](https://www.npmjs.com/package/@babel/core) et [@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react)

```sh
yarn add @babel/core @babel/preset-react
# or
npm i -D @babel/core @babel/preset-react
```
### Configurer Next.js pour webpack loader for Markdown <a name="configurer-Nextjs-pour-webpack-loader-for-markdown"></a>
Éditer le fichier `next.config.js` qui est dans la racine du projet et apporter les modifications suivantes.

```diff
// 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;
+ }
}
```

### Mettre à jour le script du package <a name="mettre-a-jour-le-script-du-package"></a>
Ouvrez le fichier `package.json` ajouté la ligne suivante `"export": "npm run build && next export",` comme indiqué

```json
"scripts": {
+ "export": "npm run build && next export",
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},
```
### Ajouter du contenu <a name="ajouter-du-contenu"></a>
Crée un nouveau dossier `content` dans la racine du projet et crée un fichier Markdown `content/home.md`

```sh
mkdir content
touch content/home.md
```

Ajouter le contenu suivant dans `content/home.md`

```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 !
```

### Ajouter un template <a name="ajouter-un-template"></a>
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

```js
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>
  )
}
```

### Démarrer le serveur <a name="demarrer-le-serveur"></a>
Démarre ton serveur local à la racine de ton projet `cd blogjam`

```sh
yarn dev
# or
npm run dev
```
* Ton blog est accessible à l'adresse [http://localhost:3000](http://localhost:3000)

![Hello Jamstack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyo3tnwese5plef7co1u.png)

Et voilà ton blog marche, je te donne rendez-vous au prochain post [**"Jamstack, et on déploie !"**](https://dev.to/dofbi/jamstack-et-on-deploie-4mhb) pour la suite de cette aventure **"Jamstack, et puis quoi encore !"**

{% user dofbi %}

[![Buy me a coffee](https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=51JrBtX&button_colour=ffad1f&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff)](https://www.buymeacoffee.com/51JrBtX)