CODEWITHSUNDEEP
javascriptpostnext.jshttp-headersnext.js13
Dallas
Dallas

Reputation: 65

Nextjs 13.4.6 TypeError when doing a fetch Post request

when I perform a post request to send my object to the api route I am getting a header error.

  • error TypeError: Cannot read properties of undefined (reading 'headers') at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:277:61)

the post request is in a client side page below is my page.js /app/register/page.js

        "use client"
    import { useState } from 'react'
    import { useRouter } from 'next/navigation'
    
    export default function Register() {
    
        const router = useRouter()
        const [data, setData ] = useState({
            memberNumber: "",
            email: "",
            password: "",
            passwordVerify: ""
        })
    
        const regiserUser = async (e) => {
            e.preventDefault()
            console.log({data})
            const response = await fetch('/api/register',{method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify({data})})
            const userInfo = response.json()
            console.log(userInfo)
          
          //  router.push('/login')
        }
      return (
        <>
        {/*
          This example requires updating your template:
    
          ```
          <html class="h-full bg-white">
          <body class="h-full">
          ```
        */}
        <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
          <div className="sm:mx-auto sm:w-full sm:max-w-sm">
            <img
              className="mx-auto h-10 w-auto"
              src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
              alt="Your Company"
            />
            <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
              Sign in to your account
            </h2>
          </div>
    
          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
            <form className="space-y-6" action="#" method="POST" onSubmit={regiserUser}>
            <div>
                <label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
                  Member Number
                </label>
                <div className="mt-2">
                  <input
                    value={data.memberNumber}
                    onChange={(e) =>{setData({...data, memberNumber: e.target.value})}}
                    id="memberNumber"
                    name="memberNumber"
                    type="text"
                    require="true"
                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  />
                </div>
              </div>
              <div>
                <label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
                  Email address
                </label>
                <div className="mt-2">
                  <input
                  value={data.email}
                  onChange={(e) => {setData({...data, email: e.target.value})}}
                    id="email"
                    name="email"
                    type="email"
                    require="true"
                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  />
                </div>
              </div>
    
              <div>
                <div className="flex items-center justify-between">
                  <label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
                    Password
                  </label>
                </div>
                <div className="mt-2">
                  <input
                  value={data.password}
                  onChange={(e) => {setData({...data, password: e.target.value})}}
                    id="password"
                    name="password"
                    type="password"
                    require="true"
                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  />
                </div>
              </div>
    
            
              <div>
                <div className="flex items-center justify-between">
                  <label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
                    Password Verify
                  </label>
                </div>
                <div className="mt-2">
                  <input
                  value={data.passwordVerify}
                  onChange={(e) => {setData({...data, passwordVerify: e.target.value})}}
                    id="passwordVerify"
                    name="passwordVerify"
                    type="password"
                    require="true"
                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  />
                </div>
              </div>
    
              <div>
                <button
                  type="submit"
                  className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                >
                  Sign in
                </button>
              </div>
            </form>
    
            
          </div>
        </div>
      </>

  )
}

This is the way I have created post fetches in the past with version 12 of next and what I have seen from other programmers on different videos. I am posting my route.js here too. I think I might be missing something or just not understanding the new fetch process. The only thing that changed is you have to async and await the the fetch from what i understand. /app/api/register/route.js

> import bcrypt from 'bcrypt'  import { client } from
> "../../../utilites/database"
> 
> export async function POST(request) {
>     const data = await request.body.data
>     console.log(data)
> 
> }

Upvotes: 1

Views: 324

Answers (1)

Dallas
Dallas

Reputation: 65

So what I found is that you have to use a return when working with the serverside api route.js pages you also should use NextResposne and that will get rid of the TypeError

Example

return new NextResposne(JSON.stringify({message: "user created"})

Upvotes: 1

Related Questions