Outputting a JSON API call response from Golang to a nextjs frontend

The Error I am getting is

Error: Error serializing `.username` returned from `getServerSideProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

My backend go is working fine I can check it on postman however I can not get the API response from my backend to pop up any feedback or code improvments are welcome
:Main.go

package main

import (
	"encoding/json"
	"fmt"
	"log"
	"net/http"
)

func main() {
	handler := http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
		var resp []byte
		if req.URL.Path == "/status" {
			resp = []byte(`{"status": "ok"}`)
		} else if req.URL.Path == "/username" {
			resp = []byte(GetData())
			json.NewEncoder(rw).Encode(resp)
		} else {
			rw.WriteHeader(http.StatusNotFound)
			return
		}
		
		rw.Header().Set("Content-Type", "application/json")
		rw.Header().Set("Content-Length", fmt.Sprint(len(resp)))
		rw.Write(resp)
	})

	log.Println("Server is available at http://localhost:8000")
	log.Fatal(http.ListenAndServe(":8000", handler))
}

: data.go - This file serves as api cool json response

package main

import (
    "fmt"
    "io/ioutil"
    "log"
    "net/http"
    "os"
)

func GetData( ) string {
    response, err := http.Get("http://pokeapi.co/api/v2/pokedex/kanto/")

    if err != nil {
        fmt.Print(err.Error())
        os.Exit(1)
    }

    responseData, err := ioutil.ReadAll(response.Body)
    if err != nil {
        log.Fatal(err)
    }
    fmt.Println(string(responseData))
return ""
}

index.ts nextjs file that I am using for frontend

export async function getServerSideProps() {
  const {status} = await fetch("http://localhost:8000/status").then(x => x.json());
  const {username} = await fetch("http://localhost:8000/username").then(x => x.json());
  let res = await {username: JSON, status: JSON}; 
  console.log("res: ", res);
  return {
    props: {
      status: status,
      username: username,
    }
  }
}

export default function Home({status, username}: {status: any, username: any}) {
  return (
    <div className="">


      <main className="">
        <h1 className="">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        <div>Status is: {status}, your username is: {username}</div>
      </main>
    </div>
  )
}

GetData() currently returns a ""

You could update GetData to return []byte:

func GetData() ([]byte, error) {
	response, err := http.Get("http://pokeapi.co/api/v2/pokedex/kanto/")
	if err != nil {
		return nil, err
	}

	responseData, err := ioutil.ReadAll(response.Body)
	if err != nil {
		return nil, err
	}
	return responseData, nil
}

You can then update the /username branch to be as follows:

} else if req.URL.Path == "/username" {
	data, err := GetData()
	if err != nil {
		http.Error(rw, err.Error(), http.StatusInternalServerError)
		return
	}
	resp = data
} 

Your data is already bytes of json, so you do not need json.NewEncoder().Encode, you can just re-assign the resp value you have and write those bytes directly.

If you did need to do write json you can't write to the response-writer before writing headers, so you might need to move those around if you end up doing more complicated things with writing response bodies.

Your GetData() function just returns ""

You should probably create a struct to unmarshal the json into and then return that marshaled. Or you could just pass on the bytes.