Everyone's Making Fun of Next.js 14.0

wow what a week react taint me getting cancelled cuz I'm wrong and my opinion is bad versel releasing their own font and most importantly there we go nextjs 14 finally released there's three main new features that nextjs brings and one of them has been the reason for a lot of debate and a lot of people making fun of this new release the first change is very simple it just makes next year S14 much faster about 50% for the local startup server time and about 94% for hot module Replacements which is huge however before you get too excited not all tests on this are passing yet so the feature is not yet stable it will be stable once 100% of tests are passing however only 90% about our currently passing so it's not stable just yet second one partial pre-rendering what this allows you to do is to define a static HTML shell that is immediately served when the request comes in then all the dynamic content that you can wrap in a suspense component onent is streamed in later pretty straightforward but a nice change nonetheless and then comes the Third change and those are server actions they're now marked as stable and they have been the reason for a lot of discussion this image right here has been going super viral in the web def space and Beyond and there were so many people clowning about just this image on Twitter on Reddit basically everywhere people have been making fun of this big part of the next year S14 release and the reason is mainly twofold first off it really really reminds people the syntax that is used here the server action of the old PHP days and then secondly way more importantly security concerns isn't the code right here that's shown extremely vulnerable to SQL injection attacks well to find out let's take a look at the exact code that is used on the slide it's this bookmark component right here it takes in a slug as a string and uses that slug property it takes in in something called a server action inside of this button called form action this function actually runs on the server and uses the slug inside of an SQL insert statement and this is the problematic Line This Is Where many people believe this is unsafe this is where an SQL injection could happen so if everyone is right and anyone found out that this vulnerability is in your app your app would be ruined in seconds the really important question therefore is are they right is this an SQL vulnerability let's take a look at how an SQL injection attack Works to find out assume we have a user ID that is passed as the query parameters for example or any other field that the user has access to that they can change like the URL for example let's save it as a constant and use it inside of an SQL select statement this right here is horrible this is a SQL injection vulnerability because let's assume that the user changes the user ID that they can in the URL to something like this a drop table users command a specific syntax with a double dash at the end to comment out everything that comes behind it to avoid potential syntax errors what that would mean is our user ID suddenly becomes this statement which is an actual valid SQL command and for all or database knows in this case it's pretty stupid it turns this into two actual commands the first one a select statement that doesn't do anything really and then the second one that deletes your entire database this right here is an SQL injection but then what would a safe approach look like after all Dynamic insertions are super important you can't hardcode everything and this is the answer at the top we have the unsafe vulnerability from before at the bottom we have a parameterized query what that means is the user ID is now passed in as a proper sanitized parameter where the dollar sign one stands instead of being interpolated like in the first example now you might be wondering Josh if the first one is unsafe and the second one is safe then why is the guy in the presentation from next escon not using either of these approaches neither the unsafe nor the safe but an SQL statement that is never involved invoked actually but has instead template strings what's the difference is this safe to understand if it is let's take a look at how to even invoke a function using template strings because the usual way we are all used to is to invoke a function like this with parentheses passing the arguments or parameters I always mix those up inside of there receiving them in the function and doing something with them for example the name of John that is processed in the greed function and that we can then log out what we expect to happen of course is to see hello John in the console let's save it and of course that is exactly what happens so what's about the template strings and that's exactly what's known as a tag function let me show you what that means for example let's turn this greet into a tag function receiving strings as the first parameter of type template strings array which is a built-in typescript type we don't need to import that let's zoom out just a tad so everything fits on the screen and then we have a name as the second one just like before as the second parameter now we can see there's a syntax Tex error expected two arguments but got one so what happened is just because we inserted this strings as a template strings array we turned this into a tag function that we can now invoke using template strings now the error will still be the same but if we pass something like first second and then the actual interpolated value like the name on top for example the syntax error is all of a sudden gone we just invoked a function using template strings so what exactly just happened why is the syntax gone so let me show you what this does let's log out the strings right here let's get rid of this console log and see what happens if we save this we get back in Array this array as the first argument has first second so whatever comes before the interpolated value then comes the interpolated value and that is actually not part of the strings these strings are everything that is not Dynamic where we invoke the function the name is and by the way the argument doesn't have to correspond to the parameter name I could call this anything I wanted the important thing is that this is the first thing that is interpolated therefore it will be passed as the first thing besides the strings into this function so if we logged out anything we expect it to be John right here because that is the first interpolation wherever we invoke this function so the important thing to take away from this is that if we invoke this function using template strings we can actually safely accept these arguments and pass them into a parameterized or p p however that's called function that I told you about earlier the safe second variant I told you about whereas if we invoke the SQL command directly it would be really really bad so yes it's true versell would not let anyone on the stage that presents super insecure code because this code example is perfectly fine it uses template strings these are then put into a parameterized query whatever that's called which is sanitize which is totally cool to do so all the people doubting this implementation don't really understand how SQL injections work it's kind of unfortunate that people have been clowning on this one image so much but it is what it is I'm really happy with the release and I would love to hear what you think about it that's it for me for this video I hope you enjoyed it and I'm going to see you in the next one have a good one and byebye

Channel: Josh tried coding

Views: 133,888

Keywords: nextjs 14, release, new, nextjs 14 releast, nextjs conf, react, typescript, josh tried coding, joshtriedcoding

Id: 2Ggf45daK7k

Length: 7min 16sec (436 seconds)

Published: Sat Oct 28 2023