Next.js server action form
Zod doğrulamalı Next.js server action form örneği ister.
Prompt Metni
Next.js App Router ve TypeScript kullanarak e-posta abonelik formu oluştur. Gereksinimler: - Form, ayrı bir Server Action çağırmalı; istemcide fetch kullanılmamalı. - E-posta Zod ile doğrulanmalı. - Alan hatası ve başarı durumu tip güvenli biçimde gösterilmeli. - Veritabanı işlemi yerine kısa bir örnek başarı akışı yeterli. - Yalnızca actions.ts ve form.tsx dosyalarını ver.
Prompt Sonucu
app/subscribe/actions.ts
'use server'
import { z } from 'zod'
const schema = z.object({
email: z.string().email('Geçerli bir e-posta girin.'),
})
export type FormState = {
status: 'idle' | 'error' | 'success'
message?: string
}
export async function subscribe(
_previousState: FormState,
formData: FormData
): Promise<FormState> {
const result = schema.safeParse({ email: formData.get('email') })
if (!result.success) {
return {
status: 'error',
message: result.error.flatten().fieldErrors.email?.[0],
}
}
// Burada result.data.email veritabanına kaydedilebilir.
return { status: 'success', message: 'Aboneliğiniz alındı.' }
}
app/subscribe/form.tsx
'use client'
import { useActionState } from 'react'
import { subscribe, type FormState } from './actions'
const initialState: FormState = { status: 'idle' }
export function SubscribeForm() {
const [state, action, pending] = useActionState(subscribe, initialState)
return (
<form action={action}>
<label htmlFor="email">E-posta</label>
<input id="email" name="email" type="email" required />
<button disabled={pending}>
{pending ? 'Gönderiliyor…' : 'Abone ol'}
</button>
{state.message && (
<p role={state.status === 'error' ? 'alert' : 'status'}>
{state.message}
</p>
)}
</form>
)
}
Benzer Promptlar
Kod
Zod ile ortam değişkenleri
Eksik gizli anahtarı açılışta yakalayan Zod ortam şeması.
Kod
Next.js dinamik metadata
Promise params ile başlık, açıklama ve mutlak Open Graph adresi.
Kod
Webhook HMAC doğrulaması
timingSafeEqual kullanan webhook imza kontrolü.
Kod
React iyimser beğeni
Beğeni sayısını sunucu yanıtından önce güncelleyen useOptimistic örneği.