Découverte de NextJS
HTML-код
- Опубликовано: 13 июл 2024
- Article ► grafikart.fr/tutoriels/nextjs...
Abonnez-vous ► bit.ly/GrafikartSubscribe
Dans cette vidéo je vous propose de découvrir ensemble ce qu'est [Next.js](nextjs.org/) et de voir les différents types de rendu possibles.
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat 
Наука
Ce serait bien de faire une formation complète sur NextJS :) Sinon, super vidéo comme toujours !
je pense qu'un cours annexe sur le CSR, SSR et le SSG serait le bienvenue pour apporter plus de poids et de compréhension à ce tuto sur next js
Je viens de découvrir ce framework et j'ai envie de creuser encore plus, merci encore Grafikart! pour cette belle intro sur NextJs.
Excellent! Tes explications sont hyper claires et le rythme est parfait pour les profils devs. Un grand merci pour ce cours !
La vidéo qui tombe pile au moment ^^ merci !
Franchement un tuto de qualité extraordinaire 🎁 un régal à découvrir étant utilisateur de Nuxt, tu m’as donné envie de le tester. Une présentation vraiment clair sur la partie static, SSR ou SSG 👍👍 un grand merci je dis pas non à d’autres sur Next avec plaisir 😀
Super vidéo comme toujours. Au top 👌🏻 ! Merci, grâce a toi j’ai appris énormément de choses. Continu comme ça 👑
merci !! pile au moment où j'avais besoin de découvrir NextJS
Superbe tuto, en tout cas j'ai adoré. C'est l'essentiel, après il y a la doc. Merci beaucoup Grafikart.
Impeccable comme toujours! Merci!
Tu expliques incroyablement bien !
Framework très intéressant et très bien expliqué.
Merci beaucoup !
Je l'attendais celle là, ça risque de m'être utile pour prêcher le bon framework
Ralalah mais tellement merci.... c'est tellement flou tous ces frameworks js qui poppent toutes les 2 heures, tu rends ça tellement clair !!
Merci pour cette vidéo ! J'utilise depuis pas mal de temps Next.Js mais j'ai appris des choses intéressantes :)
Merci pour la vidéo, je souhaite ajouter que NextJs a une librairie qui s'appelle SWR. Elle ressemble à react-query en philosophie et permet de gérer l'état des requêtes asynchrones (loading, error, etc...) afin d'afficher des spinners ou des contenues de chargement.
Super introduction à Next, Simple et efficace, merci
Vraiment cool !! 🔥🔥🔥
super découverte, merci
Excellente vidéo de Découverte de NextJS
Merci beaucoup pour cette formation
Je triple like, un grand grand merci pour ce guide !
Excellente intro pour ce framework qui fait vraiment parler de lui!
À quand la suite avec des choses plus poussées ? 🙂
Très bonne vidéo, merci.
Ce sera interessant si tu fais un petite série sur ca. Et peut être une vidéo sur nuxt.js (ou du moins une comparaison nuxt vs next)
La différence principale est que Next.js est pour ceux utilisant React.js et Nuxt.js pour ceux utilisant Vue.js.
au top, merci :)
Jolie la lumière sur ta cam très beau résultat
Merci beaucoup !
Merci encore pour tes nombreuses vidéos. C'est cool d'avoir une vidéo pareil sur Next Js en français. Donc si j'ai bien compris, avec du NextJs, on est capable de créer une app avec un back (api) et un front ? Si c'est le cas, ça serait bien de voir comment on pourrait rendre des routes (côté API et côté front) privé, genre une authentification est requise pour accéder à certaines pages. Parce que l'idée du "revalidate" à l'air super cool mais si on doit sécuriser des routes par exemple, pour la sécurité, je pense que ça serait plus avec un getServerSideProps ? en tout cas, si tu as le temps ça serait une bonne notion à voir sur NextJs :) Merci encore
Dommage que tu ne parles pas des fichiers _app.js et _document.js mais sinon en 33min tu survoles très bien le sujet !
Même si je bosse avec depuis des mois j'ai appris des choses, merci à toi 😁
Top super tuto
LE MEILLEUR FRAMWORK JS en plus il support trés bien preact et electron ( Nextronjs ). Il se marrie trés bien avec strapi
Hello ! Du contenu de qualité comme d'habitude. Je commence justement l'utilisation de NextJS, même si la vidéo date un peu, j'appréhende un peu mieux l'outil ! Petit retour sur le switch de ton IDE en thème sombre et la page du navigateur clair, ça fait assez mal aux yeux (+ l'affichage du markdown qui est pas franchement lisible au début de la vidéo). Peut être enregistrer en thème clair ou tout harmoniser en thème sombre 😇
jamais déçu
C'est très intéressant je trouvais react assez inutile de base mais avec ça c'est pas mal je pense même à reconstruire mon portfolio.
React Inutile ?
@@JOKER-pg9kb Oui avant je voyais pas trop l'intérêt d'utiliser des framework js autre que jquery car j'utilisais au final très peu de js.
NextJs c’est le feu 🔥 j’ai fait bcp de Gatsby mais ça a tendance à être très fermé, alors qu’avec Next on est hyper libre 🙌🏻
J'utilise seulement Gatsby pour le moment, aucune limitation de mon côté. Tu penses à quelque chose en particulier ? Merci.
Pareil que Lucio, je ne vois pas de limitation non plus avec Gatsby :)
Et bien tant mieux pour vous ahah ! Y a pas de guerre Gatsby vs Next ça dépend dès besoin c’est tout
@@armandsalle8447 0 guerre je voulais juste savoir à quel moment vous avez trouvé ça fermé
Yes, perso j’utilise les deux et je choisi en fonction de la fréquence de mise à jour des contenus 🙂 Pour des énormes sites, le côté hybride de next où tu ne build pas la totalité des contenus avec le fallback c’est top et ça n’existe pas chez gatsby.
Super vidéo comme toujours !
Bien moi j'aimerais plus savoir pour quels types d'applications c'est intéressant d'utiliser Nextjs et dans quels c'est pas une bonne idée.
MAintenant que tu peux faire soit du SSR ou du CSR avec Next tu peux l'utiliser pour ni'mporte quel types d'apps je pense.
En terme de SEO par exemple on préfère faire du SSR
salut, super oui si tu peux refaire des video sur next ce serait cool merci :)
Pour notre application, nous avons un débat par rapport où mettre notre menu (header + side bar à gauche). Est ce que vous metteriez ces 2 composants dans _app.js ?
Merci !
Peux-tu expliquer à la 09:00 pourquoi tu peux faire .then(setPosts) à la place de .then( data => setPosts(data)) , je ne comprends pas comment les deux peuvent être équivalent ?
then attend une fonction, qui recevra les données. Donc plutôt que de créer une fonction autant lui passer directement setPosts.
Bonjour Graphikart, ma question pour toi est a propos de la dernière partie de ta vidéo concernant le chargement des données des blogs quand on scroll, comment ça marche quand on exploite les données SEO, genre est-ce qu'on va considérer que le fait que les données ont été charges et donc le visiteur a été sur la page ou bien?
Merci pour la vidéo :)
Dans le cas montré dans la vidéo ce que l'on charge c'est le contenu d'une autre page (côté client). Cela n'a pas d'impact pour le SEO car la page actuelle (l'HTML) est totalement chargée au premier rendu. Chaque page aura un rendu HTML complet pour le crawler.
@@grafikart Je comprends... merci
Parle nous de Saas et comment faire le bon choix dans le choix de stack
Merci Beaucoup pour tes videos.
Pourrais tu faire une video sur Docker ?
Déjà fait ;) grafikart.fr/tutoriels/docker
@@grafikart merci beaucoup
Il y a une erreur dans la description, le lien vers l'article est un localhost. Vu que tu faisais des changements sur le site de Grafikart, c'est compréhensible.
Mais faudrait changer ça 😉
Bonjour, j'aimerais savoir s'il est possible de faire une vidéo sur du WordPress headless avec nextjs et tailwind ?
arf j'avais un projet à rendre hier avec Next.js çà m'aurait tellement aidé....
Merci pour cette vidéo, ça donne envi d'explorer un peu plus les possibilités de Nextjs. Est-ce que tu conseillerais l'utilisation de Nextjs pour développer une application qui intègre un store type Redux par exemple dans le cadre d'une petite boutique e-commerce ?
Du coup c'est bien pour le référencement si tu build des choses static , mais par exemple si tu as ta page accueil qui dois affiché tes nouveau articles en première page, du coup tu vas build quelque choses de dynamique , pour le référencement sur google les articles vont être détecté ?
Dommage que tu n'est pas abordé le dossier API , qui aurait été important pour savoir sont utilités , car perso je crée des projet react , j'effectue des requetes sur mon api node pour traiter les donnée , mais avec next.js l'api sa remplace un node.js ?
Merci pour le retour ..
J'ai la même question, genre si on veut se connecter à une base de données disons MongoDB on le fait via Next ou on doit aussi créer une api express par exemple ?
Si je veux apprendre next , est ce que je dois passer par React d'abord ? .. Merci d'avance
Oui puisque c’est basé sur React.js
Tu peux visionner sa playlist RUclips ‘apprendre react’ pour commencer, y a une trentaines de vidéos très explicatives
Perso j'utilise Gatsby et l'adore. Mais je vais m'investir sur Next.js car il est aussi intéressant et offre une autre
approche, même si ils sont proches tous les 2. Bon aperçu de Next.js néanmoins.
Je crois que les balises a dans les composants link ne marche plus dans les nouvelles versions de next JS.
Bonjour Merci pour cette vidéo mais je suis un peu perdu là je suis en train de suivre ta formation sur react et je vois cette vidéo sur next.js je me dis que dois-je faire, arrêter la formation sur react et aller voir next. Que me suggerez vous?
Hello Bro non continue la serie sur React aprés Next .....Cest mieux digua meuna hammm importance Next Diadieuf
@@jodev7158 merci bro jajeuf
Quel IDE tu utilises?
merci pour c tuto , comment l'utilise sur ubuntu
Là, tu charges 4 articles en serversideprops. Si tu veux appeler l'article 5. Tu vas avoir une erreur 404? Ou bien ça passe nickel?
Je cherches un pareil overview mais plutot coté NuxtJs, je poirottes un peu la.
Une vidéo sur NuxtJS ?
Qu'est-ce qui mériterais d'être détaillé sur nutJS selon toi ?
Il ne manque plus qu'un PreviewJS...🤣🤣😂. Rien qu'une couche d'abstraction de plus, car sincèrement je vois pas le problème que Next tente de résoudre dans le quotidien du dev
Elle résout un problème pour les personnes qui font des sites dynamiques avec des frameworks front-end et qui ne veulent pas sacrifier les performances du premier rendu et le référencement.
Si tu ne vois pas le problème résolu c'est que tu n'as pas besoin de l'outil ^^
@@grafikart Tu lis dans ma tête.. En fait c'est la vérité, je n'aime pas Next et surtout à cause de son automatisme, j'ai du mal à comprendre en profondeur ce qui se passe derrière et je ne peux pas non plus me contenter de l'utiliser juste parce qu'il fait bien le job ,(•‿•). En revanche son système de routing me plaît bien..
pourquoi le chargement est lent ?
Le chargement de ?
@@grafikart quand tu actualise la page avec les serveur de dev
@@Aymaprod-abonne-toi Ça me le fait aussi, mais en Prod plus de lenteurs.
@@Aymaprod-abonne-toi Dans l'environnement de développement, les getStaticProps sont appelés à chaque requête (idem pour getStaticPaths) si c'est ce dont tu parles. Cela reconstruit donc à chaque affichage les pages statiques.
nextjs.org/docs/basic-features/data-fetching#runs-on-every-request-in-development
@@Aymaprod-abonne-toi c'est le jsonplaceholder qui cause la lenteur.
Une mise à jour ne serait pas de refus sur Nextjs 13 🙏🏾
En effet le prechargement est une fonctionnalité intéressante pour la vitesse mais va requérir des ressources peut-être inutilement. Et pour la planète c'est pas top ^^
Pourquoi Next est tellement en hype depuis quelques semaines ?
Yep perso je suis pas super fan du préchargement non plus :(
"Découverte de NuxtJS" pour bientôt ?
first
Third
la chance :o
Je check la doc, les avis sur internet, les chaines US pas convaincu.
Grafikart en parle => git clone vercel/next.js... lol