Adobe vient de sortir une librairie de composants accessible... vraiment très stylée 🪄

Que pour React, un peu comme Radix, mais avec plein d'autres fonctionnalités !

👉 https://react-spectrum.adobe.com/react-aria/index.html

La concurrence = l'innovation, impatient de voir ce qui va arriver !

Comment intégrer facilement Resend dans ton application pour envoyer des emails marketing ?

Car faire une application, c'est bien... gagner de l'argent, c'est mieux 🤑

Pour informer tes utilisateurs des promotions ou autres informations, les emails marketing sont la clé.

1️⃣ Création d'audience

Resend propose maintenant la création d'une audience.

En gros, c'est un groupe d'e-mails.

Le but va être d'ajouter chaque utilisateur dans ton audience.

2️⃣ Création de contact

Pour ça tu vas récupérer le "audience_id" quand tu créer une audience et tu vas rajouter ceci dans NextAuth :

En gros, tu vas venir rajouter dans l'événement "createUser" une action qui utilise l'API de resend avec `resend.contacts.create` et tu vas créer un Contact pour l'audience dont l'id est défini avant.

Comme ça, il sera automatiquement ajouté dans Resend.

3️⃣ Création de broadcast

Puis, tu vas pouvoir créer un "broadcast", il te suffira de choisir la bonne audience et...

Magie !

Tu peux envoyer des emails super facilement à toute ta base email sans te prendre la tête.

Resend gère automatiquement le désabonnement.

Et moi, dans nowts.app, je gère également le désabonnement dans les paramètres de l'utilisateur !

En ce moment, tu peux profiter de nowts.app pour un prix délirant.

On se retrouve là-bas !

Integrating Resend for Easy Email Marketing

Comment limiter les accès d'un utilisateur UNIQUEMENT s'il a payé ?

Comme un abonnement ou un achat one-time.

Je vais te montrer comment le faire avec Stripe + Auth.js + Prisma 👇

1️⃣ Authentification

La première étape est d'authentifier ton utilisateur afin de limiter l'accès à certaines personnes.

En 10 minutes, tu peux avoir quelque chose de correct en suivant ma nouvelle vidéo : https://www.youtube.com/watch?v=qHzO4l8CgME

2️⃣ Ajouter un rôle en database

Déjà, niveau donné il va falloir créer qqch qui différencie les utilisateurs qui ont payé des autres.

Pour ça tu peux typiquement créer une enum "Plan" avec FREE / PREMIUM.

3️⃣ Créer un produit Stripe

Sur Stripe, après avoir Setup ton compte, tu peux aller dans "Product Catalog" et créer un nouveau produit avec un abonnement.

4️⃣ Récupérer le price_id

Une fois que c'est fait, copie le price_id !

6️⃣ Installer Stripe

Utilise `npm install stripe`

Puis ajouter tes clés API "PRIVATE TEST" dans ton .env.

Puis ajoute ce code :

import Stripe from "stripe";

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: "2023-10-16",
  typescript: true,
});

7️⃣ Lier Stripe à ton utilisateur

Dans ton schéma Prisma, ajoute ce champ :

stripeCustomerId String?

Et lorsque l'utilisateur crée un compte, dans le champ `event.createUser`, tu vas créer un client Stripe et lier son identifiant dans la table user.

8️⃣ Créer un BuyPremiumButton

Avec les Server Actions, tu vas créer un checkout Stripe et pour le lier à l'utilisateur, tu vas récupérer le stripeCustomerId de celui-ci.

9️⃣ Ajoute des webhooks

Pour ça en dev tu vas devoir rajouter un endpont "api/webhooks/stripe/route.ts" avec un POST qui va venir écouter les events.

Je te laisse suivre la documentation : https://stripe.com/docs/webhooks

🔟 Écouter les événements suivants :

Pour chaque événement, tu pourras généralement récupérer le "customerId" et retrouver l'utilisateur en fonction de cette valeur.

Ensuite, pour les événements suivants, effectue les actions suivantes :

• checkout.session.completed → ajout du premium
• invoice.paid → ajout du premium
• invoice.payment_failed → suppression du premium
• customer.subscription.deleted → suppression du premium

De cette manière, l'utilisateur aura accès au rôle uniquement s'il a le premium.

Quand je dis "ajout/suppression", cela correspond à modifier le schéma dans la base de données.

