Next.js હવે ડેવલપર્સને સીધા જ એક કમ્પોનન્ટમાંથી સર્વર-ઓન્લી (server-only) ફંક્શન્સ કોલ કરવાની સુવિધા આપે છે, જેનાથી ફોર્મ સબમિશન જેવા રોજિંદા કાર્યો માટે અલગ API રૂટ્સ બનાવવાની જરૂરિયાત દૂર થાય છે. નવી Server Actions ફીચરનો ઉપયોગ કરીને, એક સિંગલ HTML ફોર્મ વચગાળાના fetch કોલ વગર બેકએન્ડ કોડને ટ્રિગર કરી શકે છે, જે બોઈલરપ્લેટ (boilerplate) ઘટાડે છે અને ફ્રન્ટ-એન્ડ/બેક-એન્ડ વચ્ચેના જોડાણને વધુ મજબૂત બનાવે છે.

જૂની પદ્ધતિ શા માટે ભારે લાગે છે

એક સામાન્ય React અથવા Next.js એપમાં, એક સાદું “create a project” ફોર્મ પગલાંઓની એક સાંકળ શરૂ કરે છે: એક API રૂટ ફાઇલ, બ્રાઉઝરથી fetch રિક્વેસ્ટ, લોડિંગ અને એરર સ્ટેટ્સનું હેન્ડલિંગ, CORS હેડર્સ, અને અંતે નવા ડેટાને દર્શાવવા માટે ક્લાયન્ટ-સાઇડ અપડેટ. દરેક સ્ટેપ નવી ફાઇલો, કોડની લાઇન અને નિષ્ફળતાના સંભવિત મુદ્દાઓ ઉમેરે છે. ટીમો જ્યારે માત્ર ડેટાબેઝમાં રેકોર્ડ લખવાનો જ એકમાત્ર ધ્યેય હોય ત્યારે પણ આ ભાગોને એકબીજા સાથે જોડવામાં સમય વિતાવે છે.

Server Actions અંતર ઘટાડે છે

Server Actions એ અસિંક્રોનસ (asynchronous) ફંક્શન્સ છે જે ખાતરી આપે છે કે તે ફક્ત સર્વર પર જ ચાલશે. ફાઇલના ટોચ પર "use server" ડાયરેક્ટિવ ઉમેરવાથી કમ્પાઈલરને એ જણાવવામાં આવે છે કે આ કોડને બ્રાઉઝર બંડલમાંથી દૂર રાખવો, જેથી તે સુરક્ષિત રીતે ડેટાબેઝ, સિક્રેટ્સ અથવા કોઈપણ સર્વર-ઓન્લી રિસોર્સને એક્સેસ કરી શકે. કારણ કે ફંક્શન સર્વર પર રહેલું છે, તેથી કમ્પોનન્ટ નેટિવ <form> એલિમેન્ટ પરના action એટ્રિબ્યુટ દ્વારા તેને સીધું જ ઇનવોક (invoke) કરી શકે છે.

એક્શન વ્યાખ્યાયિત કરવું

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

ફંક્શન FormData ઓબ્જેક્ટ મેળવે છે, પેલોડને વેલિડેટ કરે છે, ડેટાબેઝમાં લખે છે, અને પછી Next.js ને /dashboard પેજ રિફ્રેશ કરવા માટે કહે છે જેથી UI ફૂલ રીલોડ વગર નવો પ્રોજેક્ટ બતાવી શકે.

UI માં તેને જોડવું

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

જ્યારે યુઝર સબમિટ બટન પર ક્લિક કરે છે, ત્યારે બ્રાઉઝર ફોર્મ ડેટાને સર્વર-સાઇડ createProject ફંક્શન પર પોસ્ટ કરે છે. કારણ કે આ સ્ટાન્ડર્ડ HTML ફોર્મ બિહેવિયરનો ઉપયોગ કરે છે, તેથી જો JavaScript હજુ લોડ ન થયું હોય તો પણ સબમિશન કામ કરે છે, જે ધીમા કનેક્શન પર પર્સીવ્ડ પર્ફોર્મન્સ (perceived performance) સુધારે છે.

ટીમોને શું ફાયદો થાય છે

  • ઓછી ફાઇલો – દરેક એન્ડપોઇન્ટ માટે અલગ pages/api અથવા app/api ફાઇલોની જરૂર નથી.
  • **ઓછું