Download "Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations"

"videoThumbnail Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations

0:00

Server Actions Crash Course

9:32

Implement Server Actions

20:40

Infinite Scroll in Next 14

29:10

Framer Motion with Next 14

38:10

Summary & Recap

Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, Stripe

Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, Stripe

Channel: JavaScript Mastery

Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

Channel: JavaScript Mastery

Build and Deploy 4 Modern React Apps and Get Hired as a Frontend Developer | Full 10-Hour Course

Build and Deploy 4 Modern React Apps and Get Hired as a Frontend Developer | Full 10-Hour Course

Channel: JavaScript Mastery

Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

Channel: JavaScript Mastery

Build a Portfolio Website With Next JS, Tailwind CSS & Framer Motion

Build a Portfolio Website With Next JS, Tailwind CSS & Framer Motion

Channel: Cristian Mihai

Build and Deploy a Modern Next 13 Website With Framer Motion & Tailwind CSS

Build and Deploy a Modern Next 13 Website With Framer Motion & Tailwind CSS

Channel: JavaScript Mastery

Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React

Beginner Three.js & GSAP Tutorial | Build and Deploy an Apple Website using React

Channel: JavaScript Mastery

javascript

javascript mastery

js mastery

master javascript

framer motion

tailwind css

next js

nextjs portfolio

react js

next 13

nextjs tutorial

portfolio website

react portfolio

framer motion animation

tailwind css portfolio

next14

next 14 tutorial

next 14 project

nextjs14

nextjs 14 project

nextjs 14 server actions

next js server actions

next js server side rendering

next js 14 full course

00:00:00

what the heck is a server action and why

00:00:03

do I even need them if nextjs has API

00:00:06

routes won't they just make my code an

00:00:08

entangled mess and break the engineering

00:00:11

principle called separation of concerns

00:00:14

or even worse is nextjs becoming

00:00:18

PHP have you been losing sleep lately

00:00:21

over these questions if so I've got you

00:00:24

covered in this video not only will I

00:00:27

answer these questions but I will also

00:00:30

guide you in building an app that

00:00:32

answers them in a practical way so you

00:00:34

can finally understand what server

00:00:37

actions are how they work and how to use

00:00:40

them in your apps will build and deploy

00:00:43

a responsive anime website that shows an

00:00:46

infinite list of various anime with

00:00:49

framer motion and using nextjs serers

00:00:53

side features and before we build it

00:00:55

let's do a quick crash course on server

00:00:58

actions even before the crash crash

00:01:00

course I need to let you know that the

00:01:02

Black Friday sale on the ultimate NEX

00:01:04

gs14 course is here you can get 30% off

00:01:09

the original price and it even Stacks

00:01:12

with regional pricing also we just added

00:01:15

two special bonuses to the course one a

00:01:19

guide to Advanced features powerful

00:01:21

libraries and robust security practices

00:01:24

in next1 14 and the other most common

00:01:28

nextjs FAQ

00:01:30

answered both of these bonuses offer

00:01:33

short and precise explanations with the

00:01:36

ability to dig deeper into it with manyi

00:01:39

projects so if you want to enroll check

00:01:41

it out before the Black Friday sale ends

00:01:44

this Monday and join Over 2,300

00:01:47

developers who have already joined and

00:01:50

adore it go to jm.pro

00:01:54

next4 or click the link in the

00:01:56

description to enroll but with that said

00:01:59

back to the the crash course not that

00:02:01

long ago right after the release of

00:02:04

server components nextjs released server

00:02:07

actions server actions are functions

00:02:10

that run on the server but we can call

00:02:13

them like any other normal JavaScript

00:02:15

functions to create these server actions

00:02:19

all you have to do is use the use server

00:02:22

flag so a common example of server

00:02:25

actions you may have seen on the

00:02:27

internet might look something like this

00:02:30

there is a client component called app

00:02:32

in which we have a form that's calling

00:02:35

request username function which seems to

00:02:37

be using that use server flag so a

00:02:41

client component is making a call to a

00:02:44

function that is stored inside of a

00:02:46

server what the heck is happening here

00:02:49

it means that this isn't just a function

00:02:51

call a request was actually made to the

00:02:55

nextjs API to call that function it's

00:02:58

just that we can't see them as nextjs

00:03:00

hides it for us so let me take you to

00:03:03

the deployed side of the application

00:03:05

you'll build in this video you see after

00:03:08

the initial load so the first time the

00:03:10

site loads the next data in the network

00:03:13

tab you'll see Local Host click on it

00:03:16

and you'll notice that it's a post

00:03:18

request with some payload and it's

00:03:21

specified as next action under the hood

00:03:25

whatever we write inside a function

00:03:27

labeled as use server is turned into an

00:03:30

API with the post method that sounds a

00:03:33

bit confusing right not a lot of people

00:03:35

talk about this but today you and I are

00:03:38

going to dig deeper in short we're doing

00:03:41

this we're making a regular fetch API

00:03:44

call from client to server but nextjs

00:03:47

abstracts this from us so you might

00:03:50

think if both are the same thing why

00:03:53

should I ever use server actions well

00:03:56

first of all your code is going to have

00:03:59

less code code right we need to write a

00:04:01

lot more code for an API route versus a

00:04:04

server action with server actions we

00:04:07

focus on the business logic getting data

