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
- Ajouter webpack pour Markdown
- Configurer Next.js pour webpack loader for Markdown
- Mettre à jour le script du package
- Ajouter du contenu
- Ajouter un template
- Démarrer le serveur
Créé une application Next.js
yarn create next-app blogjam
# or
npx create-next-app blogjam
Rends-toi à la racine de ton projet
cd blogjam
:rotating_light: Attention Next.js active par défaut une télémétrie je vous recommande de le désactivé
npx next telemetry disable
Ajouter webpack pour Markdown
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 et @babel/preset-react
yarn add @babel/core @babel/preset-react
# or
npm i -D @babel/core @babel/preset-react
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;
+ }
}
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"
},
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
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 !
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>
)
}
Démarrer le serveur
Démarre ton serveur local à la racine de ton projet cd blogjam
yarn dev
# or
npm run dev
- Ton blog est accessible à l'adresse http://localhost:3000
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 !"
