実装背景

Next.jsのAppRouterを使用してserver actionでredirectを行うと、リダイレクト先のページで成功や失敗のメッセージを表示することが難しくなります。
これは、リダイレクトが発生すると、現在のページの状態がリセットされ、新しいページが読み込まれるためです。
これを解決するために、一度だけ表示するメッセージを保存する方法としてcookieを使用します。

サンプルリポジトリはこちら
https://github.com/yuyakinjo/next-app-flash

動作動画（`a`タグバージョン）

注意：　/ページで表示されている、/flashページのリンクはaタグを使用しています

なぜaタグを使っているかは後述します。

流れ

/ページ
/formページで、入力
入力後、/flashページへリダイレクト
flashという名前のcookieがあれば、successという文字を表示
一度、別のページに遷移したり、リロードすると文字が消える

ページ概要

/ページ：各ページへリンクがあるページ
/formページ：　フォームを入力し、formにはserver actionが設定されている。フォーム送信完了後はflashページへリダイレクト
/flashページ： flash表示ページ

cookiesを使う

cookiesは、nextjsが用意している関数で、maxAge（秒）を0にすることで、リダイレクト後、一度だけ取得でき、すぐ消滅してくれるので削除する必要もありません。

Railsではflashと呼ばれています。

備考として、cookiesを使用すると、ページは毎回動的レンダリングになるはず。。。

あれ動的レンダリングされてなさそう

cookiesは動的関数で、それを使っているページは毎回動的レンダリングされ、キャッシュされないはずだけど、キャッシュされてるぞ！！！

この表でいう、一番下じゃないのか。cookieもキャッシュされる対象になっているのかな。。。

もしかしたら、下記のドキュメントかもしれないけど、どこがそれに抵触する箇所なのか難しい
https://nextjs.org/docs/app/building-your-application/caching#full-route-cache

Linkコンポーネント使うと、cookieの値もキャッシュされて表示されちゃうよ

nextjsのlearnでもやるのですが、Linkコンポーネントはnextjsが用意してくれているprefetch(移動先のページをあらかじめ読み込んでくれてたり)をハンドリングできるコンポーネントなのですが、これが相性よくなかったみたいです。
aタグ使うと、毎回ページを読みに行きますのでやりたかった動きが叶いました。

Linkコンポーネントでも、cookie自体はブラウザからちゃんと消えてくれてます。

動作動画(Linkコンポーネントバージョン)

注意：　/ページで表示されている、/flashページのリンクはLinkコンポーネントを使用しています

まとめ

リダイレクト後に、一度だけ表示したい(flash)は叶いましたが、flashを実装したページのリンク先には、aタグを使わないと、cookieの値もキャッシュされちゃうので気をつけてください。