00:04:10

from the form and doing the database

00:04:13

operations with API you not only have to

00:04:16

make a request from a client yourself

00:04:19

but you also need to create an API on

00:04:21

the server where you listen to these

00:04:23

requests from a client double the work

00:04:26

also there's no API we don't have to

00:04:29

create any kind of apis with server

00:04:31

actions since NEX GS will handle it

00:04:34

automatically for us that's great but

00:04:37

this is also a problem with server

00:04:40

actions as you have seen all that server

00:04:43

actions basically do is make a post

00:04:45

request but we don't really have control

00:04:48

over that request nextjs does it for us

00:04:52

so we could run into some compatibility

00:04:54

issues in case you're developing apps on

00:04:56

desktop or mobile in that case using

00:05:00

server actions doesn't make sense at

00:05:02

least right now that's because updating

00:05:04

a server action endpoint multiple times

00:05:07

for desktop and mobile and web is both

00:05:10

risky and unnecessary hopefully versell

00:05:13

does something about that soon but if

00:05:15

you develop just web apps you should be

00:05:17

good another reason why we want to use

00:05:20

server actions is that they are going to

00:05:22

result in less client side code now that

00:05:25

we're handling the database calls or

00:05:27

business logic directly we can ship less

00:05:31

client side code this would mean that

00:05:33

server actions would work even if

00:05:35

someone disables client side JavaScript

00:05:39

to show you what I mean let me take you

00:05:41

back to the app we're building today for

00:05:43

now I will comment out frame or motion

00:05:45

animation on the cards as they do need

00:05:48

client side browser interactions but

00:05:50

once we disable that everything is

00:05:52

server side so we can open up developer

00:05:55

tools disable JavaScript from

00:05:57

preferences and reload you'll see that

00:06:00

we can still see the first few elements

00:06:02

in the page Isn't that cool but what

00:06:05

about that infinite spinner well it

00:06:07

won't show up as its logic depends on

00:06:10

browser functionality it's a pure client

00:06:13

component so what's the point of all of

00:06:16

this well understanding this means that

00:06:19

we're shipping less client side code

00:06:22

offloading the burden of processing

00:06:24

client data will mean our pages will

00:06:26

load faster they'll respond better and

00:06:30

thus server engines will favor them it

00:06:32

will further improve core web vitals

00:06:35

crawl budget craw ranking and ultimately

00:06:38

the user experience if your website

00:06:41

works well it could also mean more

00:06:43

people doing what we want them to do

00:06:45

like buying something or signing

00:06:48

up and finally another big Pro of using

00:06:51

server actions is improved DX which

00:06:55

stands for developer experience by

00:06:58

directly focusing on the business

00:06:59

business logic we can ship code faster

00:07:02

and therefore benefit ourselves with

00:07:04

some well-needed rest or downtime like

00:07:07

watching anime reading books or playing

00:07:09

some games or even the client or company

00:07:12

we're working for as you'll be able to

00:07:14

develop things faster in a better way

00:07:17

but even after all of this you still

00:07:20

might have some questions let me take a

00:07:22

guess are you wondering if there is only

00:07:25

one way of using server actions like

00:07:28

through client components

00:07:30

the answer is no we can use server

00:07:32

actions inside server components as well

00:07:36

how well the same way as before we

00:07:39

declare a server component as you can

00:07:41

see we don't have the used client at the

00:07:43

top and we simply fetch a used server

00:07:46

action called Fetch

00:07:48

anime now you might be thinking wouldn't

00:07:51

that be a post method from a server

00:07:53

component for fetching anime well let's

00:07:56

go back to our application and see

00:07:57

what's happening if you if you open up

00:07:59

the network Tab and find Local Host

00:08:02

again you'll see that it's a get method

00:08:04

where we're getting the whole HTML page

00:08:07

so since the function we're using is a

00:08:09

server action and so is our whole

00:08:12

component page it's a server component

00:08:14

everything gets executed on the server

00:08:17

side and turned into an HTML page which

00:08:20

is then served to the user in this case

00:08:22

the client it all happens on the server

00:08:26

but if you notice the very first

00:08:28

infinite scroll loader and see the

00:08:30

network tab you'll see that indeed it is

00:08:33

a post method requesting another set of

00:08:36

documents from our API this infinite

00:08:38

scroll loader is a client component

00:08:41

where we're calling the same server

00:08:43

action we'll see that live in a few

00:08:45

minutes but the whole point was that you

00:08:47

can still use server actions to get a

00:08:49

list of data however they're more

00:08:52

powerful than that server actions allow

00:08:55

you to do mutations meaning create

00:08:58

update and delete actions

00:08:59

on top of the typical read together

00:09:02

making up the complete crowd operation

00:09:04

set o that was a lot right but hopefully

00:09:08

now you have a better idea of how server

00:09:11

actions work at least in theory but

00:09:14

finally the moment you've been waiting

00:09:16

for is here let's see how we can use

00:09:19

those server actions in both client and

00:09:21

server components as we've learned as

00:09:24

well as Implement infinite scroll and

00:09:27

use framer motion on top of that grab a

00:09:30

cup of coffee and let's do it now as

00:09:32

I've hinted at the start to demonstrate

00:09:35

all of these great nextjs Concepts and

00:09:37

features you'll build anime Vault now