1️⃣1️⃣ Vérifier si l'utilisateur est premium

Maintenant, lorsque tu veux vérifier une action de l'utilisateur, il te suffit de regarder le champ `PLAN` et de vérifier s'il est égal à "premium".

Si ce n'est pas le cas, tu lui dis de payer.

Sinon, tu l'autorises.

C'est compliqué ? 🤔

Oui, totalement.

Et c'est très relou à faire, surtout que je ne peux pas tout expliquer dans un thread.

La solution ?

Va checker ma boilerplate où tout est documenté avec des cours vidéo et déjà prêt à l'usage juste ici : nowts.app !

Limiting User Access with Payment Integration

Comment sécuriser ton application Next.js afin d'éviter les problèmes...

Sérieux, tu n'as pas le choix de le faire.

Pour respecter tes utilisateurs et éviter les problèmes 👿

Voici comment faire :

1️⃣ Ne jamais faire confiance aux données que tu reçois

TypeScript est uniquement actif dans ton IDE, au runtime (quand l'utilisateur va sur ton application), TypeScript n'existe plus.

Il faut donc valider les données !

Par exemple ce code :

Tu penses que c'est sécurisé cette action du serveur car tu as mis le type `Post` ?

PAS DU TOUT !

À tout moment, l'utilisateur peut envoyer ceci :

En gros, ici il passe la clé "user", ce qui lui permet de créer un nouvel utilisateur avec un plan premium.

NE JAMAIS FAIRE CONFIANCE À L'UTILISATEUR.

Pour cela, tu vas toujours valider les données, par exemple avec Zod, en créant un schéma qui limite les données en entrée.

2️⃣ Authentification

Quand on appelle ton backend, tu dois toujours te demander :

▪ A-t-il le droit de faire cette action ?

Par exemple, pour la suppression d'un post.

Tu ne peux pas simplement créer une route API qui prend un ID et supprime cet ID.

Tu dois vérifier que l'utilisateur est le bon.

Pour cela, tu viens récupérer l'utilisateur via une méthode et tu vas par exemple ajouter dans le filtre de la suppression le userId pour vérifier que le post lui appartient.

3️⃣ Autorisation

En plus de te demander s'il a le droit d'accéder à une ressource, tu peux te demander s'il a le droit de faire une action.

Par exemple, vérifier qu'il est administrateur pour pouvoir supprimer le post de quelqu'un d'autre, etc...

🔒 Sécurise ton app.

Et pour m'assurer que cela soit bien fait, j'ai créé une boilerplate avec un cours complet pour tout t'expliquer afin que tu puisses créer des applications du niveau d'une entreprise à toi tout seul.

Rends-toi ici https://nowts.app

Securing Your Next.js Application: Best Practices

Comment intégrer Stripe rapidement dans ton application Next.js et commencer à encaisser tes premiers euros maintenant en moins de 5 minutes ?

Afin d'encaisser tes premiers euros maintenant 🎰

Voici toutes les étapes à faire en utilisant Auth.js V5 👇

1️⃣ Installer Stripe

Pour ça, il te faut deux librairies :

• @stripe/stripe-js
• stripe

Utilise ton package manager pour les installer.

2️⃣ Setup l'objet Stripe

Je te conseille de créer un fichier `lib/stripe` dans lequel tu mets ce code :

import Stripe from "stripe"
import { env } from "./env"

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: "2023-10-16",
  typescript: true,
})

Le `apiVersion` dépend de la version de librairie que tu utilises, mets celle que TypeScript valide.

3️⃣ Setup API Keys

Il va falloir évidemment créer un compte Stripe et tu peux suivre ce tutoriel pour récupérer tes clés API de tests.

https://stripe.com/docs/development/get-started

4️⃣ Créer un customer Stripe quand un utilisateur est créé

Dans l'object de configuration de Auth.js tu trouveras une clé `event.createUser` qui prend en paramètre l’user :

createUser: ({ user }) => ...

Tu vas devoir créer un customer Stripe en utilsant user.email :

const customer = await stripe.customers.create({
  email: user.email,
  name: user.name ?? undefined,
});

Puis dans ta database, il faudra sauvegarder la valeur de l'id du customer (customer.id) dans ton object database user.

Moi j'ai ajouté un field `stripeCustomerId`.

Faire ceci te permettera de créer des checkouts, des portails user...

4️⃣ Setup les webhooks

