Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to resolve "No response is returned from route handler" error in Nextjs

I’m using Next.js for the first time and trying to build my project but I get this error and I don’t know what’s causing it. From what I find online people get this when calling an API or database but in my code I just have an array map with some images from the public folder.

Error: No response is returned from route handler 'next-metadata-route-loader?page=%2Ficon%2F%5B%5B...__metadata_id__%5D%5D%2Froute&filePath=C%3A%5CUsers%5CAdmin%5CDocuments%5Cmareko24%5Cmareko-site24%5Csrc%5Capp%5Cicon.tsx&isDynamic=1!?__next_metadata_route__'. Ensure you return a `Response` or a `NextResponse` in all branches of your handler.
    at C:UsersAdminDocumentsmareko24mareko-site24node_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:63974
    at async eU.execute (C:UsersAdminDocumentsmareko24mareko-site24node_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:53964)    
    at async eU.handle (C:UsersAdminDocumentsmareko24mareko-site24node_modulesnextdistcompilednext-serverapp-route.runtime.dev.js:6:65062)     
    at async doRender (C:UsersAdminDocumentsmareko24mareko-site24node_modulesnextdistserverbase-server.js:1317:42)
    at async cacheEntry.responseCache.get.routeKind (C:UsersAdminDocumentsmareko24mareko-site24node_modulesnextdistserverbase-server.js:1527:40)

My code looks like this. Forgive me if this is not conventional format, I’m still learning but I can’t figure out what I’m doing wrong.

export default function Icon() {

    const imageArray = [
        {name: 'choso', text: "i hate the rain", file: require('../../public/choso.jpg')},
        {name: 'pink planet', text: "the garden", file: require('../../public/cute-planet.gif')},
        {name: 'crash', text: "better off", file: require('../../public/crash.gif')},
        {name: 'maomao', text: "VDTD", file: require('../../public/maomao.gif')},
        {name: 'gojo is bae', text: "mrs. misc", file: require('../../public/gojo-gojo-satoru.gif')},
        {name: 'gary come home', text: "tell me every thing", file: require('../../public/gary.gif')},
        {name: 'gir', text: "roofie", file: require('../../public/gir-dance.gif')},
        {name: 'kuromi', text: "back seat", file: require('../../public/kuromi-sparkle.gif')},
        {name: 'gojo and yuji <3', text: "blow it", file: require('../../public/gojo-yuji-whisper-transparent-gojo.gif')}
    ]

    
    return (
    <div className='flex flex-wrap pt-[8vh] pl-[4vw] pr-[4vw] z-10 text-clip justify-normal'>
        {imageArray.map((item, i) => (
           <div className='w-[15vw] max-w-[100px] h-auto text-center text-[2vw]' key={i}> 
                <Image 
                    className='aspect-square'
                    src={item.file} 
                    sizes="10vw"
                    style={{
                        width: '100%',
                        height: 'auto',  
                    }}
                    alt={item.name}></Image>
                <p>{item.text}</p>
            </div>
        ))}
    </div>
  );
}

When I run it locally I don’t have any issues, but in the console I get this error: GET http://localhost:3000/icon?131e4f3823da378c 500 (Internal Server Error)

I’ve tried importing every image but I still get the same errors. Also was trying to set up some kind of try/catch block I couldn’t get it to work as I expected.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. I had to change the folder that this component was in. I had it in the same folder as the page. The /src/app folder had both page.tsx and icon.tsx I moved the icon.tsx to /src/app/api/ and that resolved it. I feel silly for not realizing that but this page of the Next.js docs helped: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#route-resolution


  2. 0

    if all the images are inside the public folder, you can directly refer the images like below.

    const imageArray = [
    {
      name: "choso",
      text: "i hate the rain",
      file: "/choso.jpg",
    },
    {
      name: "pink planet",
      text: "the garden",
      file: "/cute-planet.gif",
    }
];

    The Image component will render the images from the public folder if we have not specified a direct path

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search