2024년. NextJS 14를 배워야하는 이유.
Summary
TLDRIn 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
😊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.
😃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.
Mindmap
Keywords
💡Next.js
💡Server Components
💡Server Actions
💡Code Reduction
💡Developer Experience
💡Rendering
💡Hydration
💡Suspense
💡Cloudflare Workers
💡Live Shopping
Highlights
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
Browse More Related Video
10 common mistakes with the Next.js App Router
Next.js Fetch Data the Right Way (with a Data Access Layer!) (Security, Auth, Cache, DTO)
Web Developer Roadmap (March 2024) - Everything is Changing
Why I don't use React-Query and tRPC anymore
React Server Components vs Client Components
NextJs in 7 Minutes 🔥
5.0 / 5 (0 votes)