Thanks for the video!! it was really helpful and straight forward!! i was studying next13 and my troughts were to change all actions to fetchs so i could give it a key to invalidate when new data is submited.. didnt know that it was possible to revalidate the path entirely. Thanks
Great video! One thing I found really useful but haven't seen documented by Next at all is that server actions, provided they are stored in a separate file with 'use server' at the top, can be imported anywhere on the client and called to return a promise. The promise will resolve to the return value of the server function. This has allowed me to refactor a ton of client-side api calls to server actions, even though they were being made in async code, in non-component files.
Thanks Trad! And ohh this is a very interesting way. Thanks for sharing. Do you think you can share any code sandbox example just to make sure I fully understand?
@@Kulkarniankita RUclips keeps removing the link to my code sandbox. It lives at "distracted-meitner-c2gpp5", after the traditional url. Out of the the box, it should show you an alert containing server data as a proof-of-concept. The alert is triggered from inside a useEffect() call that calls a function outside of a component file, which calls the server action. My use case for this is that my app uses redux-saga for managing side-effects, so there's a lot of async code outside components which can be triggered by redux actions. Now all the graphql code for my api wrapper can live on the server.
This concept is excellent for creating a monolith project simultaneously similar to PHP. The API will always be present for projects where the interface is available to other resources within the project ecosystem, simply put, when an endpoint is called from various other platforms that communicate with consistent data in the database. My question is whether even if the API call must stat to use server action or use for example React Query or other superstructures to call API endpoint?
@@Kulkarniankita tell me, I planning to subscribe to your course nextjs through ZTM,which is part of the React developer career path,do you advise me to to take that course path instead of Full stack developer path which more developers don't advise to beginners like me? I love React/nextjs,please advise..thank you
I would go for the react dev career path first and then jump onto the full stack one once you are a bit more comfortable with the Frontend. The reason being that you will know how to Differentiate between backend and Frontend errors plus will know Frontend already!
Hi Ankita, here in nextjs I am using only frontend part and backend I python ,so the server actions only handle at the backend of nextjs ,not yet from the frontend is it correct what I think and I am using pages folder only not app folder in nextjs13.5.6v
You need to use the app router and not pages to use server actions. To use server actions, you would need to have your code in JavaScript; otherwise I can't imagine how the actions will be called. And I'm not sure what you mean by “server actions not yet from the front-end.”. You declare an action and call from your form in the front-end.
Next uses react so you can’t move away from react. You need to learn both in parallel but Next is now one of the most popular ways to create Frontend apps!
Hey ankita , I am curious that to know how i can validate the data on client side before sending it to the server. In my project i am using the nextsafeaction with zod and for text update it is working fine but i am unable to find a solution how to upload file with nextsafeaction and next server actions
Hi Ankita,how to set the initial page to be login like localhost:3000/login to be the first actually in pages folder we can set in the index.tsx but in the app router how to do
You could try use middleware as I’m guessing you want to check credentials and accordingly route them to login or dashboard/main page. nextjs.org/docs/app/building-your-application/routing/middleware
@@Kulkarniankita /** @type {import('next').NextConfig} */ const nextConfig = { async redirects() { return [ { source: "/", destination: "/login", permanent: true, }, ]; }, }; module.exports = nextConfig; so can we use like this is it correct way
@@sai7743 yes that’s another way but if you need to check credentials beforehand to route them to login or dashboard then you might need middleware for that but if not, this works too!
@@Kulkarniankita so here my way what I am doing initially to land the login page so that time login page available in that username and password available and submit into the dashboard. And middleware we can use for the protected route and based on the token cookie if token available then into the dashboard or else it will remain into the login page
@@Kulkarniankita I wanted to subscribe to your newsletter. Ten minutes ago, I attempted to open the link, but it wasn't working. However, upon trying again just now, it worked. Thank you for your response.
![Megan Thee Stallion - Neva Play (feat. RM) [Official Video]](http://i.ytimg.com/vi/TpYTyAaTRts/mqdefault.jpg)
hey friends, what would you like to learn next? Comment below and let me know! Plus press like if you enjoyed this type of content!
Thanks for the video!! it was really helpful and straight forward!! i was studying next13 and my troughts were to change all actions to fetchs so i could give it a key to invalidate when new data is submited.. didnt know that it was possible to revalidate the path entirely. Thanks
Amazing, glad it was helpful Edson! And yes our thought process should change entirely
Great video! One thing I found really useful but haven't seen documented by Next at all is that server actions, provided they are stored in a separate file with 'use server' at the top, can be imported anywhere on the client and called to return a promise.
The promise will resolve to the return value of the server function. This has allowed me to refactor a ton of client-side api calls to server actions, even though they were being made in async code, in non-component files.
Thanks Trad! And ohh this is a very interesting way. Thanks for sharing. Do you think you can share any code sandbox example just to make sure I fully understand?
@@Kulkarniankita RUclips keeps removing the link to my code sandbox. It lives at "distracted-meitner-c2gpp5", after the traditional url.
Out of the the box, it should show you an alert containing server data as a proof-of-concept. The alert is triggered from inside a useEffect() call that calls a function outside of a component file, which calls the server action.
My use case for this is that my app uses redux-saga for managing side-effects, so there's a lot of async code outside components which can be triggered by redux actions. Now all the graphql code for my api wrapper can live on the server.
Thank for tutorial,easy to learn
Amazing!
Great video, I finally understand server actions now!
Awesome 👏 so good to hear!
This concept is excellent for creating a monolith project simultaneously similar to PHP. The API will always be present for projects where the interface is available to other resources within the project ecosystem, simply put, when an endpoint is called from various other platforms that communicate with consistent data in the database. My question is whether even if the API call must stat to use server action or use for example React Query or other superstructures to call API endpoint?
Thank you for the video, I hope you make lots more . your explanations are clear and concise.
Thanks Saabir, I plan to create more! :)
great video
Thank you 😊
I am the first to watch 😂
I love your teaching style!
Thank you for being the first one to watch it, and awesome! 🙌
@@Kulkarniankita tell me, I planning to subscribe to your course nextjs through ZTM,which is part of the React developer career path,do you advise me to to take that course path instead of Full stack developer path which more developers don't advise to beginners like me? I love React/nextjs,please advise..thank you
I would go for the react dev career path first and then jump onto the full stack one once you are a bit more comfortable with the Frontend. The reason being that you will know how to Differentiate between backend and Frontend errors plus will know Frontend already!
@@Kulkarniankita
Thank you so much,highly appreciated!
@@Dr_PhilK of course, anytime! Happy to answer any questions you may have :)
that was an excellent representation of GET and POST, what about PUT and DELETE?
Thanks, glad you liked it! I didn’t as the video was getting really long but it should give you an idea now for how to do the same :)
Friend, could you make a video in which cases we can use client components and server components? for example in an Ecommerce. thanks video
suscribed
Thank you friend! this is a great idea - will do this :)
Hi Ankita, here in nextjs I am using only frontend part and backend I python ,so the server actions only handle at the backend of nextjs ,not yet from the frontend is it correct what I think and I am using pages folder only not app folder in nextjs13.5.6v
You need to use the app router and not pages to use server actions. To use server actions, you would need to have your code in JavaScript; otherwise I can't imagine how the actions will be called. And I'm not sure what you mean by “server actions not yet from the front-end.”. You declare an action and call from your form in the front-end.
@@Kulkarniankita for protected routes which is the best method to go in nextjs from only front end part and no need from the backend part
as nextjs is evolving very fast...should we totally move from react to next?
Next uses react so you can’t move away from react. You need to learn both in parallel but Next is now one of the most popular ways to create Frontend apps!
Hey ankita , I am curious that to know how i can validate the data on client side before sending it to the server.
In my project i am using the nextsafeaction with zod and for text update it is working fine but i am unable to find a solution how to upload file with nextsafeaction and next server actions
I haven’t used that library so I would lean on zod to validate data like I have shown in the course!
Hi Ankita,how to set the initial page to be login like localhost:3000/login to be the first actually in pages folder we can set in the index.tsx but in the app router how to do
You could try use middleware as I’m guessing you want to check credentials and accordingly route them to login or dashboard/main page.
nextjs.org/docs/app/building-your-application/routing/middleware
@@Kulkarniankita /** @type {import('next').NextConfig} */
const nextConfig = {
async redirects() {
return [
{
source: "/",
destination: "/login",
permanent: true,
},
];
},
};
module.exports = nextConfig; so can we use like this is it correct way
@@sai7743 yes that’s another way but if you need to check credentials beforehand to route them to login or dashboard then you might need middleware for that but if not, this works too!
@@Kulkarniankita so here my way what I am doing initially to land the login page so that time login page available in that username and password available and submit into the dashboard. And middleware we can use for the protected route and based on the token cookie if token available then into the dashboard or else it will remain into the login page
how to store image on database and webhost
You can check this article for your question.
stackoverflow.com/questions/54500/storing-images-in-postgresql?rq=4
upload daily video
Lol I wish, it’s a lot of work to create quality content and upload a video which takes time so going to stick to weekly!
Your website frontend.. is not working.
Which website?
@@Kulkarniankita I wanted to subscribe to your newsletter. Ten minutes ago, I attempted to open the link, but it wasn't working. However, upon trying again just now, it worked. Thank you for your response.
Hey! Which website are you talking about? Kulkarniankita.com or frontendsnacks.dev? Thanks for letting me know, I’ll try it!
modern php
100% I agree, funny we are going back to the patterns that worked!