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

Summary

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

00:00

🚀 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コードを排除し、コンポーネント内でロジックを直接記述することが可能となります。

05:02

📚 Next.jsの学習コース紹介とCarro Marketの構築

Next.jsについてさらに学びたい方は、無料で提供されている4時間のコースに参加できます。また、Next.jsを活用したCarro Marketの構築コースも用意されており、バージョン12でレコーディングされたコンテンツがバージョン14にアップデートされています。このコースでは、Tailwind、Prisma、PlanetScale、Cloudflareなどを用いて、ユーザー認証、ファイルアップロード、ユーザープロフィール、レビューなどを含む完全なNext.jsアプリケーションを構築します。さらに、CloudflareのWorkersとDurable Objectsを使ったサーバーレスのリアルタイム体験の構築方法も学ぶことができます。

Keywords

💡Next.js

Next.jsは、Reactフレームワークで、フルスタックウェブアプリケーションを構築するための人気があります。このフレームワークは、TikTokやTwitch、Hulu、Notion、HBO Maxなどの有名なウェブサイトで使用されています。このキーワードは、ビデオの中心テーマであり、Next.jsのバージョン14の新機能について説明しています。

💡Server Components

サーバーコンポーネントは、Next.jsのバージョン13から存在していたが、バージョン14では機能が強化されました。これにより、コンポーネントをサーバー上でのみレンダリングするか、あるいはクライアントにもレンダリングするかを選択できます。これは、ユーザーがブラウザ上ですべてのコンポーネントを再レンダリングする必要がなく、コードの量を大幅に削減できることを意味しています。

💡Server Actions

サーバーアクションは、バージョン14で安定化された新機能で、データの変更（例えばユーザーアカウントの作成）を安全に行うことができます。これにより、APIエンドポイントやfetchコードを完全に排除し、コンポーネント内でロジックを直接記述することが可能になります。

💡Suspense

サスペンスは、Next.jsのサーバーコンポーネントと組み合わせて使用することで、非同期データの取得中にローディング状態を表示することができます。ビデオでは、ポストコンポーネントがデータを取得するまでローディングテキストが表示され、取得が完了するとUIが置き換えられる様子が説明されています。

💡use client

use clientは、Next.jsで使用されるディレクティブで、コンポーネントをブラウザでハイドレートする必要があることを示します。これは、ローカルストレージやジオロケーションなどのブラウザAPIを使用する場合や、onclickなどのイベントリスナーが必要な場合に使用されます。

💡Data Mutations

データの変更は、ユーザーがウェブサイト上でアカウントを作成するなど、データベースに記録を追加または変更する操作のことを指します。ビデオでは、サーバーアクションを使用することで、これらの変更を安全にサーバー上で行う方法が説明されています。

💡useFormStatus

useFormStatusフックは、フォームの子のコンポーネントから呼び出して、フォームのステータスを取得することができます。これは、ユーザーにローディングメッセージやエラーを表示するために使用されます。

💡useFormState

useFormStateフックは、より構造化されたレスポンスを可能にするために使用されます。エラーが発生した場合など、より詳細な情報を必要とする場面で役立ちます。

💡Carrot Market Clone

Carrot Market Cloneは、ビデオで紹介されているNext.jsアプリケーションの構築コースで構築される、完全なNext.jsアプリケーションです。ユーザー認証、ファイルアップロード、ユーザープロフィール、レビューなどを含む機能を実装しています。また、クラウドワーカーや持続的オブジェクトを使用して、サーバーレスのリアルタイム体験を構築する方法も学ぶことができます。

💡Tailwind

Tailwindは、Carrot Market Cloneで使用されるCSSフレームワークで、迅速なUI開発を可能にします。ビデオでは、Next.jsと組み合わせて使用され、効率的なウェブアプリケーションの開発を助ける役割を果たしています。

💡Vercel

Vercelは、Next.jsアプリケーションをホストするためのプラットフォームで、ビデオではアプリケーションのデプロイや配信に使用されています。Next.jsは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