On va partir sur le principes que tu fais un SaaS et que l'utilisateur paie un abonnement.

Pour ça, tu vas devoir définir des webhooks pour ajouter un rôle premium dans ta database ou au contraire, l'enlever quand il ne paie pas.

Pour ça on va créer une route `api/webhooks/stripe` qui va récupérer l'event comme ceci :

export const POST = async (req: NextRequest) => {
  const event = await req.json();

  switch(event.type) {...}
}

ℹ️ À noter qu'en prod, il faudra utiliser des "secrets" pour vérifier que l'event vient bien de l'API Stripe.

Une fois fait, tu peux à peu près écouter les 5 événements suivants :

• "checkout.session.completed" : quand l'utilisateur à terminer un checkout. Tu peux le mettre premium.

• "checkout.session.expired" : quand l'utilisateur abondonne un panier, tu peux lui envoyer un email.

• "invoice.paid" : dans le cas d'un abonnement, cet event sera appelé chaque mensualité. Tu peux continuer de lui mettre le premium.

• "invoice.payment_failed" : une mensualité à fail, tu peux soit lui enlever le premium, soit lui envoyer un mail de rappel.

• "customer.subscription.deleted" : quand l'utilisateur arrête son abonnement. Tu peux lui enlever le premium.

5️⃣ Créer un checkout avec le product

Il faudra créer un produit Stripe, mais une fois fais, tu pourras récupérer l'URL du checkout avec :

stripe.checkout.sessions.create

N’oublie pas de récupérer le stripeCustomerId si l'utilisateur est connecté pour pré-fill l'email !

⚠️ Tout ça...

Je l'ai déjà fait pour toi dans https://nowts.app et en plus, je t'explique de A à Z comment je l'ai fait pour que tu comprennes TOUT !

On se retrouve là-bas 😉

Integrating Stripe with Next.js for Quick Payment Processing

J'ai créé le Handler parfait pour les API routes en Next.js :

