🌟 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

@javascriptmastery

6 ай бұрын

Amazing recap!

This is the kind of video that sorts all of the issues and explains properly. Awesome Project!

@javascriptmastery

6 ай бұрын

Thank you so much!

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!

@javascriptmastery

6 ай бұрын

More to come!

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. 💯💯💯

@javascriptmastery

6 ай бұрын

Thank you, enjoy!

Thank you so much, need more of this. You explain the concepts in an easy way. Thanks

Excellent little project with explanation of concepts! I would like to have more content like this to improve frontend concepts ! Thank you Adrian & JSM

@javascriptmastery

6 ай бұрын

Thanks, will do!

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!

@javascriptmastery

6 ай бұрын

Best of luck!

The concept of Server Action became clear thanks to this video. Thanks Adrian 👏🏼👏🏼

The way you explained things is Just Amazing. This video is really a piece of work

@javascriptmastery

6 ай бұрын

Thank you!

perfect video length packed with valuable knowledge thanks

What a great short project, it works like magik. Hope to see much more.

Finally I have something to do for the next two weeks! Thanks JSM.

@javascriptmastery

6 ай бұрын

Enjoy!

Amazingggg! Was literally waiting for you to upload a video where you use framer motion!

@javascriptmastery

6 ай бұрын

It's here! 😊

really helpful, i was struggling with infinite scroll functionality

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

@javascriptmastery

5 ай бұрын

You got it!

this is great, simply and very useful class. Very required format nowadays) Show must go on!!! Thank you so much!!

@javascriptmastery

6 ай бұрын

You're very welcome!

very helpful , thank you for in detail knowledge

2 years later, I am still Here loving the content 🎉❤

@javascriptmastery

6 ай бұрын

Thank you so much! ❤️

@serxeoworld5773

6 ай бұрын

Did you get hired?

@alexanderchepkiyeng4853

6 ай бұрын

@@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 🔁

@franukito

6 ай бұрын

sir do you live in year 2025? salutations from year 2023

@AkashhGuptaa

5 ай бұрын

​@@franukitohe means he's a old sub and still watches the content frankfurt dickson

Wow, I'm so impressed of your websites!

@javascriptmastery

6 ай бұрын

Thank you

Love your way of Explaining

nobody makes me feel motivated to code than this guy on the leadup to the coding, well done

@javascriptmastery

6 ай бұрын

Just do it!

This was amazing!!

prefer like this, under 1 hours, easy to understand, love it ❤❤❤❤

@javascriptmastery

5 ай бұрын

Glad you liked it!

I love it. Thanks, a lot!

@javascriptmastery

6 ай бұрын

I'm glad to hear that! :)

Great video 🎉

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.

@Hirijinitus

Ай бұрын

Me too. I thought use client would be inherited by the children.

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...

@javascriptmastery

6 ай бұрын

I will try my best

Love you adrian for putting my suggestion to the video itself 😭😭😭😭❣️

@javascriptmastery

6 ай бұрын

Yess, for you :)

really helpful!! please do make this types of videos

@javascriptmastery

6 ай бұрын

More to come!

Nice bro, Brazil thanks you

Great video as always.

@javascriptmastery

6 ай бұрын

I appreciate that

Thank you for another tutorial!

@javascriptmastery

6 ай бұрын

My pleasure!

Very good video!! Looking for more!

@javascriptmastery

6 ай бұрын

More to come!

Crash courses are awesome.. please do more of these concept based videos

@javascriptmastery

6 ай бұрын

Will do

Your videos are amazing

@javascriptmastery

6 ай бұрын

Thank you so much!

thanks for nice video!

Great! Please more of this type of videos. Thank You

@javascriptmastery

6 ай бұрын

Will do! 😊

Thanks a lot 🎉 Adrian

@javascriptmastery

6 ай бұрын

Thanks! 😊

thank you master ❤

thank you so muxh ❤

Delicious ^^ Merci !

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.

@javascriptmastery

5 ай бұрын

Thanks for the idea!

Well done!

Its an amazing day when JSM uploads a video 😉

@javascriptmastery

6 ай бұрын

Thank you! 😊

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)

As a anime lover, really excited to built this project.

@javascriptmastery

6 ай бұрын

Enjoy! 😊

Thank you!

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

@javascriptmastery

6 ай бұрын

Any time!

“nextJs becoming php” is the perfect summary of my concerns with all the new jazz

@academai11

3 ай бұрын

'use php'; coming soon...

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!

@javascriptmastery

6 ай бұрын

Great idea! 😊

Good stuff. Much appreciated! Anything on Payload CMS planned?

@javascriptmastery

6 ай бұрын

In 5 days!

Thank you so much.

@javascriptmastery

6 ай бұрын

Thank you!

Yes , pls do more of these videos

@javascriptmastery

6 ай бұрын

Will do

Wow, amazing! Thanks for this @adrian

@javascriptmastery

6 ай бұрын

You got it!

Thanks ADRIAN

@javascriptmastery

6 ай бұрын

You got it!

Thanks 🎉

@javascriptmastery

6 ай бұрын

Thank you!

