getStaticProps et getStaticPaths sont utilisées pour créer des pages statiques (SSG) dans Next.js.


getStaticProps est utilisée pour récupérer les données nécessaires pour afficher une page avant de la rendre. Elle est déclenchée lors de la construction de l'application et retourne les données qui seront ensuite disponibles pour le composant React de la page. Cette fonction prend en entrée les paramètres de contexte qui sont passés depuis getStaticPaths (comme un id d'article dans un blog) et retourne un objet avec les données qui seront utilisées pour afficher la page.

```
export async function getStaticProps({ params }) {
    // Récupération des données de l'article à partir de son id
    const res = await fetch(`https://my-api.com/articles/${params.id}`);
    const article = await res.json();
  
    // Retourne les données pour le composant de la page
    return { props: { article } };
}

```

getStaticPaths est utilisée pour générer les chemins des pages statiques. Elle est également déclenchée lors de la construction de l'application et retourne un objet contenant deux propriétés: paths et fallback. paths est un tableau qui contient les chemins des pages statiques à générer, tandis que fallback détermine si les pages doivent être générées à l'avance ou si elles doivent être générées en temps réel lors de la demande de la page.

```
export async function getStaticPaths() {
    // Récupération des données des articles de blog depuis une API ou un fichier JSON
    const res = await fetch('https://my-api.com/articles');
    const articles = await res.json();
  
    // Création des chemins pour chaque article
    const paths = articles.map((article) => `/blog/${article.id}`);
  
    // Retourne les chemins et indique que les pages peuvent être générées en temps réel
    return { paths, fallback: true };
}

