F2C NextJS

A reusable form handler utility for Next.js apps using Server Actions, built for users of F2C Website

Features

• Works with Next.js App Router (v13+) .
• Handles form submissions via Server Actions.
• Sends data to an external API endpoint .
• Supports optional onSuccess logic.
• Fully typed with TypeScript .
• No need for /api routes — just plug into your component.
• Safe handling of environment variables.

Installation

Install the package via npm:

npm install f2c-nextjs

Or use with yarn:

yarn add f2c-nextjs

Environment Variables

You will need to add the following environment variables to your .env.local file. Get your Endpoint & Keys from F2C Website

F2C_ENDPOINT F2C_SECRET_KEY F2C_PUBLISHABLE_KEY

Usage in Next.js App

'use client';

import { useActionState } from 'react';
import { handleFormAction } from 'f2c-nextjs';

type FormState = {
  success: boolean;
  errors?: Record<string, string>;
};

export default function ContactForm() {
  const initialState: FormState = { success: false };

  const submitAction = async (prevState: FormState, formData: FormData) => {
    return handleFormAction(
      {
        form_id: 'contact_form_2025',
        onSuccess: async (data) => {
          console.log('Form submitted:', data);
          // Optional: send analytics or log data server-side
        },
      },
      formData
    );
  };

  const [state, formAction] = useActionState(submitAction, initialState);

  return (
    <form action={formAction}>
      <div>
        <label>
          Name:
          <input type="text" name="name" required />
        </label>
      </div>

      <div>
        <label>
          Email:
          <input type="email" name="email" required />
        </label>
      </div>

      <button type="submit">Submit</button>

      {state?.errors?.general && (
        <p style={{ color: 'red' }}>{state.errors.general}</p>
      )}
    </form>
  );
}

start your Next.js application, complete the form fields, and submit. The form administrator will receive an email with the submission details.