Pourquoi tout le monde se moque de Next js 14 !?

Une nouvelle version majeure de Next js est sortie. Va-t-il falloir ENCORE tout réapprendre ? Est que Next est en train de faire marche arrière en autorisant à éparpiller du SQL n’importe où ? Est-ce dangereux niveau sécurité (injections SQL) ?
💪 Soutenir la chaine via tipeee :
fr.tipeee.com/codeconcept
Coupons de réduction :
React et Next 13 . Montez en compétences sur le meta-framework leader du marché :
codeconcept.teachable.com/p/n...
React en Front, Strapi en Back, pour créer des projets FullStack rapidement :
codeconcept.teachable.com/p/r...
Liens cités dans la vidéo :
Annonce de Next 14
nextjs.org/blog/next-14
Formation gratuite Next JS en anglais :
nextjs.org/learn

[@pulsarfox]

Le morceaux de code avec la requête me fait penser à ce que je faisais quand j'apprenais à faire du PHP y'a 15 ans : je foutais ma requête random un peu comme ça. Fascinant ce qui se passe chez Next.

[@codeconcept]

Oui, ça fait penser au vieux code spaghetti des temps passés de PHP (heureusement, depuis, Laravel, Symfony et autres sont passés par là). Mais heureusement, on peut utiliser une DAL avec Next 14. Sur le coup, ça fait quand même un choc 😅

[@Bearded_Bear]

Ce qui m'inquiète + que de savoir comment évolue Next (évoluant plutôt côté Vue) c'est surtout par quel miracle le laptop derrière toi arrive à tenir en équilibre :D

[@codeconcept]

Le même miracle qu'en CSS : un bon vieux align = 'center' 😅

[@mwlulud2995]

@@codeconcept 🤣🤣🤣🤣🤣🤣🤣🤣

[@kamalkamals]

most of new features inspired from other projects, like server actions it s already exist in qwikjs

[@moneyfr]

En entreprise est ce qu'il y a des développeurs Ts qui posent les premières briques du projet ? Je fais souvent le ts après histoire éliminer les erreurs de l'inter: Any

[@codeconcept]

Tout dépend si tu es là au démarrage du projet ou pas. Perso, je fais tout en TS directement pour être prévenu dès que je fais une erreur de type. En outre, ça me permet d'avoir l'autocompletion sur mes types. Mais on n'est pas obligé de tout typer fortement à 100%😉

[@mountakhabi]

Je suis sur un projet nextjs actuellement en entreprise et c’est assez flou ces servers actions, pourquoi le code est sur le dossier app (front) mais on a aussi un dossier api (back)

[@codeconcept]

Perso, je vais probablement les créer dans le dossier app, dans un fichier qui va centraliser plusieurs actions que l'on peut ensuite importer granulairement. C'est en tout cas ce que j'ai vu passer dans la doc : nextjs.org/docs/app/api-reference/functions/server-actions Le dossier api est plutôt dédié à la création d'end-points, pour se créer des API REST. Mais un collègue plus ancien sur le projet devrait t'indiquer comment est organiser l'application. Ou à minima la doc. S'il y a ni collègue ni doc, ça va être la doc officielle de Next qui servira de référence 😀Le tuto officiel est très bien fait : nextjs.org/learn

[@Willow_PX]

Même si on utilise Next 14 on est pas obligé d'utiliser le 'use server', si ?

[@codeconcept]

Depuis Next 13, les composants sont 'server' par défaut. Et en plus, maintenant en effet, pour créer une Server Action, il faut ajouter 'use server' au début du corps d'une fonction pour qu'elle puisse être appelée par un client react.dev/reference/react/use-server#use-server

[@asubijotaka7374]

Donc si avec Next on peut interagir directement avec une bdd (avec ou sans data layer), quelle serait l'interet de déployer un serveur Nest pour des appels API ? Uniquement pour pouvoir publier des endpoints publics accessible directement, sans obligatoirement passer par le front servi par Next ? Pas certain d'avoir tout saisi

[@codeconcept]

Next et Nest se marchent probablement un peu dessus. J'imagine que Next serait utilisé pour le routage et l'authentification tandis que NestJS serait pour la création d'API REST. Je vois passer ces temps-ci des annonces React / NestJS. Pas React / Next / Nest. Pas beaucoup d'annonces non plus, vue que NestJS est le backend naturel d'Angular plutôt que de React 😀

[@arthurc.3060]

Personne utilise express pour le server ?

[@codeconcept]

En Backend d'une appli React ? Perso, j'utilise Koa parce que c'est ce qu'utilise Strapi. Koa a été développé par le même dev qu'Express. Mais avec Next js, on est libre d'utiliser le serveur que l'on veut. Même le package http de base : nextjs.org/docs/pages/building-your-application/configuring/custom-server mais j'imagine que ce serait un poil maso de le faire. Je vois régulièrement des offres d'emploi pour React et ... NestJS en Back.

[@arthurc.3060]

@@codeconcept maso d’utiliser next ? Next c’est react + une gestion server avec du server rendering ou des appels Ajax en gros pour un render plus application react ?

[@arthurc.3060]

@@codeconcept ah non d’accord tu veux dire que avec next on peux utiliser un autre server que celui proposer par next, mais c’est inutile non ? Autant utiliser react dans de cas ?

[@codeconcept]