```
En résumé, getStaticProps est utilisée pour récupérer les données nécessaires pour afficher une page avant de la rendre, tandis que getStaticPaths est utilisée pour générer les chemins des pages statiques. Ces deux fonctions sont utilisées ensemble pour créer des pages statiques dans Next.js qui sont performantes et qui utilisent des données.

Il est important de noter que getStaticProps n'est utilisée que pour les pages qui sont générées à l'avance. Si la propriété fallback de getStaticPaths est définie sur false, alors getStaticProps ne sera pas appelée pour les pages qui ne sont pas générées à l'avance. Cela peut être utilisé pour créer des pages qui ne nécessitent pas de données statiques ou pour des pages qui peuvent être générées en temps réel.

En utilisant ces deux fonctions ensemble, vous pouvez créer des pages performantes qui utilisent des données dynamiques, tout en garantissant que les données sont disponibles avant la rendu de la page. Cela améliore l'expérience utilisateur en évitant les temps de chargement tardifs et les erreurs de données manquantes.

Enfin, il est important de noter que les données retournées par getStaticProps sont stockées en cache et réutilisées pour les demandes ultérieures, ce qui permet d'optimiser les performances de votre application en réduisant les appels à une API ou un fichier. Il est donc important de mettre à jour les données en cas de modification.

GetStaticProps et GetStaticPaths simplement

Petit tutoriel pour connecter la database à Vercel pour un site fullStack





# Etape 1

Importer son repo GitHub dans Vercel

![Image 1](https://firebasestorage.googleapis.com/v0/b/blog-mern-a905f.appspot.com/o/integration%20vercel%2Fmongo_vercel_integration_1.JPG?alt=media&token=f2d2e3b6-be85-4cfd-a9ba-6c2917abf68c)



# Etape 2 

Dans l'onglet **Integration** relier MongoDB Atlas au repo

![alt text](https://firebasestorage.googleapis.com/v0/b/blog-mern-a905f.appspot.com/o/integration%20vercel%2Fmongo_vercel_integration_2.JPG?alt=media&token=3a8d92d5-ca77-4a3c-a048-656f57cfd1a1)

#Etape 3

Relier le cluster de la database avec Vercel

![Image 3](https://firebasestorage.googleapis.com/v0/b/blog-mern-a905f.appspot.com/o/integration%20vercel%2Fmongo_vercel_integration_3.JPG?alt=media&token=6aa45997-e022-442c-b020-e8eb426f8bba)

#Etape 4

Valider la database correcte dans le cluster

![Image 4](https://firebasestorage.googleapis.com/v0/b/blog-mern-a905f.appspot.com/o/integration%20vercel%2Fmongo_vercel_integration_4.JPG?alt=media&token=bcf15c9a-72b9-4883-8306-15332daabd14)

#Etape 5

Inclure les variables d'environnement du .env.local dans les variables d'environnement du projet Vercel

![Image 5](https://firebasestorage.googleapis.com/v0/b/blog-mern-a905f.appspot.com/o/integration%20vercel%2Fmongo_vercel_integration_5.JPG?alt=media&token=efae966c-22c0-4942-9a03-c0699403a9af)






Intégrer MongoDB à Vercel

Petit starter rapide pour une application Nextjs avec MongoDB, firebase et toastify


# Etape 1

npx create-next-app@latest . 

# Etape 2

 npm i mongodb mongoose sass uuid firebase react-toastify

# Etape 3



Starter FullStack

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    background-color: var(--violet4);
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}



:root {
  --DM : 'DM Sans', sans-serif;
  --Garamond : 'EB Garamond', serif;
  --Roboto  : 'Roboto Mono', monospace;
  --Montserrat : 'Montserrat', sans-serif;
  --Amaranth : 'Amaranth', sans-serif;

  --size0 : 15px;
  --size1 : 20px;
  --size2 : 30px;
  --size3 : 40px;
  --size4 : 60px;


  --width1 : 1000px;
  --maxWidth1 : 1800px; 
  --maxWidth2 : 1275px;

  --dark0 : #0F0F0F;
  --dark1 : #2f2f2f;
  --dark2 : #4c4c4c ;
  --grey1 : #a19da0;
  --grey2 : #c8c8c8 ;
  --white1 : #F1F1F1;
  --white2 : #F2F2F2; 
  
  --blue1  : #4285f4;
  --blue1Dark  : #3875d8;
  --blue2 : #6a6ae9 ;
  --blue3 : #3f51b5;


  --violet1 : #731E9E ;
  --violet2 : #8823A7;
  --violet3 : #9C27B0  ; 
  --violet4 : #4A148C ; 
   


  --red1 : #ff5d5d;  
  --redDark1 : #c62828;  
  --red1Light : #fb7575;
  --yellow1 : #ffc107;
  --yellowShallow : #ffc107af;

  --orange : #fb8c00  ;
  --orangeDark : #f57c00 ; 
  


  --transition1 : all 0.3s ease:

}

starter global.css

CRUD à placer dans l'API de Next pour Mongo avec mongoose

import connectMongo from "../../../utils/connectMongo";
import Articles from "../../../Models/articleModel";

export default async function Delete(req, res) {
    const {
        query: { id },
        method,
    } = req;

    await connectMongo();

    switch (method) {
        case "POST":
            try {
                console.log("CONNECTING TO MONGO");
                await connectMongo();
                console.log("CONNECTED TO MONGO");

                console.log("CREATING DOCUMENT");
                const article = await Articles.create(req.body);
                console.log("CREATED DOCUMENT");

                res.json({ article });
            } catch (error) {
                console.log(error);
                res.json({ error });
            }

        case "DELETE":
            try {
                const deletedArticle = await Articles.deleteOne({ _id: id });

                if (!deletedArticle) {
                    return res.status(400).json({ success: false });
                }
                res.status(200).json({ success: true, data: {} });
            } catch (error) {
                console.log(error.message);
            }

            break;

        case "PUT":
            try {
                const article = await Articles.findByIdAndUpdate(id, req.body, {
                    new: true,
                    runValidators: true,
                });
                if (!article) {
                    return res.status(400).json({ success: false });
                }
                res.status(200).json({ success: true, data: pet });
            } catch (error) {
                res.status(400).json({ success: false });
            }
            break;

        default:
            break;
    }
}




CRUD Mongo

import mongoose from "mongoose";
import { Schema, model, models } from 'mongoose';

const ArticleSchema = new Schema({
    description: {
        type: String,
    },
    title: {
        type: String,
    },

    text: {
        type: String,
    },
    date: {
        type: String,
    },
    keyWord: {
        type: String,
    },
    image: {
        type: Array,
    },
    commentaryID: {
        type: String,
    },
});

const Articles = models.Articles || model("Articles", ArticleSchema);

export default Articles;

Modèle Mongoose

Exemple de getServerSideProps pour fetch la data avant l'affichage de la page


export const getServerSideProps = async () => {
    try {
        await connectMongo();

        console.log("mongo connected");
        const articles = await Article_model.find();
       

        return {
            props: {
                articles: JSON.parse(JSON.stringify(articles)),
            },
        };
    } catch (error) {
        console.log(error);
    }
};

Le Blog