00:09:41

whether you are an anime fan or not it

00:09:44

doesn't really matter think of these as

00:09:46

cards as documents of sorts some data

00:09:50

that's coming back from a database that

00:09:51

you have to load in a nice Manner and

00:09:54

then animate notice how smooth it is

00:09:57

they slowly load one after another and

00:09:59

you can keep scrolling indefinitely

00:10:02

that's what you'll build and on top of

00:10:05

this you'll be able to learn great

00:10:07

Concepts so not to waste any of your

00:10:10

time into to focus on what truly matters

00:10:13

which is mastering infinite scrolling

00:10:15

server actions and more I prepared the

00:10:17

entire repo here for you with three

00:10:20

different branches to get started you'll

00:10:22

download just the main branch which for

00:10:24

now just has some static data right here

00:10:27

no API integration no logic no server

00:10:31

actions nothing and then together we're

00:10:33

going to build on top of that so go to

00:10:36

code download it using GitHub desktop or

00:10:39

simply copy this URL once you do that

00:10:43

open up an empty Visual Studio code

00:10:44

editor go to view and then terminal then

00:10:49

type get

00:10:50

clone paste the link and then type the

00:10:53

folder name in this case we can do anime

00:10:57

volt press enter it's going to clone it

00:11:00

press CD anime Vault move into it and

00:11:05

then type code dot this is going to open

00:11:08

up a new Visual Studio code window right

00:11:11

there you can close the old one and make

00:11:14

this go full screen as you can see this

00:11:16

is a typical nextjs application here we

00:11:20

have the app folder which is the most

00:11:22

important folder of our nextjs app for

00:11:25

you specifically I have also prepared

00:11:27

theore dat. s which is a simple array of

00:11:31

about 20 or so animes right

00:11:34

here after that we also have our favicon

00:11:37

we have our global. CSS and then we have

00:11:40

our layout within the layout we import

00:11:43

the hero as well as the footer hero is

00:11:46

typically known as a header the first

00:11:48

thing that you see inside of an

00:11:49

application we have a font some metadata

00:11:53

and we just show the children within it

00:11:56

here the children typically refers to

00:11:59

whichever page we're currently on and in

00:12:01

this case it's always going to be this

00:12:03

page right within the app as that's the

00:12:06

only page that we have right now it

00:12:08

might be a bit hard to read because

00:12:10

there's a lot of red squiggly lines

00:12:12

happening so what do you say that we

00:12:14

open up our terminal and then run mpm

00:12:18

install this is going to install all of

00:12:20

our dependencies and when I say all of

00:12:23

our dependencies it sounds a bit scary

00:12:25

because it sounds like there's too many

00:12:27

but there really is is not if you go to

00:12:30

our package.json you can notice that

00:12:33

this is as Bare Bones as it gets we have

00:12:36

react version 18 react Dom 18 as well

00:12:39

and then nextjs 14 plus as well as some

00:12:43

Dev dependencies like typescript so

00:12:46

we're going to do this all from scratch

00:12:49

now another thing that might look a bit

00:12:51

weird and let me Zoom this out a bit is

00:12:54

that we have those three dots right here

00:12:56

this is a cool new extension that I

00:12:58

found that hides your Tailwind classes

00:13:00

when you don't want to see them but only

00:13:02

when you click them it's going to show

00:13:04

them to you in case you're wondering the

00:13:06

name of the extension is in line fold

00:13:09

great with that said let's go ahead and

00:13:12

run mpm run

00:13:14

Dev and let's press control click to

00:13:17

open it up on Local Host

00:13:19

3000 and we are ready to explore the

00:13:22

diverse Realms of anime magic or are we

00:13:27

if we scroll down we can see all of the

00:13:29

anime here but can we really as you can

00:13:33

see we have this loader here and it

00:13:35

seems like our app is broken but it's

00:13:37

not really broken it's just waiting for

00:13:40

you to learn how to do server actions

00:13:42

and then Implement them on this app and

00:13:44

hopefully many many more in the future

00:13:47

so that's exactly what we're going to do

00:13:49

next we're going to transition our app

00:13:52

from this basic demo data onto real API

00:13:57

data fetching using server

00:13:59

actions so to start implementing our

00:14:02

server actions we're going to create a

00:14:04

new file called action. TS right here

00:14:09

within our

00:14:10

app within here I'm going to use the use

00:14:14

server directive this means that

00:14:17

whatever is written in this code will be

00:14:19

executed as a server action then the

00:14:23

only thing this file is going to have is

00:14:25

going to be one function const fetch

00:14:29

anime and then it's going to be just a

00:14:31

typical Arrow function this function is

00:14:34

going to have only one goal and that is

00:14:37

to make a call to the API and return the

00:14:40

data so we can say something like const

00:14:43

response is equal to a weight of course

00:14:48

since we're using a weight we have to

00:14:49

make this function

00:14:51

asynchronous and we can say fetch fetch

00:14:55

is just a built-in JavaScript function

00:14:57

to fetch data from a apis or websites

00:15:00

and we can pass in a URL which we want

00:15:03

to fetch from in this case we can type

00:15:06

it out together it's going to be

00:15:08

https colon SL SL shikimori okay that's

00:15:13

a good

00:15:15

one1 SL API SL Animas with an S at the

