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
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 !
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
9 ай бұрын
merci à toi ! Tu me diras ton avis !
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
9 ай бұрын
merci beaucoup !
J'attendais impatiemment cette formation
@melvynxdev
9 ай бұрын
ah yes génial
masterclass cette formation, simple et digeste
@melvynxdev
14 күн бұрын
merci trop bien
Ça c’est ultra top!!! Bravo Melvynx ❤❤❤❤
@melvynxdev
9 ай бұрын
love Guillaume
@mediacreatif
9 ай бұрын
Tu devrais te lancer aussi en français Guillaume 😉
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
6 ай бұрын
Hello, merci beaucoup ça fait plaisir !
Super ça Melvyn , merci bien !
@melvynxdev
9 ай бұрын
merci à toi !
Super vidéo :-)
@melvynxdev
9 ай бұрын
Merci !
Cool s'il y a une version du tutoriel en js 😁En tous cas, super tuto 🙂
@melvynxdev
9 ай бұрын
Merci beaucoup ☺️
Un bonheur de se faire réveiller un dimanche matin par la voix de Melvyn ☕
@melvynxdev
9 ай бұрын
ah oui c'est beau, tu m'en diras des nouvelles
@vincentmarconnet6061
9 ай бұрын
Mdrrr tellement ça 🤣
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
9 ай бұрын
Hello, merci beaucoup ça fait super plaisir !
@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
Excellent!
@melvynxdev
9 ай бұрын
merci !
Très bonne vidéo et ici tu n'as pas utilisé trop de thèmes technique. C'est beaucoup plus friendly
@melvynxdev
9 ай бұрын
Merci beaucoup !
Je like et je commente avant que ça ne commence 😅
@melvynxdev
9 ай бұрын
le boss
Je t'ai découvert via une recherche sur axios et du coup je ne l'utilise plus 😂 merci pour le partage ❤
@melvynxdev
7 ай бұрын
ahaha trop bien !
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
9 ай бұрын
quel erreur ? Rejoins mon discord codelynx.dev/discord !
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
7 ай бұрын
ça dépends le besoins, si tu as une app mobile fiat un back séparer
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
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.
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
4 ай бұрын
Oui, y a plus trop besoin de use contexte, j'utilise très très très très rarement.
Merci pour cette video, c'est quoi ton thème vsCode ? et extension pour les snippets :) merci
@melvynxdev
7 ай бұрын
je prépare une vidéo tkt
Super Video ! Tu as trouvé une solution pour le bug de next sur l'intercepteur à 2h00 de la video ?
@melvynxdev
3 ай бұрын
je pense pas xD
Nice
@melvynxdev
9 ай бұрын
merci
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
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 ?
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
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
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
7 ай бұрын
ah oui exacte
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
4 ай бұрын
hello, bientôt une nouvelle vidéo xD
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
8 ай бұрын
ah oui c'est normal et relou
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
6 ай бұрын
je pense que tu as pas mis la bonne config tailwind !!
Hello pour ancer l'appli j'ai mis npm run dev mais ca me génère une erreur
@melvynxdev
9 ай бұрын
quel erreur ? Rejoins mon discord codelynx.dev/discord !
à 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
3 ай бұрын
Tu as importé la bonne librairie
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
9 ай бұрын
Hello, tu utilises le bon fichier ?
@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 !
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
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
8 ай бұрын
@@melvynxdev oui c'est cela du coup je vais regarder sur ton git je comprendrais la méthode du buttonfollow
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
9 ай бұрын
Hello, tu peux aller sur mon discord codelynx.dev/discord pour demandé de l'aide
moi je suis bluffer et je voudrais savoir comment est ce que tu t"es formé? je veux vraiment le savoir stp
@melvynxdev
9 ай бұрын
Ahaha regarde mes autres vidéo
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
4 ай бұрын
Tu as importer le mauvais adapter
@bricetchongoue4463
4 ай бұрын
comment importer le bon adapter? @@melvynxdev
Il n'y a pas de chapitre sur la vidéo 🥲
@kraaakilo
9 ай бұрын
Pff ça rend la vidéo pas intéressante
@melvynxdev
9 ай бұрын
j'ai ajouté c'est bons les amis !
@melvynxdev
9 ай бұрын
j'ai ajouté !
@mediacreatif
9 ай бұрын
Lol
@kraaakilo
9 ай бұрын
@@melvynxdev t’es un 10
il n'a manqué que graphQL
@melvynxdev
9 ай бұрын
J'aime pas graphql