如何解决Next.js中‘路由处理器未返回响应’错误

问题详情 #

首次使用Next.js构建项目时，出现No response is returned from route handler错误。页面本地运行视觉上无异常，但控制台持续弹出提示：GET http://localhost:3000/icon?131e4f3823da378c 500 (Internal Server Error)。

代码仅做了遍历public文件夹内图片数组渲染的操作，尝试过单独导入图片、添加try/catch均未解决问题。

错误栈信息 #

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

解决办法 #

这个错误的核心原因是你将页面组件命名为icon.tsx，Next.js会把名为icon的文件识别为元数据路由（例如favicon相关的路由处理程序），而非普通页面组件。路由处理程序要求必须返回Response或NextResponse，但你的组件返回的是React元素，不符合要求，因此触发500错误。

修复步骤： #

• 把src/app/icon.tsx重命名为其他名称，比如IconGallery.tsx或IconPage.tsx
• 同步修改路由访问路径（如果之前通过/icon访问，现在要改成对应新文件名的路径，比如/icon-gallery）
• 重启Next.js开发服务，错误即可消失

图片导入优化（可选） #

在Next.js App Router中，public文件夹内的图片建议直接使用字符串路径（如/choso.jpg），而非require，更符合最佳实践。修改后的数组示例：

const imageArray = [
    {name: 'choso', text: "i hate the rain", file: '/choso.jpg'},
    {name: 'pink planet', text: "the garden", file: '/cute-planet.gif'},
    // 其余图片条目同理修改
]

内容的提问来源于stack exchange，提问作者Kay James