00:15:21

end and this is it this is the barebones

00:15:23

API so let's try fetching this first and

00:15:26

see what it returns we can do a cons

00:15:29

data is equal to await response. Json

00:15:34

whenever you're using fetch you have to

00:15:36

rund the. Json to extract the data from

00:15:39

it and finally we can return the data as

00:15:43

simple as it gets now let's immediately

00:15:46

console.log the data right here before

00:15:49

we return it our app is running on Local

00:15:51

Host 3000 we are using this fetch anime

00:15:55

but we're not going to see any kind of

00:15:57

conso log because we have to use it

00:15:59

somewhere this right here is just a

00:16:01

function declaration not a function call

00:16:04

so that means that we have to export

00:16:06

this function by running the export

00:16:08

keyword in front then we can use it

00:16:11

somewhere and in this case it's going to

00:16:13

be within our primary homepage right

00:16:17

here so what we can do at the top is say

00:16:20

cons data is equal to

00:16:24

await fetch anime and we can immediately

00:16:28

import it right so and make a call or

00:16:31

even simpler for now we don't even have

00:16:33

to declare it to a specific piece of

00:16:35

data we can just call it that's the only

00:16:37

thing we want because we're after this

00:16:39

conso log of data so let's open up our

00:16:43

terminal and immediately you can see

00:16:46

that it called the API and it returned I

00:16:50

think the first anime that's there just

00:16:52

a single one with the ID or maybe it's

00:16:55

even a random one so if I do it another

00:16:57

time now it's it gives me the same one

00:16:59

so it Returns the first one in a list

00:17:01

but now we wanted to give some

00:17:03

additional pieces of data right here so

00:17:05

let's modify our API call we can do that

00:17:09

by passing some query parameters you can

00:17:12

do that by adding the question mark and

00:17:15

then say page is equal to for now we can

00:17:18

set it to one but we can be smart ahead

00:17:21

of time and immediately know that this

00:17:24

is going to be some kind of a function

00:17:26

parameter that's going to be coming into

00:17:28

this function so we can say page of a

00:17:31

type number and then here now we can

00:17:35

turn this into a template string and we

00:17:38

can use this variable off page alongside

00:17:42

page we also want to pass limit so we

00:17:45

can say and limit is equal to and then

00:17:49

we can Define the max limit we can do it

00:17:52

right here within the code set it to

00:17:54

something like eight now if you save the

00:17:56

file the form is nicely going going to

00:17:58

put it in a new line and the last

00:18:01

parameter that we need is and order is

00:18:04

equal to

00:18:06

popularity so now if we open up the

00:18:09

terminal once again and go back to page

00:18:12

and you can see tabs script is

00:18:14

immediately saving us from some trouble

00:18:16

later on it lets us know that it

00:18:19

expected one argument but got zero an

00:18:22

argument for page was not provided once

00:18:25

again I know that some of you don't like

00:18:27

using TP script 2 much but you can see

00:18:29

how even in simpler apps it starts

00:18:31

paying off because it lets you know that

00:18:33

something is wrong so let's pass number

00:18:35

one as the page that we are after let's

00:18:38

save it and if you open it up you can

00:18:41

see inv valid parameter page value one

00:18:44

and limit 8 must be a number between one

00:18:46

and this is

00:18:48

100,000 so let's see why that is

00:18:51

happening it looks like I used a dollar

00:18:54

sign right here instead of an end sign

00:18:56

so we definitely want to fix that and

00:18:58

now we're good and as you can see we get

00:19:01

eight anime from the page one this is

00:19:04

great we're getting some data so now

00:19:07

instead of Simply consol logging that

00:19:08

data we of course want to return it

00:19:11

which is exactly what we are doing right

00:19:13

here so going back to our page we can

00:19:17

now remove this declaration of getting

00:19:19

the fake data and we can indeed say cons

00:19:23

data is equal to a weit fetch anime this

00:19:27

time we're going to render the anime

00:19:29

cards so if we go back and reload you

00:19:33

can see that something is happening so

00:19:36

let's fix it we can see that our page is

00:19:39

rendering the anime card to which we're

00:19:42

passing the index and it would be nice

00:19:44

of us to define the type for this as

00:19:45

well in this case number with that said

00:19:48

we know we're passing the entire item to

00:19:51

our anime card so if we move into it we

00:19:54

can see where we're rendering the image

00:19:56

in this case if you open up your ter

00:19:58

terminal you can see that image has the

00:20:01

original but this is only the end of the

00:20:04

path we're still missing the entire

00:20:06

start of the API meaning the domain name

00:20:09

so to modify it we can make this a

00:20:11

template string that starts with https

00:20:16

colon shikimori do1 and then we can put

00:20:20

this as the dynamic part of this

00:20:22

template string and close it like so if

00:20:26

we now save this and go back the images

00:20:29

are back so now what we have done so far

00:20:32

is we have received the first eight

00:20:34

images this time from the real API but

00:20:37

now is where the magic is going to

00:20:39

happen we have to make this infinite

00:20:41

loading work to render more anime cards

00:20:45

as we scroll down now let's go where the

00:20:48

magic happens and that is not the anime

00:20:51

card not the homepage not even the

00:20:54

server action but it is our component

00:20:58

called load more Yep inside of this

00:21:02

component we're going to load more pages