yes i want that simple apps with more focused on learning

Boss! Love You.❤

@javascriptmastery

6 ай бұрын

Boss! 😊

Perfect Tutorial

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;

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 👌

@dev-akeel

6 ай бұрын

Sir can you please mark the AnimeCard component with "use server" directive and reply here with what you have, everything working fine or error..?

@javascriptmastery

6 ай бұрын

That's a great observation

perfect as always....

@javascriptmastery

6 ай бұрын

Thank you so much 😀

Finally😆small project but great🤩

@javascriptmastery

6 ай бұрын

Yes! 😊

great excellent plz make more project on server action

@javascriptmastery

6 ай бұрын

Will do!

it's amazing, need more videos like this ?

@javascriptmastery

6 ай бұрын

Great

Wow Next 14 with framer motion ❤

@javascriptmastery

6 ай бұрын

Yess! :)

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

@calvinwilliams729

4 ай бұрын

Good

I'm just waiting for your tutorial 😊

@javascriptmastery

6 ай бұрын

Which one?

yes do more tutorials like this one

@javascriptmastery

6 ай бұрын

Will do!

G.O.A.T , one love from Nigeria.

@javascriptmastery

6 ай бұрын

Greetings to Nigeria!😊

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🙏❤️

@javascriptmastery

6 ай бұрын

Maybe one day!

Next.js is just awesome❤

@javascriptmastery

6 ай бұрын

Yess!

Bro casually showed us how to render server side components inside a client side component!

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!

@javascriptmastery

6 ай бұрын

Maybe in the future :)

perfect

Big fan sir ❤

@javascriptmastery

6 ай бұрын

Thank you ❤️

omg next 14 already jesus

@javascriptmastery

6 ай бұрын

Yes, embrace it!

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

@javascriptmastery

6 ай бұрын

Appreciate it

yo, what vscode extension u r using for icons?

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.

Many thanks for your tutorials 👍 Is it correct to say that: - the fetch on the home page server-component is done at built-time ? - and then all subsequent fetch from LoadMore client-side component are made at run-time, but not from the client as would do a "traditional" fetch in a React component, but rather on the server, thanks to the "use server" directive in the fetchAnime ("action") file ?

@FrancescoArosio

5 ай бұрын

As a newbie, I got to the same your conclusions. If I npm run build it, the first results from homepage are statically hardened into html static files. Maybe removing it from homepage should "abuse" immediately of the LoadMore 'trigger' to dynamically ask server to fetch new data as page 1 too (also changing the prop page to init val 1 in LoadMore). As per subsequent calls by LoadMore, yes - the fetch is run by the server, but the client is still POST-ing a request to the server, instead of fetching data directly from API server. This is useful if you have "private" keys to query target APIs or some internal backend/datasource you don't want to make publicly accessible, or you don't want to write different APIs from scratch.

I coded the same as you did but after it fetched the data of the first page, after I scrolling down for adding more list of animes , it is giving failed to fetch data. status code : 429 why??? how can I fix it??

Thank you so much for your amazing tutorials. May I have a request?! I want to code an admin interface for my Next.js app with Tailwind css and Typescript. However I don't know how to do it. I know you are busy, but can you consider making a tutorial for it in the future? Thank you in advance❤

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 .

@javascriptmastery

6 ай бұрын

You can do it!

what plugin are u using for the autofill?

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.

@sujatagunale7079

6 ай бұрын

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 👍

@javascriptmastery

6 ай бұрын

Yes! 😊

@dev-akeel

6 ай бұрын

@@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.* 💖💖

@sanjay261982

6 ай бұрын

​@@dev-akeelthankyou

One point. If you setData and use data as useEffecct dependency, then it will call infinite time, 'cause each time it is setting setData and each time it will call. Please tell me if I'm wrong.

Howdy, What tools do you use to create your animated presentations?

Sir, can you please make a course on how to use preact signals with next js?

@javascriptmastery

6 ай бұрын

Amazing idea!

Great video! I really enjoyed the content. Your VS Code setup looks fantastic! Could you please share the font and theme you're using? I'm looking to improve my coding environment, and your setup caught my eye. Thanks in advance, and keep up the excellent work !

@javascriptmastery

6 ай бұрын

Fira code, catppucin

How come at the end you can see the next line of cards already loaded in before the ones on top of them animate.

Awesome course as always, thanks. Any chance the blockchain/nft course can be updated ? It is a really good time to learn blockchain programming and its a shame ur course is outdated.

@javascriptmastery

6 ай бұрын

Unfortunately, no.

@dev-akeel

6 ай бұрын

Sir is always up to date he knows which course is best 💖 He does research before creating content. And you say what you like.

does it means with these server action, there is no need to create api in server where this leads inconvenient where you are building web, mobile app which sharing the same function(previously handle by api call)?

@javascriptmastery

6 ай бұрын

Yes

Which extension did you use for code suggest

My mentor, ❤ hey there!

@javascriptmastery

6 ай бұрын

Hi ❤️

I did everything as you but I have to make AnimeCard client side otherwise it's giving me the createContext error... why

Que version de framer motion uso ?.

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.