Server functions are called by POST with multipart/form-data in Next.js <form action={...}> or <form><button formAction={...} /></form>. ACTION_ID is a reference of the server function as an API endpoint.
My tweets
3 pattern server function invocations in Next.js👀 See more details: nextjs.org/docs/app/build… Also, check it: nextjs.org/docs/app/build…
🎉 @uehaj さん主導の元、create-t3-appのドキュメントが日本語翻訳されましたー！
初めてLive Codingをしてみました。 CybozuのKintoneのReact化でJotaiが"選ばれなかった"のですが、良い機会なので題材にさせていただきました!! さて、どうやって実装したでしょう？ YouTubeはこちら👇 youtu.be/HNs_bdaErKc コードはこちら👇 github.com/t6adev/jotai-t…
React Tip: You know we can use a key to trigger rerendering components when we change the key, right? You don't need to use the useEffect inside <Content /> to change content by a key, like a user id. Just do it.
VSCodeでTypeScriptのエラーを超絶読みやすくしてくる拡張が登場したのでその話題と、Vercelで募集されたドキュメントエンジニアのポジションとその給料についての話題を話しました。 👇 youtu.be/vJgqZgmUYhw
Let's install it in VSCode NOW!! TypeScript users!! 👇 marketplace.visualstudio.com/items?itemName…
Let's dive into React Server Components!! First, How does it work? What is the difference between normal components? When render and commit in streaming? ...What's RSC? (I need your public review🙃)
Recently, the topic of React Server Components has become more prevalent. I took the time to review React concepts like SPA, data fetching and client-side rendering, SSR, and Suspense.
React Server Components の前に知っておいたほうが良さそうなStreaming HTMLとSelective Hydration。 Data fetchやcode splitしたいコンポーネントをSuspenseで囲んでおいて初期表示を速める（SSRという点はこれまでと変わらず）。残りの2,3,4もSSRなんだけど並列化可能。 全てSSRという点に注目。
React Server Components 理解のための SSR / SSG の復習。 serverではリクエストページ”全体”のHTMLを構築します。 1と2はcacheやprebuildで短縮可能です。3,4でのJS読み込み〜hydration完了でようやくbuttonやinputが動作可能になることも押さえておきましょう。 そして1~4全てがwaterfallです。
React Server Components 理解のための復習。 ”Render-As-You-Fetch”, "Fetch-on-Render" と呼ばれるパターンです。 コンポーネントで必要なデータを随時取得していくので、データ取得が逐次的になりやすいですね。並列化は実装者次第。 不要なJSXが初回リクエスト時に取得済みな事もポイント。
Reactの状態管理をURLクエリーパラメータと組み合わせる時はJotaiのatomWithHashが使えます話や、WebSocketではなくEventSource(Server-Sent Events)が使えるね話をしました。 youtu.be/yJLVElPfwA0
When you need Jotai atom's type, you can use type utils. 👻🧩 github.com/pmndrs/jotai/b…
Created Next.js 13 app dir/ playground used by @codesandbox It's a very simple version but you can see how React Server Components work. Hope it helps 👋 🔳 codesandbox.io/p/sandbox/wiza…
My decent work was merged. It's in a while. If you have experience using atomWithDefault in Jotai, you will be interested. You can try this by codesandbox in the doc. Hope it helps. Thanks @dai_shi 🙌 jotai.org/docs/recipes/a…
Maybe now you are so itching to try @nextjs canary, right? Me too. Open this in your browser, then replace github.com with stackblitz.com/github, here we go. 👉github.com/vercel/next.js… Thanks to @stackblitz
I like it😂
"You live in @astrodotbuild. I'll live in @nextjs. Together, we’ll live. Yakul and I will visit you."
「お前に駆け出しエンジニアが救えるか！？」
最近反対のfunction + returnで縛る理由を探していてようやく見つけて納得できた。 👇 twitter.com/t6adev/status/… あとはeslint-plugin-react/function-component-definition があるのでOK。喧嘩せずにすむね😂
Reactのコンポーネント関数、あなたはどっち派？ 理由を添えてね🫰
あなたはどっち派？ Return typeを明記する派？ 推論に任せて書かない派？ #TypeScript
"I need jotai-tanstack-query-trpc! Should I make a lib...?" "No, just use jotai-tanstack-query with @trpc/client" HAPPY🥳 codesandbox.io/s/jotai-tansta… Any idea? Thanks to @jotaijs, @tan_stack and @trpcio
For @recoiljs users who don't know @jotaijs yet 👻 It's a basic intro. 🧵 jotai.org/docs/basics/co…
配列内で重複となるデータを省きたいときにBOCCHI THE ROCK🎸
え、私のコード、ループ書いてる🫢 #JavaScript
Prisma x tRPC x Zod = 気持ちぃいいい
refactoringui.com グサグサきたので購入決定です。
Recoil? Jotai? oh, Do you like to type a lot to practice? There is a way to think more simple. You are a geek, right? Have a better day in your React life ;) recoiljs.org/docs/introduct… jotai.org *I respect Recoil 🫶
Hi, React Router and @jotaijs folks. I made this sample that tries to use store.set() in Route.loader by Jotai v2 RFC. So clear to understand when to initialize atoms at navigating other pages. The sample code is here codesandbox.io/s/react-router…
課題はserver/client間の型とバリデーション。真実とすべきはserverなのでreq.bodyのバリデーションをzodで、後はres.send部分をreturnで書く🎫 あとは"type"をexportしてclientで使えば、clientでバリデーションすることも二重で型定義することも不要。 もちろん補完も効く。
分かっててやってる人以外はここに座りなさい、怒らないから、ね 😌
TypeScriptでタイプガード書きまくるの辛いし不要な物が交じる可能性もあるので完璧ではない。 そんなときのzod先生。スキーマ定義したらパーサーも型も手に入って不純物は取り除いてくれる。惚れる。 const user: unknown のところを User でキャストする悪い子も素直になれるはず。
これを見て自分の中の靄が晴れてきた感じ。 Jotai / Recoil は従来のReduxのようなトップダウンな状態管理ライブラリではなくボトムアップ型。 なので一元的にまとめるような構成は哲学に反してる気がする。 Single source of truth 、巨大なstoreから切り出すのを忘れよう？ zenn.dev/8_8/articles/5…
React.useState()はcomponentのkeyが変わればリセットされる。 そう、リストじゃなくても状態のリセットにkeyが使える！ beta.reactjs.org/apis/react/use…
Jotai atom is going outside React world !! 👻 Can't believe it? Check it out for yourself 👉 WIP, but amazing and blazingly fast work, @dai_shi github.com/pmndrs/jotai/p… v2 RFC is here github.com/pmndrs/jotai/d… Sample code is here codesandbox.io/s/jotai-rfc-v2…
いやぁ、駆け出しエンジニアの皆さんも大困惑のNextjs v13ですな😂 React始めるのに際してCRAの代わりにNext使う流れになってきてこれだし、チュートリアル終わったらノーマルすっ飛ばしてハードモードって感じ。 日本語記事を頼りにするしか無い人達は2歩も3歩も出遅れる・・ beta.nextjs.org/docs/rendering…
Reactで大きな変化が。こりゃあ嬉しい。 github.com/reactjs/rfcs/p…
Let's get help from TanStack/react-query Query to have a cache feature. (Of course, as well as other powerful features) Using the integration is recommended than using Jotai core only, now. 🔳 codesandbox.io/s/jotai-async-… 👻 jotai.org/docs/integrati… ⚛️ tanstack.com/query/v4
Need cache? One of the easy ways is to use atomFamily. #React #Suspense with #Jotai 🔳 codesandbox.io/s/jotai-async-… 👻 jotai.org/docs/utils/ato…
Hi, folks. If you don't use Jotai and you are a Redux user, I hope this CodeSandbox helps you to have a chance to know what Jotai is.⚛️ #react codesandbox.io/s/redux-essent…