00:21:05

as they come and yes I use the word page

00:21:09

even though technically nowhere on the

00:21:11

screen you can see numbers of pages but

00:21:14

still the premise is the same we

00:21:17

paginate normally as you usually would

00:21:20

but this time as we scroll down we load

00:21:23

a new page so the idea is still the same

00:21:26

but it's how we approach it the differs

00:21:29

so the primary difference here is

00:21:31

instead of clicking the next button

00:21:34

we're going to trigger the next page

00:21:36

once we scroll down to a specific point

00:21:38

of the screen in this case to the end of

00:21:41

the screen and the question now is how

00:21:44

are we going to know how far our user

00:21:46

has scrolled thankfully there is a

00:21:48

phenomenal mpm package that has over 1.3

00:21:52

million weekly downloads that does that

00:21:55

for us the only thing we have to do is

00:21:57

install it and then just use in view

00:22:00

that's about it it's going to tell us

00:22:02

once we reach a specific point so going

00:22:05

back to our app we can open up our

00:22:08

terminal without stopping this one I can

00:22:10

press this icon here to open up another

00:22:12

one side by side and then I can run mpm

00:22:16

install react D intersection Das

00:22:20

Observer this is a really lightweight

00:22:23

package and it's only a helper to do

00:22:26

what we need to do everything else

00:22:28

you'll do on your own so now that we

00:22:30

have it how do we use it well you can

00:22:33

simply say import use in View and that's

00:22:37

going to be coming from react

00:22:40

intersection Observer how to use it well

00:22:44

you just call it right here const it

00:22:46

gives us a ref and it gives us an in viw

00:22:49

property which is equal to use in

00:22:53

view that's it now see how this starts

00:22:57

with use

00:22:58

which means that it is a hook so now if

00:23:01

we were to save this file our app would

00:23:03

broke and I knew that even before I

00:23:06

clicked save why well that's because you

00:23:10

cannot use hooks on the server side so

00:23:13

that means that we have to convert our

00:23:15

component to be a client side component

00:23:18

by giving it a use client

00:23:21

directive now our page works and still

00:23:24

the entire page is server side rendered

00:23:27

only this little button is rendered on

00:23:29

the client side now we want to attach

00:23:33

this ref to something we want to attach

00:23:35

it to this div at the bottom by giving

00:23:38

it a ref equal to ref so now it's going

00:23:41

to know once we scroll to it so let's

00:23:44

figure out how it works once the ref has

00:23:47

reached something happens so let me

00:23:49

demonstrate we're going to use the use

00:23:52

effect hook right here which is usually

00:23:54

getting run once something happens right

00:23:57

so we can declare a typical callback

00:24:00

function right here with a dependency

00:24:02

array that's going to track the changes

00:24:04

in the in viw variable and we of course

00:24:07

have to import use effect coming from

00:24:09

react which we can do right here at the

00:24:11

top by saying import use effect coming

00:24:15

from react great so now in here we can

00:24:19

put a simple alert saying load more

00:24:23

which is exactly what we want to do but

00:24:25

there's one more thing we have to do we

00:24:27

have to wrap this alert with the if in

00:24:31

View Property so only if we are in view

00:24:35

then we want to load more or in this

00:24:37

case just alert that we do want to load

00:24:40

more so now if we go here and if we

00:24:43

slowly scroll down once we hit that

00:24:46

scroll bar you're going to notice that

00:24:48

we got an alert load more which makes it

00:24:51

a perfect time to load the next page of

00:24:54

our anime cards so how are we going to

00:24:57

do it

00:24:58

well right here we can call the same

00:25:01

server action we have created before

00:25:04

fetch anime coming from at slapp SL

00:25:08

action we can call it and we need to

00:25:11

pass a page number in this case it's

00:25:13

going to be two right then we can use

00:25:16

the do then to get a

00:25:18

response we can call it res and then we

00:25:22

want to update the data that we want to

00:25:24

show which we can use the state for

00:25:28

so here we can say use State and use

00:25:30

that state snippet call it data and set

00:25:34

data which is at the start going to be

00:25:37

equal to an empty array and of course we

00:25:40

have to import use State coming from

00:25:43

react now once we get the response we

00:25:47

can simply say set data and here's the

00:25:49

thing we not only want to update the

00:25:52

data but we want to keep track of all of

00:25:55

the data we've had before so for that

00:25:57

reason reason we want to return an array

00:26:01

spread all of the existing data and then

00:26:04

to it add all of the data from the

00:26:06

response by spreading it by saying do do

00:26:09

dot rest now tapescript is going to

00:26:12

complain that we cannot add these

00:26:14

elements to a simple array so let's

00:26:17

define the type as well which we can do

00:26:19

here by using this syntax and then say

00:26:22

anime

00:26:24

prop which we can import automatically

00:26:26

from that/ anime card and say you want

00:26:29

to get an array of anime props this way

00:26:32

tab script knows exactly what it's

00:26:34

getting while we're here we can also see

00:26:37

that our linter is complaining that it's

00:26:39

missing data as a prop so yes if the

00:26:42

data changes we do want to recall this

00:26:44

use effect so we can add it to the

00:26:46

dependency array and now there's one

00:26:48

point I want to make we are already

00:26:51

fetching this data on the homepage you

00:26:54

