machupicchubetaのブックマーク - はてなブックマーク

"use client" は Server Component と Client Component の境界につけよう
🌼 はじめに最近 Next.js の app Router で開発してて、不思議なワーニングに出会いました。 Props must be serializable for components in the "use client" entry file, "handleClick" is invalid. これがなんなのかがすごく気になり、"use client"について色々調べたので共有したいと思います。 1. "use client" は何なのか "use client"は Server Component と Client Component の境界の宣言です。公式ドキュメントにもそう書いてました。 The "use client" directive is a convention to declare a boundary between a Server and Clie
machupicchubeta 2023/08/19
リンク
React 初心者の難問、カスタムフック（Custom Hook）を解説します
最近社内レビュー会で React レビューが多くなり、「カスタムフック使ったらスッキリできます」という言葉もよく聞くようになりました。私が初めてそれを耳にしたときは「なにそれ美味しいの？」みたいな感じでしたし、初心者にはピンとこない概念かなーと思いましたので、今回のテーマにしたいと思います。 1. カスタムフックとはカスタムフックは自分がカスタムして作るフックです。 React 公式サイトではカスタムフックをこう説明してます。カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。でもこれだけ見たら絶対わからないと思うのでサンプルコートを一緒に見てみましょう。 2. チャットアプリの例サンプルコートも React 公式サイトにあるものを持ってきました。チャットアプリで友達がオンラインかオフラインかを示すメッセージを返す
machupicchubeta 2021/08/28
リンク
Next.js ではなぜ Link の中に <a>を入れる？なぜ href を Link に付ける？？
import Link from 'next/link' function Home() { return ( <ul> <li> <Link href="/"> <a>Home</a> </Link> </li> <li> <Link href="/about"> <a>About Us</a> </Link> </li> <li> <Link href="/blog/hello-world"> <a>Blog Post</a> </Link> </li> </ul> ) } export default Home 基本的な部分ですが、同じこと思った方に役に立てるかと思ってまとめます。 1． Link の中に a タグがなかったら？まずは「Linkの中に<a>がなかったらどうなる？」という純粋な疑問からといていきましょう。こういうのは直接試したほうが早いので試します。サンプルコードは
machupicchubeta 2021/06/20
リンク
1