00:03 Server actions are functions that run on the server and can be called like any other JavaScript functions. 02:44 Server actions in Next.js abstract the process of making API calls from client to server. 07:43 Server actions allow you to do mutations and perform create, update, and delete actions on top of the typical read operations. 10:07 Learn about infinite scrolling and server actions 15:05 Fetch data from the Shikimori API 17:28 Creating a parameter template string with page, limit, and order 21:54 Install and use react-intersection-observer package for tracking element visibility 24:09 Implementing server actions and infinite scroll for loading more data 28:30 Implement animations using framer motion in a Next.js app 30:45 Create a motion div component for client-side rendering using Framer Motion. 35:11 Optimize loading time of items when scrolling far down 37:15 Using server actions to fetch and return data for animations 41:36 Learn how to use Next.js like a pro with server actions and deep dive lectures
Awesome Project Adrian! I'm 20, Brazilian and starting my career with nextjs on this month, I don't have money for the entire curse yet but I really love to make all this projects with you, I wish I will start my own projects soon, thank you for all! God bless you!
Hi Adrian, know you is a blessing, I am really grateful that you make the NEXTJS14 course on sale again so I could be able to buy it yesterday. I love all of your Video contents, they are free but beyond quality. Thank you again. 💯💯💯
I'm thoroughly enjoying these concise crash courses that delve into specific topics. Thank you for creating these informative videos. I look forward to more content in the future, and I would particularly appreciate a short tutorial on React Query. Keep up the great work!
Awesome video. Yes Please make more content of this type which focuses on a single specific feature. it helps to get more in-depth knowledge of that topic. Thank you so much
Excellent little project with explanation of concepts! I would like to have more content like this to improve frontend concepts ! Thank you Adrian & JSM
@@serxeoworld5773 Not yet. Been working on getting the capital I Join the Masterclass, passed the interview with flying colours. JSM, Adrian articulates core concepts in a simple clear manner. Provided you have the innate will to learn consistently through practice. Understand, Rinse then Repeat 🔁
33:43 Yes but some of the components are rendered client side even without directive. So see that it is client side rendered move to the sources tab and see that browser has that AnimeCard component. Thanks a lot sir, still great efforts 👌
Really good project for explain the concept! I suggest everyone to use something to take note when watch this kind of video, it's nice to do the project, but it's really important to take note when he explain the concept.
Thanks man. Thanks a lot. This type of video is very helpful to explain concepts and facts. So, if its possible, then keep making this type of videos and contents...
Wow! This is a great content. I wish to join the ultimate class. Thank you for the insight Mr.Andrian. We will like to get more insights and contents from you
here is the simple code for framer motion, just add this in your map const adjustedIndex = index % 20; - the number 20 is limit data perpage so you dont need to move the map into actions file for example, in loadmore component data.map((series: SeriesCard, index) => { const adjustedIndex = index % 20; return (
Hi Thanks for the video ! Info for motion: To have a server component inside the client component you need to use children props. Something like that: "use client"; import React from "react"; import { motion } from "framer-motion"; type Props = { children: React.ReactNode; className?: string; }; const variants = { hidden: { opacity: 0, y: -50 }, visible: { opacity: 1, y: 0 }, }; export const MotionDiv = ({ children, className }: Props) => { return (
For animation delay use the current page too, it will get smoother. Because the last from the first page is visible after the first of the second. Anyway awesome content thank you once more!
I want the JSM course so bad but I'm broke and unemployed right now. Finished Odin Project and some JSM projects and trying to land a first job so I can invest into this course!
to be honest, i would like you release another video like that to explain more power Next.js features rather than the series which fully practices nextjs project. But btw, i always grant what you did.
Instead of returning the AnimeCard from the server action, a better approach would be to adjust the delay. We can simply do it using the remainder operator like this. delay: (index % 8 ) * 0.25,
I'm following this channel for a year but never completed any single project as mostly get stuck. but this project completing after Next js also did in react js .
Hi Adrian, thanks for this video. I am getting this error: Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'original') Source components\AnimeCard.tsx (25:51) @ original It seems that image data is missing or undefined, the link is broken.
You started with server action but showed react server component (RSC) functionality. Data fetch on server side is based on RSC. Server Actions is completely different and is used for data mutations on server. Try to show a client side component with use client directive directly mutating the DB using a inline function that has a use server directive inside that functions boundary. That will be a good example of react server action.
Project shows both the ways of using server action from the client (check LoadMore component) and server components. And in the beginning, it does talk about mutations and stuff through code snippets 👍
@@sujatagunale7079 really🤔 I think you couldn't understand that comment. The data is normally fetched from the server it is not server action. *But still a great video.* 💖💖
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
00:03 Server actions are functions that run on the server and can be called like any other JavaScript functions.
02:44 Server actions in Next.js abstract the process of making API calls from client to server.
07:43 Server actions allow you to do mutations and perform create, update, and delete actions on top of the typical read operations.
10:07 Learn about infinite scrolling and server actions
15:05 Fetch data from the Shikimori API
17:28 Creating a parameter template string with page, limit, and order
21:54 Install and use react-intersection-observer package for tracking element visibility
24:09 Implementing server actions and infinite scroll for loading more data
28:30 Implement animations using framer motion in a Next.js app
30:45 Create a motion div component for client-side rendering using Framer Motion.
35:11 Optimize loading time of items when scrolling far down
37:15 Using server actions to fetch and return data for animations
41:36 Learn how to use Next.js like a pro with server actions and deep dive lectures
Amazing recap!
This is the kind of video that sorts all of the issues and explains properly. Awesome Project!
Thank you so much!
Awesome Project Adrian! I'm 20, Brazilian and starting my career with nextjs on this month, I don't have money for the entire curse yet but I really love to make all this projects with you, I wish I will start my own projects soon, thank you for all! God bless you!
Best of luck!
I was skeptical about the components being on server side after aplying the but they are really in server side, thank you for this tutorial.
Me too. I thought use client would be inherited by the children.
You're right, to make server side that section it's necessary to receive it in a children prop in the component.
Hi Adrian, know you is a blessing, I am really grateful that you make the NEXTJS14 course on sale again so I could be able to buy it yesterday. I love all of your Video contents, they are free but beyond quality. Thank you again. 💯💯💯
Thank you, enjoy!
I'm thoroughly enjoying these concise crash courses that delve into specific topics. Thank you for creating these informative videos. I look forward to more content in the future, and I would particularly appreciate a short tutorial on React Query. Keep up the great work!
More to come!
nobody makes me feel motivated to code than this guy on the leadup to the coding, well done
Just do it!
please do more of these videos they are so helpful and not overwhelming. Thank You for your efforts.
prefer like this, under 1 hours, easy to understand, love it ❤❤❤❤
Glad you liked it!
The way you explained things is Just Amazing. This video is really a piece of work
Thank you!
Finally I have something to do for the next two weeks! Thanks JSM.
Enjoy!
Awesome video. Yes Please make more content of this type which focuses on a single specific feature. it helps to get more in-depth knowledge of that topic. Thank you so much
You got it!
Excellent little project with explanation of concepts! I would like to have more content like this to improve frontend concepts ! Thank you Adrian & JSM
Thanks, will do!
2 years later, I am still Here loving the content 🎉❤
Thank you so much! ❤️
Did you get hired?
@@serxeoworld5773 Not yet. Been working on getting the capital I Join the Masterclass, passed the interview with flying colours. JSM, Adrian articulates core concepts in a simple clear manner. Provided you have the innate will to learn consistently through practice. Understand, Rinse then Repeat 🔁
sir do you live in year 2025?
salutations from year 2023
@@franukitohe means he's a old sub and still watches the content frankfurt dickson
Hi Adrian, that's great content, please make more videos like this, thank you for everything!
Wow, I'm so impressed of your websites!
Thank you
really helpful, i was struggling with infinite scroll functionality
As a anime lover, really excited to built this project.
Enjoy! 😊
Love you adrian for putting my suggestion to the video itself 😭😭😭😭❣️
Yess, for you :)
Thank you so much, need more of this. You explain the concepts in an easy way. Thanks
The concept of Server Action became clear thanks to this video. Thanks Adrian 👏🏼👏🏼
“nextJs becoming php” is the perfect summary of my concerns with all the new jazz
'use php';
coming soon...
this is great, simply and very useful class. Very required format nowadays) Show must go on!!! Thank you so much!!
You're very welcome!
G.O.A.T , one love from Nigeria.
Greetings to Nigeria!😊
33:43 Yes but some of the components are rendered client side even without directive.
So see that it is client side rendered move to the sources tab and see that browser has that AnimeCard component.
Thanks a lot sir, still great efforts 👌
Sir can you please mark the AnimeCard component with "use server" directive and reply here with what you have, everything working fine or error..?
That's a great observation
Great! Please more of this type of videos. Thank You
Will do! 😊
Really good project for explain the concept! I suggest everyone to use something to take note when watch this kind of video, it's nice to do the project, but it's really important to take note when he explain the concept.
Thanks for the idea!
Yes, Make these simple apps and explain these small concepts
Love you man this is the absolute best tutorial to get up and running with nextjs 14
What a great short project, it works like magik. Hope to see much more.
Thanks man. Thanks a lot. This type of video is very helpful to explain concepts and facts. So, if its possible, then keep making this type of videos and contents...
I will try my best
Wow, amazing! Thanks for this @adrian
You got it!
Great video 🎉
Amazingggg! Was literally waiting for you to upload a video where you use framer motion!
It's here! 😊
Nice bro, Brazil thanks you
perfect video length packed with valuable knowledge thanks
really helpful!! please do make this types of videos
More to come!
Very good video!! Looking for more!
More to come!
Crash courses are awesome.. please do more of these concept based videos
Will do
Thanks. Good Tutorial
Great video as always.
I appreciate that
Next.js is just awesome❤
Yess!
Wow
Next 14 with framer motion ❤
Yess! :)
it's amazing, need more videos like this ?
Great
Wow! This is a great content. I wish to join the ultimate class. Thank you for the insight Mr.Andrian. We will like to get more insights and contents from you
Any time!
here is the simple code for framer motion,
just add this in your map
const adjustedIndex = index % 20;
- the number 20 is limit data perpage
so you dont need to move the map into actions file
for example, in loadmore component
data.map((series: SeriesCard, index) => {
const adjustedIndex = index % 20;
return (
);
})
sorry my english is bad
Good
Yes , pls do more of these videos
Will do
Thanks a lot 🎉 Adrian
Thanks! 😊
Finally😆small project but great🤩
Yes! 😊
Love your way of Explaining
Your videos are amazing
Thank you so much!
Boss! Love You.❤
Boss! 😊
Thanks 🎉
Thank you!
Sir, Please Continue This Series Of Teaching Us NEXT JS Concepts
My mentor, ❤ hey there!
Hi ❤️
This was amazing!!
Its an amazing day when JSM uploads a video 😉
Thank you! 😊
omg next 14 already jesus
Yes, embrace it!
Hi Thanks for the video !
Info for motion:
To have a server component inside the client component you need to use children props. Something like that:
"use client";
import React from "react";
import { motion } from "framer-motion";
type Props = {
children: React.ReactNode;
className?: string;
};
const variants = {
hidden: { opacity: 0, y: -50 },
visible: {
opacity: 1,
y: 0
},
};
export const MotionDiv = ({ children, className }: Props) => {
return (
{children}
);
};
export default MotionDiv;
//export const MotionDiv = motion.div;
I love it. Thanks, a lot!
I'm glad to hear that! :)
very helpful , thank you for in detail knowledge
I'm just waiting for your tutorial 😊
Which one?
yes i want that simple apps with more focused on learning
These kind of videos are generally more useful
More useful than Build and Deploy?
yes do more tutorials like this one
Will do!
For animation delay use the current page too, it will get smoother. Because the last from the first page is visible after the first of the second. Anyway awesome content thank you once more!
Great idea! 😊
Big fan sir ❤
Thank you ❤️
You are out of human species...Thanks man
Thank you! 😊
great excellent plz make more project on server action
Will do!
Thanks ADRIAN
You got it!
Good stuff. Much appreciated! Anything on Payload CMS planned?
In 5 days!
thank you master ❤
thank you so muxh ❤
Wow It really amazing thanks
I want the JSM course so bad but I'm broke and unemployed right now. Finished Odin Project and some JSM projects and trying to land a first job so I can invest into this course!
Maybe in the future :)
thx for this great tuto,
i think,
delay: (index % 8) * 0.1
can be a good way to handle the stagger(based on limit=8)
perfect as always....
Thank you so much 😀
Bro casually showed us how to render server side components inside a client side component!
Thank you so much.
Thank you!
awesome, thx very much!
Your content is very nice , interesting And I love it very much❤️❤️
I would like it if you could create courses in Angular or projects using it🙏❤️
Maybe one day!
to be honest, i would like you release another video like that to explain more power Next.js features rather than the series which fully practices nextjs project. But btw, i always grant what you did.
At 12:31, what did you do to correct the errors?
Npm install
Well done!
Delicious ^^
Merci !
Perfect Tutorial
32:00 can someone explain why didn't he just use "use client" on AnimeCard component?
amazing job!
Thanks!
Pls tell ur vscode theme looks so good
Catpuccin
Thank you
Instead of returning the AnimeCard from the server action, a better approach would be to adjust the delay. We can simply do it using the remainder operator like this. delay: (index % 8 ) * 0.25,
Top Class
Appreciate it
thanks for nice video!
what is the theme? thanks for the video
Cattpuchin mocha
I'm following this channel for a year but never completed any single project as mostly get stuck.
but this project completing after Next js also did in react js .
You can do it!
Amazing conten as always..🙂.
Can someone tell me which file icons and themes Adrian is using.
Fira code and material icons
Hi Adrian, thanks for this video.
I am getting this error: Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'original')
Source
components\AnimeCard.tsx (25:51) @ original
It seems that image data is missing or undefined, the link is broken.
You started with server action but showed react server component (RSC) functionality. Data fetch on server side is based on RSC. Server Actions is completely different and is used for data mutations on server. Try to show a client side component with use client directive directly mutating the DB using a inline function that has a use server directive inside that functions boundary. That will be a good example of react server action.
Project shows both the ways of using server action from the client (check LoadMore component) and server components. And in the beginning, it does talk about mutations and stuff through code snippets 👍
Yes! 😊
@@sujatagunale7079 really🤔
I think you couldn't understand that comment.
The data is normally fetched from the server it is not server action.
*But still a great video.* 💖💖
@@dev-akeelthankyou
Live Long Brother.
Same to you!