can see we're using the fetch anime and

00:26:56

then we display it but in load more we

00:26:59

want to display page two 3 4 and so on

00:27:02

so to do that we can simply copy this

00:27:05

entire section from the homepage and

00:27:07

then paste it right here inside of this

00:27:10

react fragment and then of course don't

00:27:13

forget to import the anime card so this

00:27:16

section is for all of the subsequent

00:27:19

pages from page one okay let's now save

00:27:23

it and let's check it out in the browser

00:27:26

going back to the side we of course know

00:27:28

that our first page is already here but

00:27:31

as we scroll down let's see what

00:27:34

happens oh you saw the new line appeared

00:27:37

and then another new line which means

00:27:39

eight new anime which is exactly equal

00:27:43

to the second page but now as we scroll

00:27:45

further you're going to start noticing

00:27:47

that the images repeat so that's not

00:27:50

quite good right to fix that we have to

00:27:52

implement a new variable which is Page

00:27:56

we have to keep track of the page we're

00:27:58

currently on so let's declare it right

00:28:01

here at the top of our component let

00:28:04

page and we're going to start with a

00:28:06

number two so what is the exact reason

00:28:09

why we put it outside and not as a state

00:28:11

here well you might have as well use the

00:28:15

use State snippet and then just use the

00:28:17

page and set page but in this case it's

00:28:20

not even necessary we can have just a

00:28:23

simple variable and update it as we

00:28:25

normally would so here below the data

00:28:28

once we get to the end we can actually

00:28:30

increment the Page by one and here we

00:28:34

can use the real page number so every

00:28:37

time that we get into a new view we can

00:28:39

show and fetch a new page so let's test

00:28:42

it out back on our page I'm going to

00:28:45

scroll down

00:28:47

first second and then we have third

00:28:51

fourth and so on so this is actually

00:28:53

working but it seems like nothing is

00:28:56

happening because it just loads

00:28:57

instantly if I go a bit faster you can

00:29:00

see loading but then that doesn't look

00:29:02

so good which is the exact reason why we

00:29:05

want to implement some animations so now

00:29:08

would be the perfect time to do that to

00:29:11

add animations to our Simple app we're

00:29:13

going to use framer motion the most

00:29:16

popular animation library for react and

00:29:20

nextjs but there are many questions on

00:29:22

how to use this with nextjs considering

00:29:26

that everything is Serv side rendered

00:29:28

and we want that how can we achieve

00:29:30

these client side rendered animations

00:29:33

how can we get the best of both worlds

00:29:36

well that's exactly what I'm going to

00:29:37

teach you right now so let's open up the

00:29:40

terminal one more time and let's run mpm

00:29:43

install framer Das motion the second and

00:29:47

the last package we're going to use in

00:29:49

this video now that we have it we can

00:29:52

navigate over to our anime card because

00:29:56

we want to apply that animation directly

00:29:58

to each individual card but we have a

00:30:01

couple of problems here in react doing

00:30:04

that would be super simple but in nextjs

00:30:07

due to the fact that we're using serers

00:30:09

side rendering it gets a bit tougher let

00:30:12

me explain why the way you would use

00:30:15

framer motion would be simple you would

00:30:18

just say import motion from framer

00:30:23

motion and this exposes all the elements

00:30:25

that you can use like divs images but

00:30:28

they're animated so now if you want to

00:30:31

turn this div into an animated div what

00:30:33

you could do is just say motion.

00:30:37

div and then you can provide it a couple

00:30:40

of props they're going to make it all

00:30:42

work so in this case those props are

00:30:45

going to be as simple as saying

00:30:48

variance is equal to variance and we can

00:30:51

Define them right here at the top by

00:30:53

saying const

00:30:55

variance is equal to to

00:30:59

Hidden opacity

00:31:02

Z like this and visible opacity one so

00:31:08

we want to shift it from zero to one we

00:31:12

also want to give it the initial state

00:31:14

which is going to be set to Hidden we

00:31:16

want to give it the animate which is

00:31:18

going to be visible so the only thing

00:31:20

this is doing is it's going from opacity

00:31:22

0o to opacity

00:31:24

1 and then we can Define the transition

00:31:27

by saying transition is equal to delay

00:31:31

is going to be set to let's do 0.1

00:31:35

seconds or let's do one so it's really

00:31:38

obvious we can also do ease which is

00:31:41

going to be ease in out the way that the

00:31:43

animation happens and then we can also

00:31:45

add a duration which is going to be 0.5

00:31:50

seconds finally there is one additional

00:31:52

thing that we can add which is called a

00:31:54

view Port which in this case is going to

00:31:56

be set to zero now if we save this and

00:32:01

go back to application you can see that

00:32:04

we get an error and this is something

00:32:06

that I always like to point your

00:32:08

attention to we are within a serers side

00:32:11

component because we have never said use

00:32:14

client but apparently something is

00:32:16

trying to use context which is not going

00:32:19

to work with a server rendered

00:32:21

component and I'm going to turn this div

00:32:24

into a new component which we're going

00:32:27

to create so even though our app is not

00:32:29

working right now let's fix it we can

00:32:32

fix it by creating a new component right

00:32:35

here called motion div.

00:32:39

TSX inside of here we're going to import

00:32:42

what made us switch the client side

00:32:45

