NextJS 13.5.4页面路由404及ESLint解析错误求助

一、页面404问题修复 #

1. 修正组件导入路径 #

你的page.jsx中导入HomePage的路径错误，若项目结构为src/app/page.jsx和src/pages/index.jsx，需将导入路径从./pages/index改为../pages/index，否则会找不到目标模块：

// src/app/page.jsx
import HomePage from '../pages/index';

2. 修复组件未导入依赖 #

index.jsx中使用了<Box>但未导入，需补充对应依赖的导入（以Chakra UI为例）：

// src/pages/index.jsx
import React from 'react';
import HeroSection from '../components/HeroSection';
import { Box } from '@chakra-ui/react'; // 新增Box组件导入

function HomePage() {
  return (
    <Box>
      <HeroSection />
    </Box>
  );
}

export default HomePage;

3. 确认App Router结构合规 #

Next.js 13 App Router要求根页面必须是app/page.jsx，根布局为app/layout.jsx，确保这两个文件位于正确的app目录下。若不需要Pages Router，可直接删除pages目录，将页面逻辑迁移至app目录下。

二、ESLint "Cannot find module 'next/babel'"错误修复 #

1. 修正ESLint配置 #

删除错误的parser: '@next/next'配置（@next/next并非合法的ESLint解析器），简化配置如下：

// .eslintrc.js
module.exports = {
  extends: ['next/core-web-vitals', 'prettier'],
  parserOptions: {
    project: './jsconfig.json',
  },
  plugins: ['prettier'],
};

2. 调整jsconfig.json配置 #

将jsx选项改为react-jsx，适配React 18自动JSX转换（Next.js 13默认使用该模式）：

// jsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": "src"
  }
}

3. 清理缓存并重装依赖 #

执行以下命令清理项目缓存，重新安装依赖：

rm -rf node_modules .next
npm install
npm run dev

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