Next.js のフォーム送信。入出力の最小構成サンプル

import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "入出力の最小構成",
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <main>{children}</main>;
}

4つで足りる

「入力を受け取って、結果を返す」だけなら、必要なのはページが2つと、受け取る関数が1つと、外側が1つです。

1. 1
   Browser

   フォームを送る

   普通の form の送信。JavaScript が読み込まれる前でも押せる。

2. 2
   Server

   actions.ts が受け取る

   値を切り詰めて、結果のページへ送り出す。この関数の中身はブラウザに届かない。

3. 3
   Server

   done/page.tsx が描く

   受け取った値を出す。エスケープは React がやる。

'use client' はどこにも書いていません。状態もイベントも使っていないからです。

入力はどこで受け止めるか

app/actions.ts の先頭に 'use server' があります。これは「この関数をクライアントから呼べるようにする」という指示で、境界に穴を1つ開ける操作です。

穴である以上、画面を経由せずに誰でも呼べます。だから受け取った値は、その関数の中で必ず絞ります。

const text = String(formData.get('text') ?? '')
  .trim()
  .slice(0, 40)

入力欄に maxLength を書いてありますが、それは目安であって守りではありません。ブラウザ側の指定は簡単に外せます。長さを決めているのはサーバー側のこの行です。

なぜ結果を別のページにしたか

同じページで結果まで出そうとすると、状態が要ります。状態が要るとフックが要り、フックが要ると 'use client' が要ります。

送り先を別のページにすれば、その連鎖が起きません。送信のあとに redirect で移るこの形は、ブラウザの戻る操作とも噛み合います。

同じページに出したい場合は、Server Function の呼び方にある useActionState を使います。そのときは、そのファイルだけが Client Component になります。

ここから足していくとき

• 保存するなら、actions.ts の中でデータベースへ書きます。ページ側は変わりません
• 入力の形を厳しく見るなら、同じ場所で検証ライブラリを通します
• 結果を同じ画面に出したくなったら、その部分だけを Client Component へ切り出します

足す場所はいつも同じで、actions.ts の中か、切り出した葉の部分です。ページを丸ごと Client Component にする必要は最後まで出てきません。