anyway so that's going to be import

00:32:47

motion from framer

00:32:49

motion and we know that for this we have

00:32:52

to turn it into a client side component

00:32:54

so we can say use client the only thing

00:32:58

we're going to do here is we're going to

00:32:59

export const motion div is equal to

00:33:03

motion. div so now the only thing that

00:33:07

is client side rendered is this specific

00:33:10

div nothing else in this anime card so

00:33:13

this parent element right here is going

00:33:16

to be client side rendered and

00:33:18

everything else is going to be children

00:33:19

which are still going to be server side

00:33:21

rendered so what we can do now is we can

00:33:24

replace this with this motion div which

00:33:28

we can import from that/ motion div and

00:33:30

we can keep all of the other props the

00:33:32

same and now if we go back the app again

00:33:36

works the animations work as well but if

00:33:39

you pay close attention there's no use

00:33:42

client directive on top of the anime

00:33:44

card just a little one right here where

00:33:47

we export the functionality from framer

00:33:50

motion now our animations are still not

00:33:52

perfect and we can verify that by

00:33:55

putting our browser side by side side to

00:33:57

our code now if we reload the page you

00:34:00

can notice that there's nothing and then

00:34:02

they all appear at once this is not what

00:34:05

we want to do so thankfully let's verify

00:34:09

where are we calling the anime card from

00:34:12

we're calling it in two places we're

00:34:14

calling it from the homepage where we

00:34:16

pass the index of the element we're

00:34:18

loading and we're also calling it from

00:34:21

load more where we're also passing the

00:34:24

index of that specific card so we can do

00:34:27

a little bit of a trick right here we

00:34:29

can accept that index as props into our

00:34:32

anime card and we can stagger the

00:34:35

animations from every subsequent card

00:34:38

first of all delay is going to be equal

00:34:41

to index times and then a specific

00:34:44

number for example 0.25 seconds so now

00:34:48

to load the first card is going to take

00:34:50

0 seconds because the index is zero the

00:34:53

second one is going to be 0.25 seconds

00:34:55

next one is going to be 0

00:34:57

0.5 and you get the idea so now if we

00:35:01

just reload you can see the first one

00:35:03

loads and then all of the others follow

00:35:06

this is great now you might think that

00:35:09

this is working and it is but if you

00:35:12

start scrolling really really far down

00:35:14

you're going to notice that it's going

00:35:15

to take so much time for these items to

00:35:17

actually load now you can see they're

00:35:19

loading but they're really really slow

00:35:22

so there's a little thing that we can do

00:35:24

to fix it that's because our St

00:35:26

staggering element right here is

00:35:28

applying to the entirety of the elements

00:35:30

we're getting back so it's going to take

00:35:32

more and more time to load them so what

00:35:34

we can do is only apply the Stagger for

00:35:38

that specific batch or that specific

00:35:40

page of elements that come back in this

00:35:43

case what we can do is go back to our

00:35:46

action. TS and instead of it returning

00:35:50

just the data it can return the

00:35:52

components themselves so let's go to our

00:35:54

home and let's copy this this entire

00:35:57

data. map right

00:36:00

here we can then go here and paste it

00:36:03

return data. map anime card then you're

00:36:07

going to notice that we have a lot of

00:36:08

warnings and that's because we are in a

00:36:11

TS file but since we're using some

00:36:13

components we have to rename it to TSX

00:36:16

right here and then we have to import

00:36:19

the anime card from components anime

00:36:21

card as well as the anime prop from

00:36:24

components anime card great so now

00:36:28

instead of just returning the data we're

00:36:30

returning the presentation of that data

00:36:33

as well so there's just two little

00:36:35

things we'll have to do we'll have to go

00:36:37

back to the page and we don't want to

00:36:40

map over it two times now our data

00:36:43

actually already is the content that we

00:36:46

want to display so the only thing we

00:36:48

have to do is fetch the data right here

00:36:52

and then just dynamically render it

00:36:55

because we're already mapping

00:36:57

overhead and we have to repeat the same

00:36:59

thing for our load more component if we

00:37:03

go here we don't have to map over the

00:37:05

data anymore we just have to render it

00:37:08

because the data is already getting

00:37:09

mapped over within our server Action Now

00:37:13

typescript is complaining that it's no

00:37:15

longer getting what it should get so

00:37:17

what we can do is we can just modify the

00:37:19

type by saying export

00:37:23

type this time we're going to call it

00:37:25

anime card is equal to jsx do element

00:37:30

and now we can replace the anime prop

00:37:33

with anime

00:37:34

card and if we save it we're good the

00:37:38

data is here I can close my code and I

00:37:42

can expand my browser so we can admire

00:37:44

it in its full Glory now I'm going to

00:37:47

slowly scroll down we're going to see

00:37:50

that the elements will indeed start

00:37:51

getting animated I'm going to scroll a

00:37:54

bit faster so we can admire all the

00:37:56

animations

00:37:57

as well there we go how cool is this

00:38:01

everything is getting animated we can

00:38:02

see new posts appear this is amazing but

00:38:07

of course it's our code that makes it

00:38:09

possible so if we go back I want to give

00:38:12

you a quick recap of what we have done

00:38:14

everything is happening right here

00:38:16

within our action. TSX where we fetch

00:38:20

the data and then we return it you can

