My Index.js is a blank page and I don't think it should be

I am following a course on learning how to work with react. For some reason my index page isn’t showing anything.

I have 4 files – banner.js, app.js, index.js and GloboLogo.png (plus all the other files from running npx create-next-app globomantics).

My banner file is this

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

export default Banner;

My app file is

import Banner from "./banner";

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

export default App;

and my index is

import App from "@/components/app";

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

export default Index;

When I run npm run dev I browse to the page and it’s blank.

I’ve saved all the files.

Can anyone please help?

I was expecting to see a page with the GloboLogo and ‘Providing houses all over the world’. I’ve had a look through the code and can’t see anything. Tried removing the imports and let VS code fill in the details.

>Solution :

Your Index page is not returning anything:

import App from "@/components/app";

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

export default Index;

It should be:

import App from "@/components/app";

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

export default Index;