Next.js动态路由报错求助：404及ENOTDIR错误排查

一、Link组件使用中的错误情况 #

我正在从零开发Next.js应用，后续计划集成Shopify/Hydrogen。按照Next/Link文档使用<Link>组件创建动态链接时，因为Link要求包含<a>子元素，我写了MyButton组件：

import Link from 'next/link'
import React from 'react'

const MyButton = React.forwardRef(({ href }, ref) => {
  return (
    <a href={href} ref={ref} className={styles.imgc}>
     <img
      className={styles.img}
      src="weatherbutton.jpg"
      width="100"
      height="50"> 
     </img>
     <div>&rarr; Weather</div>
    </a>
  )
})

使用时的代码如下：

<Link href="/satweather" passHref>
 <Weather />
</Link>

这个组件和其他Link组件一起放在单个<div>内（后续打算改成<ul><li>结构）。一开始出现404错误，修改后又收到新错误：

errno: -20,
code: 'ENOTDIR',
syscall: 'access',
path: '/mnt/c/Users/root/Desktop/satrange/sat/pages/satweather.js/index.ts'

二、Shopify Hydrogen集成的文件结构疑问 #

另外想咨询几个问题：

• 我要引入的是客户端文件，是否需要为Shopify服务器页面单独建文件夹？
• 放在api文件夹可行吗？
• 能否在其他文件夹创建后，通过通用js文件仅导出服务器相关内容？

解决建议 #

针对Link组件的错误 #

1. 检查页面文件路径：错误路径显示Next.js把satweather.js当成了文件夹，试图读取里面的index.ts，这说明你的页面文件结构有问题。确保/satweather路由对应的文件是pages/satweather.tsx（或.js/.jsx），不要把页面文件命名为satweather.js再嵌套index.ts，这会导致路由解析混乱。
2. 组件名匹配检查：使用Link时你写的是<Weather />，但定义的组件是MyButton，这里大概率是组件名写错了，应该改成<MyButton />，否则passHref传递的href属性无法被正确接收。
3. 确认Router版本：如果是Next.js 13+的App Router，Link的用法有调整；如果是Pages Router，当前写法没问题，但要确保forwardRef正确传递了ref和href属性。

针对Shopify Hydrogen的文件结构问题 #

• 无需单独建服务器页面文件夹：Hydrogen可以和Next.js现有结构融合，客户端文件直接放在components、pages等常规目录即可，服务器端逻辑按需放置。
• api文件夹完全可用：Hydrogen的服务器端请求（比如获取Shopify商品数据）可以封装成api路由放在pages/api下，这个目录本身就是Next.js用来处理后端请求的，非常适合存放服务器相关代码。
• 支持通用文件拆分导出：可以在lib等自定义文件夹下创建通用文件，通过环境判断（比如typeof window !== 'undefined'）区分客户端和服务器逻辑，或者拆分文件后仅导出服务器相关内容，客户端只引入需要的部分。

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