The default export is not a React Component in page: “/” NextJS

Date: 23/01/2021

I’ve also faced this issue on my Next.js app.

If you’re using a functional component instead of a class component you’ll get this error as well in some casses. Exactly I don’t know why this is happening but I just resolved this issue by exporting my component at the bottom of the page.

Like this,

Case Error scenario:

export default function Home(){
      return (<>some stuffs</>)
}

Home.getInitialProps = async (ctx) => {
    return {}
}

Error: The default export is not a React Component in page: "/"

How to resolved it?

I just put my export at the bottom my page and then it’ll be gone.

Like this,

function Home(){
      return (<>some stuffs</>)
}

Home.getInitialProps = async (ctx) => {
    return {}
}

export default Home;

Hopefully, it’ll be helpful for you!