Full-Stack Next.js: Server Actions, Route Handlers, and Production Deployment (Part 3)

"use server"; // Instructs the compiler that every function in this file runs strictly on the server

import { revalidatePath } from 'next/cache';

interface SubmissionResponse {
  success: boolean;
  message: string;
  error?: string;
}

// A secure backend mutation function that handles incoming form payloads directly
export async function recordLabRegistration(formData: FormData): Promise<SubmissionResponse> {
  try {
    const studentName = formData.get('studentName') as string;
    const targetedTrack = formData.get('labTrack') as string;

    if (!studentName || !targetedTrack) {
      return { success: false, message: "Schema Error", error: "All input fields are completely mandatory." };
    }

    console.log(`[SERVER INTERCEPT] Persisting record to database cluster: ${studentName} -> ${targetedTrack}`);
    
    // Simulate writing records into a persistent cloud database infrastructure node
    await new Promise((resolve) => setTimeout(resolve, 800));

    // Purge Next.js's server-side data cache instantly to display the fresh row across the UI
    revalidatePath('/modules');
    
    return {
      success: true,
      message: `🎉 Success! Slot securely allocated for ${studentName} inside the ${targetedTrack} suite.`
    };
  } catch (err: any) {
    return { success: false, message: "System Error", error: err.message };
  }
}

import { NextResponse } from 'next/server';

// Mock database collection representing live terminal network diagnostics
const activeRackLogs = [
  { nodeClusterId: "cluster-alpha", systemLoad: "14.2%", healthy: true },
  { nodeClusterId: "cluster-omega", systemLoad: "98.7%", healthy: false }
];

// Route Handler exposing a standard GET endpoint interface
export async function GET() {
  return NextResponse.json({
    status: "success",
    operatorSignature: "Puneet Tiwari",
    timestamp: new Date().toISOString(),
    logs: activeRackLogs
  }, {
    status: 200,
    headers: { 'Cache-Control': 'public, max-age=60, s-maxage=60' } // Enforcing secure edge-cache rules
  });
}

import { Metadata } from 'next';

interface Props {
  params: Promise<{ id: string }>;
}

// Next.js hooks into this explicit method signature to construct HTML head tags before server rendering
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const resolvedParams = await params;
  const targetModuleId = resolvedParams.id;

  // Simulating a fast database query lookup to fetch custom page names
  const pageTitle = targetModuleId === "201" ? "Advanced Networking Core" : "Database Engine Structs";

  return {
    title: `${pageTitle} | Academic Hub`,
    description: `Deep-dive study guides and resources mapping out details for structural module: ${pageTitle}.`,
    openGraph: {
      title: pageTitle,
      description: "Enterprise Full-Stack Study Node.",
      images: [{ url: `/blog/nextjs.png` }]
    }
  };
}

"use client";

import React, { useState, useTransition } from 'react';
import { recordLabRegistration } from '../actions/labActions';

export default function LabRegistrationForm() {
  // useTransition handles background execution state flags seamlessly
  const [isPending, startTransition] = useTransition();
  const [executionFeedback, setExecutionFeedback] = useState<string | null>(null);

  async function handleFormDispatch(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const baseFormElement = event.currentTarget;
    const completePayload = new FormData(baseFormElement);

    setExecutionFeedback("Processing secure handshake...");

    // Execute the Server Action inside a non-blocking background transition loop
    startTransition(async () => {
      const actionResult = await recordLabRegistration(completePayload);
      
      if (!actionResult.success) {
        setExecutionFeedback(`❌ Error: ${actionResult.error}`);
      } else {
        setExecutionFeedback(actionResult.message);
        baseFormElement.reset(); // Clear input elements cleanly on success
      }
    });
  }

  return (
    <div className="p-6 rounded-2xl border border-zinc-800 bg-zinc-950 max-w-md mx-auto">
      <h3 className="text-xl font-bold mb-4 text-white">Secure Laboratory Reservation</h3>
      
      <form onSubmit={handleFormDispatch} className="space-y-4">
        <div className="flex flex-col gap-1">
          <label className="text-xs text-zinc-400 uppercase tracking-wider">Student Identifier</label>
          <input 
            type="text" 
            name="studentName" 
            required
            disabled={isPending}
            placeholder="Puneet Tiwari" 
            className="w-full p-3 bg-zinc-900 border border-zinc-800 rounded-xl text-sm focus:outline-none focus:border-blue-500 disabled:opacity-50 text-white"
          />
        </div>

        <div className="flex flex-col gap-1">
          <label className="text-xs text-zinc-400 uppercase tracking-wider">Target Academic Discipline</label>
          <select 
            name="labTrack"
            disabled={isPending}
            className="w-full p-3 bg-zinc-900 border border-zinc-800 rounded-xl text-sm focus:outline-none focus:border-blue-500 disabled:opacity-50 text-white"
          >
            <option value="Advanced Networks">Computer Networks Core</option>
            <option value="Database Engines">Database Systems Management</option>
            <option value="AI Optimization">Artificial Intelligence Engineering</option>
          </select>
        </div>

        <button 
          type="submit" 
          disabled={isPending}
          className="w-full py-3 rounded-xl bg-blue-600 font-medium text-sm text-white hover:bg-blue-500 transition disabled:bg-zinc-800 disabled:text-zinc-500"
        >
          {isPending ? "Transmitting secure payload..." : "Book Practical Slot Allocation"}
        </button>
      </form>

      {executionFeedback && (
        <p className="text-xs text-center mt-4 text-zinc-400 animate-pulse">
          {executionFeedback}
        </p>
      )}
    </div>
  );
}