No video

MAÎTRISE NEXTJS 13 : Créer et deploy une app Full-Stack Modern en Juste 4 Heures !

Cours GRATUIT sur NextJS : codelynx.dev/nextreact/nextjs...
LE FICHIER NOTION AVEC LES CODES PAS MIS DANS LA VIDÉO : codelynx.notion.site/Code-Sni...
Timecode :
00:00 - Introduction
02:55 - Maquette Figma
03:25 - Structure de la base de données
04:00 - Configuration du projet
15:00 - Ajout du thème et des éléments de base
29:00 - Base de données et NextAuth
45:00 - Création de la page principale
01:00:00 - Configuration de Prisma avec les followers + authentification
01:10:00 - Configuration de fausses données pour remplir l'application
01:20:00 - Notre page avec tous les posts
01:40:00 - Création d'un formulaire et d'une page de publication
01:50:00 - Ajout d'un intercepteur pour la modal d'ajout d'un post
02:10:00 - Ajout de la vue d'un post et des commentaires
02:20:00 - Ajout de la réponse à un commentaire
02:31:00 - Ajout de la page d'un utilisateur
03:40:00 - Modification du profil
03:05:00 - Ajout du bouton "J'aime"
03:15:00 - Aller plus loin !
03:17:00 - Déploiement de l'application en production
03:35:00 - Conclusion
▶ VIDÉO
Découvrez en profondeur Next.JS, l'un des frameworks les plus puissants pour le développement web. Dans ce tutoriel, je décompose chaque étape pour maîtriser l'App Directory et les Server Components. Suivez-moi pour débloquer le plein potentiel de Next.JS et créer des applications web ultra-performantes.
▶ ME SUIVRE
🐦 Mon Twitter : / melvynxdev
🖥 Mon GitHub : github.com/Melvynx
📑 Mon Blog : codelynx.dev
Le club du développeur secret codelynx.dev/club
Cours GRATUIT sur useState : codelynx.dev/beginreact/usestate
Cours GRATUIT sur NextJS : codelynx.dev/nextreact/nextjs
Cours GRATUIT sur JavaScript : codelynx.dev/beginjavascript/...
#javascript #developper #react #reactjs #reactjstutorial #reactjsdeveloper #reactjscourse #reactjsforbeginners #reactjsproject #javascripttutorials #javascripttutorialforbeginners

