如何解决 Nextjs 中的“路由处理程序没有返回响应”错误

Question

我第一次使用 Next.js 并尝试构建我的项目，但我收到此错误，但我不知道是什么原因造成的。根据我在网上的发现，人们在调用 API 或数据库时会得到这个，但在我的代码中，我只有一个数组映射，其中包含公共文件夹中的一些图像。

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:\Users\Admin\Documents\mareko24\mareko-site24\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:63974
    at async eU.execute (C:\Users\Admin\Documents\mareko24\mareko-site24\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:53964)    
    at async eU.handle (C:\Users\Admin\Documents\mareko24\mareko-site24\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:65062)     
    at async doRender (C:\Users\Admin\Documents\mareko24\mareko-site24\node_modules\next\dist\server\base-server.js:1317:42)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\Admin\Documents\mareko24\mareko-site24\node_modules\next\dist\server\base-server.js:1527:40)

我的代码看起来像这样。如果这不是传统格式，请原谅我，我仍在学习，但我不知道我做错了什么。

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>
  );
}

当我在本地运行它时，我没有任何问题，但在控制台中我收到此错误：

GET http://localhost:3000/icon?131e4f3823da378c 500 (Internal Server Error)

我尝试导入每个图像，但仍然遇到相同的错误。我还尝试设置某种 try/catch 块，但无法使其按预期工作。

Answer 1

如果所有图片都在

public

文件夹内，您可以直接参考如下图片。

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

如果我们没有指定直接路径，

Image

组件将渲染公共文件夹中的图像