00:38:22

either return it just as data or in this

00:38:25

case we're immediately returning it as a

00:38:27

mapped over page and we can know that

00:38:30

this is a server action because we have

00:38:32

the use server directive on top now

00:38:35

we're using this server action in two

00:38:37

places we're using it right within our

00:38:39

homepage which is bear with me another

00:38:43

server page because it doesn't have the

00:38:45

use client directive we just normally

00:38:47

call it right here and it works like a

00:38:50

charm then we can go to the other place

00:38:53

where we're using it it's going to be

00:38:55

within components load more and now

00:38:58

check this out load more is a used

00:39:01

client directive page meaning a client

00:39:04

side rendered page and we still normally

00:39:07

call this fetch anime the same server

00:39:10

action we're calling in the same way

00:39:12

within our server rendered page which

00:39:14

means that we can call server actions

00:39:17

both within client and server rendered

00:39:19

Pages they're just so powerful finally

00:39:23

you'll learn how to use this in View

00:39:25

Property so once we scroll down we

00:39:27

refetch the entire page and display it

00:39:30

you learn that infinite scroll is

00:39:32

nothing more than just going over the

00:39:34

next page and next page whenever we go

00:39:36

down it's like clicking the next button

00:39:38

for you and you also learned how to use

00:39:42

framer motion within serice side

00:39:44

rendered Pages we have it right here the

00:39:47

only thing you have to do is apply the

00:39:49

use client directive here export that

00:39:51

div and then all the children within

00:39:54

that anime card are going to be server

00:39:56

side rendered although only the motion

00:39:58

div is client side a lot of exciting

00:40:02

stuff and this has been kind of a simple

00:40:04

application to Showcase all the power of

00:40:08

what nextjs has to offer the creators of

00:40:11

nextjs are often releasing these small

00:40:14

apps to teach you different concepts and

00:40:17

this is the example they've done for

00:40:19

partial pre-rendering it is super quick

00:40:21

and loads incredibly nicely if you would

00:40:24

want me to do more of these Simple app

00:40:26

apps but then focus more on explaining

00:40:28

the concepts just let me know down in

00:40:30

the description but of course this is

00:40:33

just the beginning and that little

00:40:35

infinite scroll that we had that you can

00:40:37

see right here is just one example of

00:40:40

phenomenal features that you need to

00:40:42

have in almost all of your new modern

00:40:45

next4 apps which is exactly why I

00:40:48

created a much much larger project than

00:40:51

this one I'm talking Dev overflow this

00:40:55

one specifically has pation not infinite

00:40:58

scroll but it has many other features

00:41:01

you saw the loading there you see

00:41:03

different layouts there's even login

00:41:06

even a dedicated job search page and I

00:41:10

cannot go without mentioning the ability

00:41:11

to create your own stack Overflow

00:41:14

questions count answers and Views have

00:41:17

code blocks answers to those code blocks

00:41:20

and then even the ability to generate an

00:41:23

AI answer and yes you can learn all of

00:41:27

this by enrolling into our ultimate next

00:41:30

gs14 course which right now is on a

00:41:33

crazy Black Friday sale but no matter

00:41:36

when you're watching this video we

00:41:38

always have Regional discounts turned on

00:41:40

as well it is the best course right now

00:41:43

that is completely up to date that can

00:41:45

teach you everything you need to know

00:41:47

about nextjs to use it like these

00:41:50

companies do it's more than just using

00:41:52

it like react you cannot use it like

00:41:55

react you have to embrace all of the

00:41:57

server side principles like we did today

00:41:59

with server actions and more and then

00:42:02

truly use it the way it's supposed to be

00:42:04

used and just a note this entire

00:42:07

application is built entirely on server

00:42:10

actions so if you want to learn them in

00:42:12

more depth this is the best way to do

00:42:14

that and also learn how to make your app

00:42:17

SEO optimized and performant the entire

00:42:21

course has a lot of Deep dive lectures

00:42:23

with special animations like this to

00:42:25

better understand the concepts we have

00:42:28

the build and deploy of the dev overflow

00:42:30

and finally we have active lessons these

00:42:33

are special lessons that test your

00:42:35

knowledge where you have to develop a

00:42:37

feature with our guidance so are you

00:42:41

ready to get started just go to jm.pro

00:42:45

next4 or click the link in the

00:42:47

description I'll see you inside

Description:

Are you curious about Server Actions in Next.js 14? What about infinite scrolling and Framer Motion animations with Next 14? This video will demystify these concepts while building a server-side Next 14 App 🌟 Become a top 1% Next.js 14 developer in only one course: https://www.jsmastery.pro/ultimate-next-course 📚 Materials/References: GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/anime_vault Anime API: https://shikimori.one/api/doc/1.0/animes/index 💻 Join our Discord Community - https://discord.com/invite/n6EdbFJ 🐦 Follow us on Twitter: https://twitter.com/jsmasterypro 🖼️ Follow us on Instagram: https://www.facebook.com/unsupportedbrowser 💼 Business Inquiries: [email protected] Time Stamps 👇 00:00:00 - Server Actions Crash Course 00:09:32 - Implement Server Actions 00:20:40 - Infinite Scroll in Next 14 00:29:10 - Framer Motion with Next 14 00:38:10 - Summary & Recap

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.