Пікірлер: 92

  • @melvynxdev
    @melvynxdev9 ай бұрын

    Il faut que je précise qu'à l'époque où je faisais la vidéo, les server actions avaient quelques problèmes concernant leur utilisation directement dans les server components. Depuis, ce problème est résolu et vous n'avez plus besoin de les passer en props. Désolé pour cela, c'est de la faute à Next.js, hein !

  • @Remy.L
    @Remy.L9 ай бұрын

    C'est pile poil ce que j'attendais comme vidéo avec le côté backend que je ne connais pas trop mais qui m'intéresse beaucoup ! Je vais me faire ça de suite merci t'es le best !

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    merci à toi ! Tu me diras ton avis !

  • @tfgg1490
    @tfgg14909 ай бұрын

    En toute objectivité tes la meilleure chaîne React et Next on sans l'amour et l'effort et la qualité Continue si les autres framework fr pouvez avoir aussi ca

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    merci beaucoup !

  • @user-qn6cs1gs7w
    @user-qn6cs1gs7w9 ай бұрын

    J'attendais impatiemment cette formation

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    ah yes génial

  • @1993348
    @199334815 күн бұрын

    masterclass cette formation, simple et digeste

  • @melvynxdev

    @melvynxdev

    14 күн бұрын

    merci trop bien

  • @codewithguillaume
    @codewithguillaume9 ай бұрын

    Ça c’est ultra top!!! Bravo Melvynx ❤❤❤❤

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    love Guillaume

  • @mediacreatif

    @mediacreatif

    9 ай бұрын

    Tu devrais te lancer aussi en français Guillaume 😉

  • @Esteban-x-
    @Esteban-x-6 ай бұрын

    Garde cette energie bro ! En plus de transmettre du savoir tu transmet aussi ta passion et c'est ce qui manque à beaucoup de junior 😊

  • @melvynxdev

    @melvynxdev

    6 ай бұрын

    Hello, merci beaucoup ça fait plaisir !

  • @Dehcimal
    @Dehcimal9 ай бұрын

    Super ça Melvyn , merci bien !

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    merci à toi !

  • @Nicolas-ow7pj
    @Nicolas-ow7pj9 ай бұрын

    Super vidéo :-)

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    Merci !

  • @rajaonarivoonjamamonjy97
    @rajaonarivoonjamamonjy979 ай бұрын

    Cool s'il y a une version du tutoriel en js 😁En tous cas, super tuto 🙂

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    Merci beaucoup ☺️

  • @HenrySommeil
    @HenrySommeil9 ай бұрын

    Un bonheur de se faire réveiller un dimanche matin par la voix de Melvyn ☕

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    ah oui c'est beau, tu m'en diras des nouvelles

  • @vincentmarconnet6061

    @vincentmarconnet6061

    9 ай бұрын

    Mdrrr tellement ça 🤣

  • @Saeruu
    @Saeruu9 ай бұрын

    Honnêtement je poste rarement des commentaires, mais il faut quand même dire que tes vidéo sont vraiment excellentes. J'ai beaucoup appris sur react en général grâce à tes vidéos ( étant dev back et souhaitant juste compléter mes compétences ), et ce tuto est une fois de plus de qualité. Merci pour ça ❤‍🔥

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    Hello, merci beaucoup ça fait super plaisir !

  • @Saeruu

    @Saeruu

    9 ай бұрын

    ​@@melvynxdev Petite question au passage, ça se fait d'utiliser Next juste pour le SSR et d'appeler des APIs dev dans d'autres langages ? ou c'est vraiment prévu pour faire du tout en un ? Par exemple, un truc du style : React/NextJs -> [ C# API ] Ou l'idéal c'est plutot : React -> [ C# API ] Et si j'ai aucun existant ( je pars d'un projet from scratch ) : Only NextJs

  • @nadetdevfullstack7041
    @nadetdevfullstack70419 ай бұрын

    Excellent!

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    merci !

  • @nadirzefra2374
    @nadirzefra23749 ай бұрын

    Très bonne vidéo et ici tu n'as pas utilisé trop de thèmes technique. C'est beaucoup plus friendly

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    Merci beaucoup !

  • @arielrudolphharryebangmezu5103
    @arielrudolphharryebangmezu51039 ай бұрын

    Je like et je commente avant que ça ne commence 😅

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    le boss

  • @floppyBE565
    @floppyBE5657 ай бұрын

    Je t'ai découvert via une recherche sur axios et du coup je ne l'utilise plus 😂 merci pour le partage ❤

  • @melvynxdev

    @melvynxdev

    7 ай бұрын

    ahaha trop bien !

  • @chairublac5283
    @chairublac52839 ай бұрын

    J'ai suivi la première partie sur le thème et les éléments de base mais j'ai quelques soucis. Apparemment certaines classes tailwind ne fonctionnent pas et de même pour le darkmode. Un avertissement apparait aussi dans la console concernant les attributs de la balise html :/

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    quel erreur ? Rejoins mon discord codelynx.dev/discord !

  • @ghostlexly
    @ghostlexly8 ай бұрын

    Merci pour la vidéo et tes efforts. Je n'arrive toujours pas à me décider si je devrai partir sur NextJS Server Actions ou NestJS en backend 😅, le fait de peut être avoir besoin de développer une app mobile ios/android et de devoir re-coder tout le backend pour avoir des api me rebute un peu

  • @melvynxdev

    @melvynxdev

    7 ай бұрын

    ça dépends le besoins, si tu as une app mobile fiat un back séparer

  • @fromagetriste
    @fromagetriste9 ай бұрын

    Je ne connais pas encore Next, et je vais regarder la vidéo bientôt, mais qqn pour me dire la différence rapidement entre Node et Next ? Je viens de Python Django et depuis 1 mois j'apprends le front, je vais bientôt passer à React. Merci d'avance, ps : j'ai déjà liké la vidéo hahah

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    Hello, NodeJS c'est un "outil" qui permet d'executer du code côté backend. NextJS est un framework qui permet de créer des applications fullstack. NextJS utilise NodeJS.

  • @walidbelliliseixas7421
    @walidbelliliseixas74216 ай бұрын

    J'en suis qu' la fin du setup de l'adapter et je suis trop choqué (en bien) du signIn c'est completement ouf le gain de temps dev comparé à React seul ! J'attendais de faire du useEffect de partout là on on fait des call api tranquille. Mais du coup dans l'architecture projet on a plus besoin de dossier api pour faire tout nos call avec axios par exemple ? Ou tout reste dans les server components ? J'aurais la réponse à la fin du cours je pense. Ah et oui là le Layout c'est un provider mais du coup c'est comme le useContext() on peut faire passé tout par là haut comme ça ? Plus besoin de ce hook ? Et du coup meme redux , redux toolkit plus besoin ? je connais pas encore assez NextJs, j'ai besoin de tes cours absolument

  • @melvynxdev

    @melvynxdev

    4 ай бұрын

    Oui, y a plus trop besoin de use contexte, j'utilise très très très très rarement.

  • @phptempaltedf
    @phptempaltedf7 ай бұрын

    Merci pour cette video, c'est quoi ton thème vsCode ? et extension pour les snippets :) merci

  • @melvynxdev

    @melvynxdev

    7 ай бұрын

    je prépare une vidéo tkt

  • @swanmarin8770
    @swanmarin87703 ай бұрын

    Super Video ! Tu as trouvé une solution pour le bug de next sur l'intercepteur à 2h00 de la video ?

  • @melvynxdev

    @melvynxdev

    3 ай бұрын

    je pense pas xD

  • @bigjuniorofficiel4072
    @bigjuniorofficiel40729 ай бұрын

    Nice

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    merci

  • @pataco80
    @pataco802 ай бұрын

    Bonjour, j'essaie de faire le même projet mais sur la version 14, la dernière de Next.JS. Malheureusement, le theme ne s'adapte pas au système si je laisse le fichier globals.css. Configuration identique à celle de ce projet pourtant. Comment ce fait-il ? Quelqu'un a eu ce problème ? Merci.

  • @melvynxdev

    @melvynxdev

    2 ай бұрын

    Hello, j’ai récemment recréé un projet et tout fonctionne. Tu peux vérifier que tu ajoutes bien les props du thème provider ?

  • @amirnadji5427
    @amirnadji54272 ай бұрын

    Bonjour, merci pour cette excellente vidéo. J'ai une question concernant le déploiement de ce genre d'application fullstack (next, MERN), c'est sans doute une question de noob mais bon: Je vois de tutus expliquant le déploiement sur des plateformes telles que vercel, render, heroku. C'est super cool mais comment on fait pour déployer sur notre propre serveur ? je veux dire si on prend un hébergement chez hostinger ou autre, n'y a t'il pas un moyen d'installer un BD, un serveur nodejs et de faire tout sur notre propre serveur? merci

  • @melvynxdev

    @melvynxdev

    12 күн бұрын

    Chaque hébergeur a ses spécificités. Il te faudra tout réinstaller manuellement (Node.js, etc.) via le terminal de commande. Ensuite, il faudra lier la base de données fournie par l'hébergeur à ton application, en fonction du type de base de données proposé. Sinon pour le détail, pose ta question sur mon discord : mlv.sh/discord

  • @yanntrad2304
    @yanntrad23048 ай бұрын

    Pour le bouton follow je l'ai fait apparaître que si le session.user.id n'est pas === params.userId. Du coup ce bouton n'est pas affiché quand on affiche notre propre post.

  • @melvynxdev

    @melvynxdev

    7 ай бұрын

    ah oui exacte

  • @lk-studios
    @lk-studios5 ай бұрын

    Moi quand j'ai cliquer a nouveau sur le bouton pour l'auth j'ai toujours la même erreur, ça ne passe pas

  • @melvynxdev

    @melvynxdev

    4 ай бұрын

    hello, bientôt une nouvelle vidéo xD

  • @VincentHelloWorld
    @VincentHelloWorld8 ай бұрын

    Hello j'ai cette erreur et ne comprend pas pourquoi, lors de l'ajout du themeProvider dans layout : Warning: Prop `className` did not match. Server: "h-full dark" Client: "h-full"

  • @melvynxdev

    @melvynxdev

    8 ай бұрын

    ah oui c'est normal et relou

  • @707RIRO
    @707RIRO6 ай бұрын

    moi pour le bouton "click me" au debut, il est pas stylisé par défaut alors que j'ai installé le component shadcn, je comprend pas 😭

  • @melvynxdev

    @melvynxdev

    6 ай бұрын

    je pense que tu as pas mis la bonne config tailwind !!

  • @sadasow6984
    @sadasow69849 ай бұрын

    Hello pour ancer l'appli j'ai mis npm run dev mais ca me génère une erreur

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    quel erreur ? Rejoins mon discord codelynx.dev/discord !

  • @billelboulahia6673
    @billelboulahia66733 ай бұрын

    à 1:10:05 j'ai une PrismaClientValidationError pourtant j'ai suivi le tuto à la lettre et j'ai verifié plusieurs fois mes fichiers correspondants au auth

  • @melvynxdev

    @melvynxdev

    3 ай бұрын

    Tu as importé la bonne librairie

  • @yanntrad2304
    @yanntrad23049 ай бұрын

    Salut et merci pour ce tuto ! A 19'20 j'ai l'erreur : index.js:654 Uncaught Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Pourtant dans page.tsx et themeprovider j'ai bien 'use client' Merci d'avance !

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    Hello, tu utilises le bon fichier ?

  • @yanntrad2304

    @yanntrad2304

    9 ай бұрын

    @@melvynxdev Effectivement j'importais le mauvais fichier ThemeProvider dans layout, donc pas de 'use client' du coup... bien vérifier que l'import soit import { ThemeProvider } from '@/src/theme/ThemeProvider' contenant le 'use client' et non pas le ThemeProvider from next-themes. Merci pour ton aide !

  • @undareztwitch5285
    @undareztwitch52859 ай бұрын

    slt a tous je me suis aperçu sur la video a 2h49 qu'il n'y avait pas de buttonfollow et tu fait une transition a 2h51 et la y a un buttonfollow qui apparait mais que tu ne montre pas ?

  • @melvynxdev

    @melvynxdev

    8 ай бұрын

    Tu parles du moment ou je bug ? Je sais pas si y'a un gros truc hors caméra j'ai pas l'impression

  • @undareztwitch5285

    @undareztwitch5285

    8 ай бұрын

    @@melvynxdev oui c'est cela du coup je vais regarder sur ton git je comprendrais la méthode du buttonfollow

  • @marcrichet2626
    @marcrichet26269 ай бұрын

    Salut Melvynn, le dark mode ne fonctionne. J'ai cette erreur dans la console -> "app-index.js:31 Warning: Extra attributes from the server: class,style at html at RedirectErrorBoundary" çà vient du dossier node_modules - cà commence bien lol :))

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    Hello, tu peux aller sur mon discord codelynx.dev/discord pour demandé de l'aide

  • @jeaneudesdjeya9151
    @jeaneudesdjeya91519 ай бұрын

    moi je suis bluffer et je voudrais savoir comment est ce que tu t"es formé? je veux vraiment le savoir stp

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    Ahaha regarde mes autres vidéo

  • @bricetchongoue4463
    @bricetchongoue44634 ай бұрын

    Je suis bloqué à l'authentification....l'adapter ne marche pas...tu n'explique pas comment tu a fait pour résoudre ce problème chez toi...

  • @melvynxdev

    @melvynxdev

    4 ай бұрын

    Tu as importer le mauvais adapter

  • @bricetchongoue4463

    @bricetchongoue4463

    4 ай бұрын

    comment importer le bon adapter? @@melvynxdev

  • @mathieu2347
    @mathieu23479 ай бұрын

    Il n'y a pas de chapitre sur la vidéo 🥲

  • @kraaakilo

    @kraaakilo

    9 ай бұрын

    Pff ça rend la vidéo pas intéressante

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    j'ai ajouté c'est bons les amis !

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    j'ai ajouté !

  • @mediacreatif

    @mediacreatif

    9 ай бұрын

    Lol

  • @kraaakilo

    @kraaakilo

    9 ай бұрын

    @@melvynxdev t’es un 10

  • @madalioubouyo9996
    @madalioubouyo99969 ай бұрын

    il n'a manqué que graphQL

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    J'aime pas graphql