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のパワーを活用しています。