✅ Typesafe du body, params et searchParams avec Zod
✅ Support middleware (par exemple l'authentification)
✅ Support de la gestion d'erreurs personnalisées

Je vais t'expliquer un peu pourquoi j'ai fait ça :

En Next.js, il nous arrive souvent de faire du code encore et encore.

Je voulais un moyen simple de venir utiliser les API Routes pour mes users authentifiés etc... sans avoir besoin de constamment refaire le même code.

Je me suis inspiré de "NextSafeAction" et j'ai essayé d'amener la même API pour des routes api handler.

Le but est de pouvoir créer une infinité d'handler comme ceci :

On pourrait avoir un hanlder `authHandler` qui utilise `createHandler` avec comme paramètre `middleware` une méthode qui récupère l'auth et le return.

Comme ça, chaque fois que tu utilises `authHandler` tu as :

✔️ Accès à l'utilisateur
✔️ Tu sais qu'il est authentifié

Pour faire cela, j'ai créé une méthode `createHandler` qui prend les configurations en paramètre :

• middleware : pour récupérer l'authentification par exemple.
• handleServerError : pour gérer les erreurs (catch)

Voici un peu ce que ça donne.

Évidemment, on est sur du gros TypeScript hardcore code que j'ai caché car le but est que tous les paramètres et schéma soit utilisé pour automatiquement inférer les bons Type à notre "callback" !

Moi ce que je kiffe, c'est quand toutes les validations sont faites automatiquement et encore mieux... que les erreurs de validation soit envoyé automatiquement en cas d'erreur.

En gros, tu as juste à définir les schémas nécessaires et tous les types sont gérés pour toi. ✅

Tout ça, je l’ai fait pour https://nowts.app qui sera de loin la boilerplate la plus poussée pour créer des applications rapidement.

Si tu es intéressé, je vais peux-être en faire une librairie 🤔

Comment je l’appelle ? 😂

Next.js API Handler: Typesafe, Middleware Support, Custom Error Handling

Si tu n'ajoutes pas cette librairie de Toast dans ton application React... supprime le dépôt GitHub et jette ton ordi par la fenêtre 🪟

Plus sérieusement...

Je vais vraiment te présenter une pépite. ✨

Sans plus de suspense, cette librairie c'est Sonner et si elle est géniale c'est pas pour rien.

Je dis pas ça juste pour la hype, mais elle se démarque par 2 qualités assez dingues. 🚀

1️⃣ API Simple

Un des problèmes de beaucoup de librairies, c'est qu'elles sont liées à React. 🔄

C'est-à-dire que pour les utiliser, tu dois :

1. Importer
2. Utiliser le hook (const toast = useToast) 🎣
3. Utiliser la méthode (toast.success)

Alors qu'avec sonner tu supprimes une des étapes, la deuxième. Car son fonctionnement est "extrait" de React.

Tu fais juste :

1️⃣ Importer
2️⃣ Utiliser le hook (const toast = useToast)
3️⃣ Utiliser la méthode (toast.success)

Quand tu utilises 1000x les toasts dans ton application, je peux te promettre que cette petite différence te fait gagner beaucoup de temps. ✨

2️⃣ UX de dingue! 🚀

Le deuxième avantage de Sonner, c'est son UX juste fantastique.

Voici en gros les fonctionnalités UX de fou:

1️⃣ Mobile friendly UX

Quand tu es sur mobile, il suffit de "slide" le toast pour qu'il dégage. 📲

2️⃣ Stack

Quand tu as plusieurs toast, ils vont se stack. Quand tu hover, ils vont se dé-stack, ce qui va te permettre de tous les voir. 📚

3. Desktop friendly UX 🖱️

Avec la souris, tu peux aussi faire glisser les toasts pour les faire disparaître.

Cette librairie, c'est une masterclass.

Car elle t'offre aussi de la personnalisation et de nombreux éléments essentiels.

Juste teste-la, et tu verras.

Cette librairie fait intégralement partie de ma future boilerplate NowTS que tu peux retrouver ici https://nowts.app

Tu peux aussi retrouver ma vidéo qui explique encore mieux : https://youtu.be/K1lJyYLjZks

Sonner: The Must-Have Toast Library for React

Je prépare le projet NextJS 13 ultime pour maîtriser Next.js à la perfection...

Le but étant de former des développeurs prêts à résoudre tous les problèmes 😎

Cet éditeur de leçons permet de réorganiser les leçons, tout auto save grâce aux Server Components 🚀

Français: Si tu veux être le premier à pouvoir tester ce nouveau format et créer un **vrai projet**, c'est ici : https://codelynx.dev/nextreact/courses

Mastering Next.js with the Ultimate NextJS 13 Project

Array.reduce n'est pas assez utilisé...

Pourtant, c'est juste un game changer quand tu le comprends 🚀

Je te donne toutes les clés pour le maîtriser dans ce thread 👇

C'est quoi reduce ?

C'est une fonction des array ([].reduce) qui permet de réduire une liste à une valeur !

Le meilleur moyen de l'apprendre est la doc MDN : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Mais je vais essayer d'encore plus vulgariser le sujet qu'eux !

En comparaison,

avec .map un tableau de 7 éléments retournera toujours 7 éléments
avec .filter le tableau sera toujours plus petit ou égal qu'avant
avec .find ce sera toujours un élément du tableau

et avec .reduce un tableau de 7 éléments fera un objet, une string ou un nombre

donc le but de reduce est de réduire un tableau à 1 nouvelle valeur !

.reduce est toujours appelé sur un tableau mais il peut retourner:
un nombre
une string
un autre tableau
un objet
un boolean !?

Bref, il est ultra-libre

Maintenant parlons de son API :

Reduce prend 2 paramètres

Le premier c'est le callback : la fonction qui va être appelée pour chaque entrée de ton tableau

Lui-même demande minimum 2 paramètres :
1. "accumulateur" (point 1) qui représente la valeur sauvegardée entre chaque itération (= acc)
2. "current value" (point 2) qui représente la valeur de l'itération courante

Puis le point 3 se nomme la `valeurInitiale` !

C'est la valeur initiale de l'acc si elle est définie (car facultatif).

Si aucun argument n'est donné, ce sera le premier élément de notre tableau comme valeur initiale et on va "skipper" la première valeur dans le callback.

[1,2,3] avec une valeur initiale de 0, cela revient à faire [0,1,2,3]

donc il fait un tour de boucle en plus avec une valeur initiale à 0 !

Si tu regardes l'index, tu verras que sans initiale value l'index de départ = 1
donc un tour de boucle est déjà fait

assez normal car il prend l'index 0 pour le mettre comme initial value

en conclusion :
l'acc va accumuler des données
sa valeur par défaut est définie par le second paramètre ou s'il est vide par le premier élément du tableau

si tu as un tableau vide et que tu ne mets pas de valeur par défaut, tu auras une erreur !

Logique car il prend le premier élément de rien !

🚀 Le meilleur moyen de le comprendre c'est de le refaire de A à Z.

Dans BeginJavaScript, je me suis amusé à refaire faire au membre toutes les méthodes de tableau pour comprendre comment elle fonctionne.

Reçois un cours gratuit sur les tableaux : https://codelynx.dev/beginjavascript/array

Analysons son fonctionnement !

Dans la première itération l'index est 0 et la valeur de l'acc est égale à la valeur de initialValue comme on l'a vu avant.

Avec la valeur 0 ce tour de boucle est totalement inutile, mais pour que vous compreniez bien, je l'ai rajouté !

Donc 0 + 1 fait 1 et donc l'acc vaut 1 pour l'index 1
l'acc est additioné à 2, ce qui donne 3
dans l'index 2 on additionne 3 à 3 donc 6
puis, dans le dernier index on ajoute 4 ce qui donne 10 comme réponse finale

Bon voilà je pense que tu es encore perdu donc je referai la fonction reduce en js simple !

J'ai ajouté des explications sur l'image mais mon reduce fonctionne exactement comme le reduce par défaut ici !

Pas si complexe finalement hihi

3 exemples pour t'aider à comprendre !

Tu as envie d'additionner tous les nombres d'un tableau ? reduce !

tu veux transformer un tableau 2 dimensions avec 2 éléments par index en objet ? reduce !

Tu souhaites avoir créé le groupBy à la mysql ? Reduce !

(source: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#regrouper_des_objets_selon_une_propri%C3%A9t%C3%A9 https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#regrouper_des_objets_selon_une_propri%C3%A9t%C3%A9)

🚀 Même si je l'ai fais, le mieux c'est que tu refasses de ton côté la function reduce de A à Z.

Reçois un cours gratuit sur les tableaux : https://codelynx.dev/beginjavascript/array

Mastering Array.reduce

Quelle est la différence entre les states et les props en React 🤔 ?

C'est une des questions que je reçois souvent ❓

J'ai pris du temps mais...

Voici la meilleure réponse que je pouvais vous donner !

👇

Imagine que tu construis une maison en Lego...

Vous allez devoir commander des Legos !

Les legos ont deux paramètres :

• La couleur
• La taille

Pour faire tes commandes, tu pourras spécifier cette couleur et cette taille

Ce que je te présente là, c'est les props !

Les props vont permettre de spécifier au "Lego Component" (un composant React) quel UI il va afficher !

Ici, c'est notre Lego !

Ce qu'il faut bien comprendre c'est que notre Composant va juste réagir aux props qu'on lui donne

Le Component ne peut pas modifier ses props, c'est un peu comme des paramètres à notre composant !

Mais alors... c'est quoi les states ?

Les states, ça représenterait plus la "mémoire interne" de notre composant.

Sur chaque Lego, il y a un bouton qui lors du clique incrémente le counter.

Le counter est entièrement géré à l'intérieur de notre Lego, comme si notre Lego avait un mini disque dur qui va incrémenter lors du clique.

Cette fois, notre composant peut modifier cette donnée et s'afficher différemment !

C'est un peu comme une mémoire interne de notre composant.

Les props, eux, sont des sortes de paramètres.

Du point de vue de ton composant, un state :

• Est géré en interne
• Peut être modifié

Alors qu'une props :

• Est donnée en paramètre
• Ne peut pas être modifiée

Maintenant que tu as compris la différence entre props et state, intéressons-nous à un petit edge case !

Comme tu le vois ici, notre Lego change de forme et de taille !

Pourtant on a dit que les props ne sont pas "modifiables" mais ici ça fonctionne 🤯

Ce qui se passe ici, c'est que les deux selects au-dessus *sont des states !

Mais ils sont gérés dans le parent component.

Donc le "LegoTester" (ce que tu vois sur le screen ci-dessus) possède une mémoire interne qu'il passe ensuite en props à notre enfant !

Je présente ceci, car je sais que ce genre de pattern peut perturber au début !

On a des states qui sont passés en props ce qui rend le composant dynamique !

J'espère que ce thread t'a aidé :

Go check la vidéo pour des explications plus longue :
https://youtu.be/TMm8dYD5syc