2024년. NextJS 14를 배워야하는 이유.
Summary
TLDRNext.jsは、フルスタックWebアプリケーションを構築するためのNo.1のReactフレームワークです。TikTok、Twitch、Hulu、Notion、HBO Max、Chat GPTなど、多くの大手企業のウェブサイトがNext.jsで構築されています。最新バージョンのNext.js 14では、長く待望されていたサーバーコンポーネントとサーバーアクションの2つの機能がサポートされました。アップグレードすることで、開発者の経験と生産性が大幅に向上し、コードの量が劇的に削減されました。また、ユーザーはより少ないJavaScriptコードをダウンロードする必要があります。サーバーコンポーネントを使用すると、コンポーネントをサーバーでのみレンダリングするか、それともしないかを選択できます。これにより、データベースへの接続や秘密のAPIキーの露出を防ぐことができます。また、サーバーアクションを使用することで、データの変更に関する開発者の経験を大幅に向上させることができます。たとえば、ユーザーがウェブサイトでアカウントを作成する場合、サーバーアクションを使用してAPIやfetchコードを完全に排除し、コンポーネント内でロジックを直接記述できます。Next.jsは、コンポーネントとアクション間のデータを安全に処理し、シームレスに動作します。さらに、無料の4時間コースやCarro Marketクローンのコーディングコースで、Next.jsの機能をさらに学ぶことができます。
Takeaways
- 🚀 Next.jsは、TikTokやTwitch、Hulu、Notion、HBO Max、Chat GPTなど、多くの有名なウェブサイトで使用されているReactフレームワークです。
- 🎉 Next.jsのバージョン14では、サーバーコンポーネントとサーバーアクションの2つの新機能が追加され、開発者の体験と生産性が大幅に向上しました。
- 🛠️ サーバーコンポーネントを使用すると、コンポーネントをサーバー上でのみレンダリングするか、またはクライアントでもレンダリングするかを選択できます。
- 🔒 サーバーコンポーネントは、コンポーネントのJavaScriptコードをユーザーにダウンロードさせないため、データベースへの接続やシークレットAPIキーの露出を防ぐことができます。
- ⚙️ サーバーアクションを使用すると、データの変更(ユーザーアカウントの作成など)を安全に行うことができます。これにより、APIエンドポイントやfetchコードを完全に排除できます。
- 📦 バージョン14以降、すべてのコンポーネントはデフォルトでサーバーコンポーネントになり、必要に応じて`use client`を使用してブラウザでハイドレートさせることができます。
- 🔄 `use client`は、コンポーネントがクライアントでのみレンダリングされることを意味するのではなく、サーバーとクライアントの両方でレンダリングされることを示します。
- 📚 Next.jsのバージョン14では、ReactのuseStateやuseEffectを使用する代わりに、データベースに直接アクセスできるため、コードの削減が可能です。
- 🌐 Suspenseを使用すると、サーバーコンポーネントでローディング状態を扱えるため、APIやライブラリの必要性がなくなります。
- 📈 フォームのステータスを子コンポーネントから取得できる`useFormStatus`フックと、より構造化されたレスポンスを持つ`useFormState`フックが利用できます。
- 🛒 無料のNext.jsコースやCarro Marketクローンのコーディングコースで、ユーザー認証、ファイルアップロード、ユーザープロフィール、レビューなどを含む完全なNext.jsアプリケーションを学ぶことができます。
- 🎓 Carro Marketコースは、バージョン12からバージョン14に更新され、購入者は無料で新しいバージョンを受け取ります。
Q & A
Next.js はどのようなフレームワークですか?
-Next.js は、フルスタックWebアプリケーションを構築するためのReactフレームワークで、TikTok、Twitch、Hulu、Notion、HBO Max、Chat GPTなどの有名なウェブサイトがNext.jsで構築されています。
Next.jsのバージョン14ではどのような新機能が導入されましたか?
-Next.jsのバージョン14では、サーバーコンポーネントとサーバーアクションという2つの新機能が導入されました。サーバーコンポーネントはバージョン13で既に存在していましたが、サーバーアクションはバージョン14でようやく安定版となりました。
サーバーコンポーネントとは何ですか?
-サーバーコンポーネントは、コンポーネントがサーバー上でのみレンダリングされるかどうかを選択できる機能です。デフォルトでは、Next.jsのすべてのバージョンでコンポーネントは2回レンダリングされますが、サーバーコンポーネントを使うことで、ブラウザでの第2回のレンダリングを省略できます。
サーバーアクションとは何ですか?
-サーバーアクションは、データのミューテーションを処理するための機能で、ユーザーがアカウントを作成するなど、データベースに直接アクセスできるようにします。これにより、APIやfetchコードを使わずに、サーバー上で安全に処理を実行できます。
Next.jsのサーバーコンポーネントを使用する利点は何ですか?
-サーバーコンポーネントを使用することで、ユーザーがブラウザですべてのコンポーネントをダウンロードしてレンダリングする必要がなくなり、コードの量を大幅に削減できます。また、ブラウザのAPIやユーザーのブラウザイベントを必要とする場合は、`used client`と記載することでブラウザでハイドレーションさせることができます。
Next.jsのバージョン14では、どのようにしてローディング状態を扱うことができますか?
-Next.jsのバージョン14では、Suspenseを使用してローディング状態を扱うことができます。ユーザーがページに行くと、まずローディングテキストが表示され、コンポーネントがデータをフェッチすると、ローディングテキストが結果のUIに置き換えられます。
サーバーアクションを使用する際の利点は何ですか?
-サーバーアクションを使用することで、APIエンドポイントやfetchコードを完全に排除し、コンポーネント内でロジックを直接記述できます。また、Next.jsはデータの受け渡しやエラーメッセージの表示など、バックグラウンドで安全に処理を行います。
Next.jsのフォームステータスフックとは何ですか?
-フォームステータスフックは、フォームの子のコンポーネントから呼び出すことができるフックで、ミューテーションの状態を知ることができます。これにより、ユーザーにローディングメッセージやエラーを表示することができます。
Next.jsのフォームステートフックとは何ですか?
-フォームステートフックは、より構造化されたレスポンスを提供し、エラーが発生した場合には詳細な情報を得ることができます。これにより、フォームのステートをより柔軟に扱うことができます。
Next.jsのバージョン14で提供されるCarro Marketクローンのコーディングコースでは何を学ぶことができますか?
-Carro Marketクローンのコーディングコースでは、ユーザー認証、ファイルアップロード、ユーザープロフィール、レビューなどを含む完全なNext.jsアプリケーションを構築し、クラウドワーカー、Durable Objectを使ったサーバーレスリアルタイムエクスペリエンスの構築方法を学ぶことができます。また、Cloudflareと連携してライブショッピングを実現する方法も学びます。
Next.jsのバージョン12のコースを購入していた場合、バージョン14のコースはどのようにして入手できますか?
-バージョン12のコースを購入していた人は、誰もが自動的にバージョン14のコースを無料で入手できます。これは完全に新しいレコーディングで、バージョン14のNext.jsのパワーを活用しています。
Outlines
🚀 Next.js 14の新機能: Server ComponentsとServer Actionsの紹介
Next.jsはReactフレームワークの中でもトップクラスで、TikTokやTwitch、Hulu、Notion、HBO Max、Chat GPTなど、多くの有名なウェブサイトが構築されています。最新のバージョン14では、Server ComponentsとServer Actionsという2つの注目の新機能が追加されました。Server Componentsは既にバージョン13で存在していたものの、バージョン14ではServer Actionsが安定版となりました。これにより、開発者の経験と生産性が大幅に向上し、コード量が削減されました。また、Server Componentsを使用することで、コンポーネントをサーバー側でのみレンダリングし、ユーザーにはJavaScriptコードがダウンロードされなくなります。さらに、Server Actionsを使えば、データの変更を安全に行うことができます。これにより、APIのエンドポイントやfetchコードを排除し、コンポーネント内でロジックを直接記述することが可能となります。
📚 Next.jsの学習コース紹介とCarro Marketの構築
Next.jsについてさらに学びたい方は、無料で提供されている4時間のコースに参加できます。また、Next.jsを活用したCarro Marketの構築コースも用意されており、バージョン12でレコーディングされたコンテンツがバージョン14にアップデートされています。このコースでは、Tailwind、Prisma、PlanetScale、Cloudflareなどを用いて、ユーザー認証、ファイルアップロード、ユーザープロフィール、レビューなどを含む完全なNext.jsアプリケーションを構築します。さらに、CloudflareのWorkersとDurable Objectsを使ったサーバーレスのリアルタイム体験の構築方法も学ぶことができます。
Mindmap
Keywords
💡Next.js
💡Server Components
💡Server Actions
💡Suspense
💡use client
💡Data Mutations
💡useFormStatus
💡useFormState
💡Carrot Market Clone
💡Tailwind
💡Vercel
Highlights
Next.js is the leading React framework for full-stack web applications.
Popular websites like TikTok, Twitch, Hulu, Notion, HBO Max, and Chat GPT are built with Next.js.
Next.js version 14 introduces server components and server actions, two highly anticipated features.
Server components allow for rendering components on the server by default, enhancing security and performance.
Server actions streamline data mutations, eliminating the need for traditional APIs and fetch code.
Developer experience and productivity have significantly improved with the upgrade to version 14.
The new version enables the deletion of redundant code and the removal of unnecessary libraries.
Users now download less JavaScript code thanks to the optimizations in Next.js version 14.
Suspense can be used with server components to handle loading states effectively.
The 'use client' directive indicates components that require browser APIs or interactivity.
Server actions provide a secure way to perform data mutations directly on the server.
Hooks like 'use form status' and 'use form state' offer structured responses and revalidation for forms.
The Next.js framework now supports building serverless, real-time experiences with its server components and actions.
A free 4-hour course on Next.js is available for those wanting to learn more about the framework.
An updated course on building a full-fledged Next.js application is being offered, including version 14 updates.
The Carro Market clone coding course covers advanced Next.js features like user authentication and file uploads.
Next.js version 14 is praised for its ability to simplify and secure the development process.
The video concludes by encouraging viewers to like, share, and subscribe for more content on Next.js.
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
5.0 / 5 (0 votes)