Unexpected Encrypted-Like Response in Next.js on Form Submission Using Edge Functions

Question

I'm currently learning Next.js and experimenting with its features, specifically Edge Functions, for a simple registration form. However, I've encountered a puzzling issue with the form submission response. Despite expecting a JSON response, I'm seeing what appears to be an encrypted or serialized response in the browser's developer console.

Here's a brief overview of my setup:

• auth/page.tsx: Contains the form and the onSubmit function that calls a register method.

'use server';
import {RegisterFormSchemaType} from "@/app/auth/page";

export const register = async (data: RegisterFormSchemaType) => {
    if(data.email === '123@example.com'){
      return {
        error: 'email already exists!',
      };
    }
}

• auth/action.ts: Exports the register method, which checks if the submitted email exists and returns an error object if it does.

'use client'
import {register} from "@/app/auth/action";

  async function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values);
    const result = await register(values);
    if (result?.error) {
      toast({
        title: "Register failed",
        description: result.error,
        variant: "destructive",
      });
    } else {
      toast({
        title: "Register success",
        description: "You have successfully registered",
      });
    }
  }

The register function is marked with 'use server'; to indicate it's an Edge Function and should run on the server side. When submitting the form with a test email (123@example.com), I intend to receive a JSON object indicating an error. Instead, the browser's console shows a response that doesn't resemble JSON:

0:["$@1",["development",null]]
1:{"error":"email already exists!"}

I've also observed the response headers, which include content-type: text/x-component, a detail that adds to my confusion. Additionally, when examining the network request, I noticed it was a POST request to http://localhost:3000/auth. Curiously, when I attempt to POST to this URL using external API tools, I receive a 503 response instead of the expected JSON or even the registration page content.

My Question: Is this response format specific to Next.js Edge Functions, or could it be a misconfiguration on my part? I haven't set up any additional configurations for response handling.

I'm seeking insights into the following:

1. What could be causing this unexpected response format, and what type of response format is this?
2. Why does attempting to POST to the console displayed request URL not trigger the expected request?
3. Is there a recommended approach to debugging issues like this in Next.js, especially considering the odd behavior observed when using API tools?

Any guidance or suggestions on how to address this issue would be greatly appreciated.