2024년. NextJS 14를 배워야하는 이유.

Summary

In this video, the speaker enthusiastically shares their experience upgrading to Next.js version 14, highlighting two groundbreaking features: server components and server actions. The speaker explains how these features enhance the development experience by significantly reducing the amount of code needed, improving app performance, and streamlining data handling without the need for an API. By leveraging server components and server actions, developers can now directly interact with databases and perform secure data mutations, respectively. The speaker also introduces a free 4-hour Next.js course and an updated comprehensive course on building a full-fledged Next.js application, emphasizing the practical benefits and efficiency gains from the latest Next.js features.

Takeaways

• 😃 Next.js is a popular React framework for building fullstack web apps used by major companies like TikTok and Twitch
• 🤓 Next.js 14 introduced server components and server actions which improve performance and developer experience
• 👍 Server components let you render components only on the server which improves performance and security
• 🔒 Server components allow connecting directly to databases without exposing secrets to client
• ⚡️ Use 'useClient' to opt-in to browser rendering when you need interactivity or browser APIs
• 🎉 Server actions let you handle data mutations directly without needing an API endpoint
• 🧙‍♂️ Server actions automatically pass data between frontend and backend securely behind the scenes
• 🛠 UseFormStatus and useFormAction hooks allow displaying status to user during mutations
• 📈 Next.js 14 upgrades like server components can delete large amounts of code
• 🎓 Free 4-hour course and paid Fullstack app course can teach you more about Next.js 14 features

Q & A

What is the main topic of the video script?

The video script is about the latest features of Next.js version 14, specifically server components and server actions.

What are the benefits of using server components in Next.js 14?

Server components allow developers to choose if a component should be rendered only on the server or not. This means the user doesn't have to download and render all the components of the application in the browser, reducing the amount of JavaScript code and allowing developers to delete a lot of code.

What is the significance of server actions in Next.js 14?

Server actions make the developer experience of data mutations, such as creating a user account, incredible. They allow developers to eliminate the need for an API endpoint and fetch code, and instead write the logic directly in the component. Next.js handles passing data between the component and action securely.

What are the hooks available for server actions in Next.js 14?

There are two hooks available for server actions: useFormStatus and useFormState. useFormStatus allows developers to know the state of the mutation and show the user a loading message or errors, while useFormState allows for more structured responses in case of errors.

What additional features of server actions are mentioned in the script?

Server actions have cool functions to revalidate data, check cookies, or even redirect the user when the mutation is finished.

What free resources are mentioned for learning Next.js?

The script mentions a free 4-Hour course with 32 videos that the creator has uploaded, as well as a Carrot Market clone coding course that is being updated to Next.js version 14.

What technologies are used in the Carrot Market clone coding course?

The Carrot Market clone coding course uses technologies like Tailwind, Prisma, PlanetScale, CloudFlare, and more. It also covers user authentication, file uploads, user profiles, reviews, CloudFlare Workers, and durable objects for serverless realtime experiences.

What is the recommended course for learning more about Next.js and taking advantage of its features?

The script recommends the Carrot Market clone coding course for learning more about Next.js and squeezing the framework from all its features.

What is the benefit of using the 'useClient' directive in Next.js 14?

The 'useClient' directive allows developers to specify components that need to use APIs of the user's browser, such as local storage or geolocation, or components that need to use event listeners for interactivity. It tells Next.js that the component should be hydrated in the user's browser.

What is the overall tone of the video script?

The overall tone of the video script is enthusiastic and excited about the new features and developer experience improvements in Next.js version 14.

Outlines

00:00

😊nextjs - The leading React framework

Paragraph 1 discusses nextjs, explaining that it is the number one React framework for building full-stack web applications. It lists some major websites built with nextjs and highlights key benefits of the latest version 14, specifically server components which improve performance by reducing code sent to the client, and server actions which simplify data mutations by eliminating the need for separate API endpoints.

05:02

😃Our full nextjs course updated for v14

Paragraph 2 mentions the speaker's free 4-hour nextjs course and paid full course on building a carot Market clone app, which covers advanced topics like authentication, file upload, user profiles etc. The course is being fully updated to leverage the capabilities of nextjs version 14 and existing buyers will get the new version for free.

Keywords

💡Next.js

Next.js is a popular React framework for building full-stack web applications. It is mentioned as the number one React framework in the video. Next.js allows server-side rendering and generating static websites for better performance. Popular websites like TikTok, Twitch and Hulu use Next.js.

💡Server Components

Server Components allow selectively rendering components on the server. This avoids sending component code to the browser. The video explains how Server Components improve performance and security by preventing access to database and API keys on the client side.

💡Server Actions

Server Actions allow executing functions securely on the server. The video gives the example of creating a user account without needing an API endpoint. Next.js handles passing data between component and server action.

💡Code Reduction

The video emphasizes how Next.js 14 features like Server Components and Server Actions reduce the amount of code needed. Examples are removing fetch calls to APIs and simplifying component code.

💡Developer Experience

Next.js 14 improves developer experience with Server Components and Actions. Coding is simplified with less repetition. The video highlights the productivity benefits.

💡Rendering

Rendering refers to generating the UI from React components. The video contrasts client-side and server-side rendering. Next.js does server-side rendering first for better performance.

