Write PHP in Next.js/React Components (Server Actions)

PHP within a JavaScript function within a react component you don't think this code can actually work well let me tell you it can and in this video I'll show you exactly how I made PHP work from right within react component verel recently introduced the newest version of next CH the widely popular framework for react and on stage they showed this an implementation for what they call server actions a way to execute side JavaScript code right from within react components let me just take a second to talk about what we are looking at this is an SQL query within a JavaScript function within an HTML button within a JavaScript function and the internet went wild many people were reminded of the old days of PHP where you would just write PHP blocks right within the HTML and vsel even acknowledged that themselves so last but not least I want to give a shout out to The Visionaries the Risk Takers the ones who dared to go deeper you know who I'm talking about PHP they had it right all along more server simpler programming model the OG serverless you deserve your accolades love you PHP have we gone full circle it looks like PHP it smells like PHP what if we could actually make it PHP what if we could make use PHP well you've seen the title of this video let me introduce you to use PHP for next shares executing PHP code from right within font and JavaScript code is nothing I'd ever thought I wanted to see but here we are for this to work we used the new server action introduced by verell in the latest nextjs version the PHP code will run inside the nextjs server function but what about the use PHP directive where does that come from to make use PHP possible I added a nasty pre-processing step to the build process before next chairs actually Compass the application all used PHP blocks in the source code are replaced by server actions that execute the PHP code on the client side this will invoke an http post request to an endpoint that nextjs automatically creates for Server actions on the server side the PHP code will be executed by spawning a new process which runs the code through the PHP command line interface and Returns the output via HTTP response that way we can basically execute anything and that's it now we can use use PHP inside our nextjs application can make updates to the database exactly like the L showed us but with PHP this syntax does only work for Server components though which are basically components that can be fully rendered on the server if we want to use server actions in client components we have to split it into a separate file and declare the file as a server file by using use server use PHP got you covered there as well just adding the used PHP directive inside of one of the functions and importing the function into your client component will'll make sure that you can use your PHP code within client components as well that way we can for example fetch information by executing PHP code on the server and showing the result to the user this project was heavily inspired by react UCC and react use rust on GitHub by El nardu whom I might have liberated some code from all kitup repositories are linked in the description whether you like it or not you can use use server in your nextg projects now and use PHP technically too but you really shouldn't if you enjoyed the video make sure to leave a like And subscribe see you in the next one

Channel: Bufferhead

Views: 20,881

Keywords: react, next.js, react components, next js tutorial, next js, react js, php, programming, web development, front end, frontend, frontend developer, frontend vs backend, javascript, typescript, jsx, php programing, server actions, server actions in next.js, server components, client components, laravel, react development, vercel, vercel tutorial

Id: EGOkjmyfL6E

Length: 4min 17sec (257 seconds)

Published: Thu Nov 02 2023