🍣
【Next】Server Action完了後のリロード
Next14にてStableになったServer Actionに関して。
Server Action完了後にリロードする方法でちょっとつまづいたので、備忘録として記録しておきます.
// componentThatUseServerAction.tsx
'use client';
import { useRouter } from 'next/navigation';
import { serverAction } from 'action.ts';
export function From() {
const router = useRouter();
return (
<form
action={async FormData => {
await serverAction(FormData);
router.refresh()
}}
>
<TextInput id="name" label="name"/>
<TextInput id="slug" label="slug"/>
<SubmitButton/>
</form>
);
}
// action.ts
'use server'
export const serverAction = async (formData: FormData) => {
// ... 処理
}
Discussion