Dans ton post, tu parlais d'express, d'où ma confusion 😀 On sent bien que l'époque de React, vendu comme une lib très simple qu'on peut apprendre en quelques jours, est en train d'être remplacée par "React + Next" en tant que framework équivalent à Angular. Qui lui-même prend la vague des meta-frameworks avec son Analog. Reste à voir à quelle vitesse Next va réellement s'imposer.

[@thoniorandriamialisona3933]

J'ai vu les critiques certes mais je n'ai vu nul part pourquoi ils ont introduit cette nouvelle fonctionnalités!

[@TheHouseTutorials]

Laquelle ?

[@codeconcept]

S'il s'agit des server actions, elles permettent de créer à la volée un end point vers lequel poster un formulaire. Tout comme c'est le cas avec React Router v6, les servers actions permettent de poster un formulaire et de mettre à jour la page sans utiliser useState() ni useEffect(), le tout en utilisant un formData natif : nextjs.org/docs/app/api-reference/functions/server-actions Donc exit le traditionnel onSubmit event handler sur un form. Au lieu de ça, on utilise un attribut action, ce qui donne "form action='une-server-action'" et voilà. On peut même utiliser une server action en dehors d'un formulaire : react.dev/reference/react/use-server#calling-a-server-action-outside-of-form Et même, importer une action depuis un fichier à part. Donc, les actions ne finissent pas éparpillées comme il y a 20 ans dans les vieilles appli PHP (à noter que PHP a depuis bien longtemps progressé sur ce plan là aussi, donc ça n'est PAS du PHP bashing)😀

[@thoniorandriamialisona3933]

@@codeconcept Du coup, d'après ce que tu as répondu la, je ne vois pas beaucoup en quoi les critiques sont justifiable

[@codeconcept]

Elle ne le sont justement pas😁 La toile s'est enflammée sur une slide qui faisait tout tenir en quelques lignes uniquement pour avoir une vision d'ensemble. Et comme en plus les critiques ne font pas la différence entre client et server components. Bref, la magie de Twitter a encore opéré ...

[@karlstein9572]

​@@codeconceptceux qui critiquent sont des noobs simplement, ils parlent sans savoir, rien que le coup des injections via les templates string alors que cette syntaxe permet justement de sécuriser les paramètres via la fonction sql.

[@MasculinismTV]

tu veux te goinfrer de pognon sur notre dos comme tous les autres petit coquin

[@codeconcept]

Choisir le secteur du développement ou de la formation en développement n'est d'emblée pas le bon secteur pour 'se goinfrer'. Et ça, depuis bien 20 ou 30 ans. Il vaut bien mieux être sur du classique : avocat (d'affaire), orthodontiste ou trader sont des options bien plus judicieuses. C'est pas tout, mais faut que j'y aille : mes pâtes aux truffes sont en train de refroidir 😅

[@NicolasHedoire]

Je pense que NextJS est le bon chemin pour développer les applications Next GEN. Il suffit juste de savoir coder proprement ! En passant Prisma est intéressant pour effectuer des requêtes vers la DB ;-) Les autres qui pensent le contraire sont des crétins !

[@codeconcept]

J'étais d'accord ... jusqu'à la dernier phrase 🙃 Un ORM est une couche d'abstraction. Donc il a forcément un impact sur les performances. Particulièrement sur les appli à forte volumétrie. C'est pour cette raison qu'après avoir fait des tests, les archi ou tech lead de plusieurs projets sur lesquels j'étais ne voulaient pas entendre parler d'ORM, résultats chiffrés à l'appui. Pour aggraver les choses, en analysant des requêtes complexes, le SQL généré par les ORMs était aberrant par rapport à ce qu'aurait fait un dev SQL expérimenté. Préférer les perfs à l'expérience développeur était donc tout sauf bête. A voir si aujourd'hui encore les ORMs plombent autant les performances. D'après cet article, ça ne s'est pas arrangé : www.edgedb.com/blog/why-orms-are-slow-and-getting-slower 😅 Un ORM sur un petit projet OK, sur un gros projet avec de nombreuses tables de centaines de milliers voire millions de rows par tables et de nombreuses jointures ... 😉

[@chambaderaphael8946]

Totalement en phase avec ce post, du coup des libs comme drizzle ou kysely sont à prendre en compte

[@codeconcept]

Drizzle me fait penser à Entity Framework de mon époque lointaine C# 😀 Le truc bien, c'est qu'on guide l'ORM pour éviter qu'il fasse deux requêtes au lieu d'une seule avec jointure. Mais est-ce qu'il aura aussi des impacts sur les perfs du fait que ça reste une couche d'abstraction ? Ou bien est-ce qu'il mouline pendant le build pour remplacer ses requêtes par de "vraies" requêtes SQL ?

[@chambaderaphael8946]

@@codeconcept Pas de pre-build des query, en fait il ne faut pas voir ca comme un ORM mais plutôt comme des queryBuilders. Donc effectivement il y a une couche légère d'abstraction, sachant que dans les deux libs, le raw sql est aussi possible.

[@moneyfr]

En entreprise avez vous un vrai gros niveau en typescript (infer, generics)? Regarde la librairie string-ts

[@codeconcept]

Est-ce que c'est celle-là ? github.com/gustavoguichard/string-ts

[@moneyfr]

@@codeconceptoui