"use server";を勘違いして使うと危ない

2024/10/11 7 users use server zaru 関数 ムーザルちゃん ケース

ムーザルちゃんねるのzaruです、こんにちは。今回はNext.js AppRouterのServer Actionsで "use server"; を勘違いして使うと危ないケースがあるよというのを紹介します。 以前書いた"use server"; でexportした関数が意図せず？公開されるとはまた違うケースだったので改めて書きます。 今回のケースが発生することは稀... 続きを読む

知らないとあぶない、Next.js セキュリティばなし

2024/06/29 53 users Next.js Props zaru 引数 ムー

ムーザルちゃんねるのムーです。今回は zaru さんと、Next.js のセキュリティについて話しました。 セキュリティについては様々あると思いますが、今回は以下の3点をピックアップして話しました。 Client Components の Props から露出する Server Actions の引数に注意 認証チェックをやってはいけない場所、やって良い... 続きを読む

Server Actions の同時実行制御と画面の状態更新

2024/05/24 10 users 同時実行制御 画面

2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) ... 続きを読む

Server Actionsにユーザ操作されたくないデータは渡さない

2024/02/27 6 users Hidden input データ Price value

Next.jsやServer Actionsに限らずWebアプリケーション一般的な話になりますが、機能開発する際に、ユーザに勝手に操作されたくないデータを <input> タグを通じて受け取ることは避けなければなりません。 例えば、極端な例ですがECサイトで商品の価格を <input type="hidden" name="price" value="500" /> と書いてあっ... 続きを読む

なぜ Server Actions を使うのか

2023/11/12 82 users Slug Button ミーム バイナリ use server

Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。 特に <button> の formAction 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。"use server;" の部分を PHP やバイナリに置き換えると行った多くのミームも生まれました。 function Bookmark({ slug }) { ... 続きを読む

Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する

2023/10/31 7 users フォームバリデーション useFormState 恩恵 手段

Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する 2023.10.31 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を... 続きを読む