💡Hydration

Hydration means rendering React components on client after server-side rendering. This makes the UI interactive. The video explains how Server Components avoid client hydration.

💡Suspense

Suspense allows components to wait for something before rendering. The video gives the example of showing a loading state with Suspense while fetching data for a post component.

💡Cloudflare Workers

Cloudflare Workers provide serverless computing. The video mentions using Workers and Durable Objects to build realtime experiences.

💡Live Shopping

Live shopping means realtime ecommerce streaming. The video references using Cloudflare Stream for live shopping in their example application.

Highlights

The video is abnormal, and we are working hard to fix it.
Please replace the link and try again.

Transcripts

nextjs is the number one react framework

for building fullstack web applications

the websites of Tik Tok twitch Hulu

notion HBO Max chat GPT and many other

big names are built with nextjs the

latest version of nextjs the version 14

landed with support for two features

that I have been waiting for for a long

long time server components and server

actions server components was already a

thing in version 13 but server actions

are finally stabled since version 14 was

released I have been upgrading raing all

my projects to it and all I can say is

wow the developer experience and

productivity are through the roof I have

deleted lots of lines of code there are

libraries I don't even need anymore and

my users download way less JS code

server components allow us to choose if

a component should be rendered only in

the server or Not by default all

versions of nextjs render your

components twice once in the back end

and once in the front end it pre-

renders them in the back end so when a

user goes to your page they will at

least see a non-interactive version of

your app and then it initializes a react

app on top of the non-interactive UI to

make it interactive this means the

browser downloads the code of all the

components to render them again in the

browser because the browser downloads

the code of the components that means

that anybody could see their source code

which means we can't connect to our

database from them or expose our secret

API Keys instead we need to fetch from

an API that will securely talk to our

database or use the API case in a

backend or we can use ser components

because they allow us to opt out of the

second render that means the component

will only be rendered once in the backet

and only the resulting UI will be given

to the user and not the component

JavaScript code that has huge

consequences for us that means the user

doesn't have to download and render all

the components of your application in

the browser and it allows us to delete

Crazy amounts of code we can go from

this where we have to use a state use

effect and call an API to this where we

don't need to fetch an API we don't even

need to have an API and we can just talk

to the database directly the code for

the component will never be downloaded

by the user only the UI the component

returns to handle loading states with

server components we can use suspense

when the user goes to the page they will

immediately see a UI with a loading post

text then when the post component is

done fetching the post using streaming

nextjs will replace the loading post

text with the resulting UI of the post

component just like that the need for an

API and a library is gone Amazing all

components are by default server

components which means they will be

rendered only one time if you need to

use apis of the browser of the user like

local storage or geolocation or if you

need to use onclick or any other event

listener for interactivity all you have

to do is write used client at the top of

the component like this that will tell

nextjs that you want this component to

be hydrated in the browser of the user

used client does not mean the component

will be rendered only in the client it

means it will be rendered also in the

client I think you use client is

confusing because it sounds like the

component would only be rendered in the

client which isn't true is rendered in

both server and client you can think of

use client as use hydrate which is more

accurate and easy to understand server

actions is better seen than explained

all you have to know is that they make

the developer experience of data

mutations incredible an example of a

data mutation is when a user creates an

account on your website for example

without server actions we would have to

have an unsubmit function in our

component that will send a post request

to an API route in API user to create an

account for the user that submitted the

form that means we also have to have an

API endpoint in our backend that talks

to the database and creates the user

account or we can use server actions and

get rid of the API completely as well as

the fetch code that sends the data to

the API to make our component look like

this just like that the create user

function is now going to run securely in

the server nextjs will pass the form

data that the user wrote in the front

end to the function automatically to

know what the state of the mutation is

so we can show the the user a loading

message or show the user some errors we

have two hooks we can use one is the use

form status hook that we can call from

any child of the form like this and

another one is the use form state that

allows us to have more structure in our

responses in case there is an error

actions also have lots of cool functions

to revalidate data check cookies or even

redirect the user when the mutation is

finished how cool is this again we can

get rid of the API endpoint and fetch

code completely and just write the logic

right there in our component nextjs will

handle it all it will pass data between

component and action all behind the

scenes and securely we don't have to do

anything it just works that's it for

this video if you want to learn more

about nexs for free check out the free

4-Hour course that I just finished

uploading and that you can join right

now for the low price of free 32 videos

4 hours all free and if you want to

learn even more about the next JS and

squeeze the framework from all its

features check out our carot Market

clone coding course this this is a

course that I recorded with nextjs

version 12 and that I am now updating to

version 14 I am re-recording it

completely all 100% new everyone that

bought the version 12 course will get

the version 14 course for absolutely

free no exceptions in Carro Market we

build a fully fledged nextjs application

with Tailwind Prisma Planet scale Cloud

flare and more we Implement user

authentication file uploads user

profiles reviews and more we also learn

about cloud their workers and learn

about a durable object to build

serverless realtime experiences and use

cloud stream for live shopping as well

it is absolutely awesome and this

version is even better with the power of

next js14 server components server

actions and more I hope you found this

video useful if you did please like it

share it with your friends and subscribe

to the channel thank you for watching as

always on Kam see you on the next one

byebye