{"id":3920,"date":"2024-11-14T20:15:10","date_gmt":"2024-11-14T17:15:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-js-15-form-bileseni-yeni-baslayanlar-icin-bir-rehber\/"},"modified":"2024-11-14T20:15:10","modified_gmt":"2024-11-14T17:15:10","slug":"next-js-15-form-bileseni-yeni-baslayanlar-icin-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-js-15-form-bileseni-yeni-baslayanlar-icin-bir-rehber\/","title":{"rendered":"Next.js 15 Form Bile\u015feni: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber"},"content":{"rendered":"

Next.js 15 Form Bile\u015feni: Yeni Ba\u015flayanlar \u0130\u00e7in Bir Rehber<\/p>\n

Next.js, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir \u00e7er\u00e7evedir. Formlar, web uygulamalar\u0131n\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r ve Next.js, form olu\u015fturmay\u0131 kolayla\u015ft\u0131ran g\u00fc\u00e7l\u00fc bir form bile\u015feni sunmaktad\u0131r. Bu makalede, Next.js 15’teki yeni form bile\u015fenini kullanarak form olu\u015fturman\u0131n temellerini ele alaca\u011f\u0131z. Ayr\u0131ca, form g\u00f6nderme, do\u011frulama ve veri i\u015fleme gibi \u00f6nemli konular\u0131 da inceleyece\u011fiz.<\/p>\n

Next.js Form Bile\u015fenini Kullanma<\/h2>\n

Next.js 15’te, form olu\u015fturmak i\u00e7in yeni bir form bile\u015feni sunulmu\u015ftur. Bu bile\u015fen, form i\u015flevselli\u011fini kolayla\u015ft\u0131rmak i\u00e7in \u00e7e\u015fitli \u00f6zellikler sunar. Form bile\u015fenini kullanmak i\u00e7in, \u00f6nce `next\/form` paketini projeye eklemeniz gerekir:<\/p>\n

“`bash
\nnpm install next\/form
\n“`<\/p>\n

Form bile\u015fenini kullanarak basit bir form olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabilirsiniz:<\/p>\n

“`javascript
\nimport { useState } from ‘react’;
\nimport { useForm } from ‘next\/form’;<\/p>\n

function MyForm() {
\n const [formData, setFormData] = useState(null);<\/p>\n

const { data, state, errors, reset, submit } = useForm({
\n id: ‘my-form’,
\n method: ‘POST’,
\n action: ‘\/api\/submit’,
\n defaultValues: {
\n name: ”,
\n email: ”
\n },
\n validationSchema: {
\n name: {
\n required: ‘L\u00fctfen ad\u0131n\u0131z\u0131 girin.’
\n },
\n email: {
\n required: ‘L\u00fctfen e-postan\u0131z\u0131 girin.’
\n }
\n }
\n });<\/p>\n

const handleSubmit = async (event) => {
\n event.preventDefault();
\n await submit();
\n setFormData(data);
\n };<\/p>\n

return (<\/p>\n

\n
\n