Приложение Next.js React не отображает содержимое пользовательского компонента

Я новичок в реакции, и в настоящее время пробую простой пример. Я только что создал связанную индексную страницу и страницу с информацией. Затем я создал настраиваемый компонент приложения, который должен отображать все в контейнере, вместо этого он просто показывает кнопки home / about и текст «Hello next.js» (он не отображается («На каждой странице»). См. Макет страницы ниже

На каждой странице *** это не отображается Кнопка домашней страницы | Кнопка "О странице" Привет next.js

Кто-нибудь может увидеть ошибки? Я пробовал искать, но все еще не вижу, где я ошибаюсь

// _app.js
import App, {Container} from 'next/app';

//define the custome App - a class which extends the 
default App
class myApp extends App {
return() {
    //compent will be the page content
    // e.g. index or about
    const {Component, pageProps} = this.props;

    return (
        //container contains page content
        <Container>
            {/* Content which will be shared */}
            <p>On every Page</p>
            {/* Component is page e.g. index or about 
*/}
            <Component {...pageProd}/>
        </Container>

    );
}
}
export default myApp;


//index.js
import Link from 'next/link'

// Pass this content as 'props' to child components
const Index = props => (
  <div>
<Link href = "/index">
    <button>Home page</button>
</Link>
<Link href = "/about">
    <button>About page</button>
</Link>


<p>Hello Next.js</p>
</div>
 )

export default Index


// about.js
import Link from 'next/link'

// Pass this content as 'props' tp child components
const About = props => (
<div>
<Link href = "/">
    <button>Home page</button>
</Link>
<Link href = "/about">
    <button>About page</button>
</Link>


<p>Hello Next.js</p>
</div>
)

export default About