Calling route handler in client component

[surjeet88]

Hi Guys! I am using next js 14 app router. In that i am making request to appwrite storage and for this i have my logic in route.ts file
import { IFetchResponse, IFileData } from "@/types/types";
import { NextResponse } from "next/server";

export async function Get(){
const response = await fetch('https://cloud.appwrite.io/v1/storage/buckets/6/files', {
headers: {
'X-Appwrite-Project': 'Id of my project',
'Content-Type': 'application/json',
},

    })

    if (!response.ok) {
        //study about the error.js
        throw new Error('Failed to fetch')
    }

    const res:IFetchResponse = await response.json()
    const id:IFileData[] = res.files
    return NextResponse.json({id});
}

i want to call it in my client compnent using swr
"use client"
import React from 'react'
import { Carousel } from "react-responsive-carousel"
import { IFetchResponse, IFileData, } from '@/types/types'
import Image from 'next/image'
// import Carousel from 'react-elastic-carousel'
import "react-responsive-carousel/lib/styles/carousel.min.css"
import useSWR from 'swr'

//
const Hero = () => {
const fetcher = (url:string) => {
fetch(url).then((res) => res)
}
const { data, error, isLoading } = useSWR(
"/api/hero",
fetcher
);
if (error) return console.log("An error has occurred.");
if (isLoading) return console.log("Loading...");
console.log("This is the data" ,data)
return (

<>
<Carousel showArrows={true}
        showIndicators={true}
        infiniteLoop={true}
        dynamicHeight={true}
        // autoPlay={true}
        // interval={2000}
        emulateTouch={true}
        showStatus={false}
        stopOnHover={true}
        showThumbs={false}
         > 
 
 <div >
   <img src="/watch.jpg" alt='watch' className='h-70 w-screen'/>
 </div>
 <div>
 <img src="/doumbell.jpg" alt='doumbell' className='h-70 w-screen'/>
 </div>
 <div>
 <img src="/doumbell.jpg" alt='doumbell' className='h-70 w-screen'/>
 </div>
</Carousel> 

</>

)
}

export default Hero
but when i logging the data i am getting undefined but it kept loading. Is my @approach incorrect. Pls suggest me a correct approach.Thanks

[icyJoseph]

Try renaming your method to GET, all uppercased:

// all uppercased
export function GET() {
// rest of your implementation

[surjeet88]

Thansk budy it worked

[icyJoseph]

Awesome! Please don't forget to mark as answered :)