Next.js项目Index页面空白求助：React组件渲染异常排查

1. Index组件未正确返回内容 #

你的index.js存在函数嵌套定义且无返回值的问题，外层Index函数没有返回任何JSX，这是页面空白的核心原因。

修复后的index.js代码：

import App from "@/components/app";

const Index = () => { 
  return <App />;
};

export default Index;

// 或者更简洁的写法：
// const Index = () => <App />;
// export default Index;

2. Next.js图片引用方式错误 #

Next.js对静态资源的加载有特定规则，直接使用相对路径./GloboLogo.png无法正确识别图片。请将GloboLogo.png放到项目根目录的public文件夹下，然后修改图片路径为根路径：

修改后的banner.js代码：

const Banner = () => {
    return (
        <header>
            <div>
                <img src="/GloboLogo.png" alt="logo" />
            </div>
            <div>
                Providing houses all over the world
            </div>
        </header>
    );
};

export default Banner;

3. 组件导入路径验证 #

如果你的项目没有配置@/components路径别名，建议改用相对路径导入组件，避免路径解析错误：

// index.js中修改导入路径
import App from '../components/app';

最后检查 #

• 确认文件目录结构正确：banner.js、app.js需放在components文件夹内，index.js在pages文件夹（Next.js 12及以前）或app/page.js（Next.js 13+ App Router）
• 重启npm run dev服务，确保所有修改生效

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