🍣

【Next】Server Action完了後のリロード

2023/11/19に公開

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