return (

<>

<div className="container">

<Head>

<title>Create Next App</title>

<meta name="description" content="Generated by create next app" />

<link rel="icon" href="/favicon.ico" />

</Head>

<main className="main">

<h1 className="title">

Welcome to <a href="https://nextjs.org">Next.js!</a>

</h1>

<p className="description">

Get started by editing{" "}

<code className={styles.code}>pages/index.js</code>

</p>

<div className="grid">

<a href="https://nextjs.org/docs" className="card">

<h2>Documentation &rarr;</h2>

<p>Find in-depth information about Next.js features and API.</p>

</a>

<a href="https://nextjs.org/learn" className="card">

<h2>Learn &rarr;</h2>

<p>Learn about Next.js in an interactive course with quizzes!</p>

</a>

<a

href="https://github.com/vercel/next.js/tree/master/examples"

className="card"

>

<h2>Examples &rarr;</h2>

<p>Discover and deploy boilerplate example Next.js projects.</p>

</a>

<a

href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"

className="card"

>

<h2>Deploy &rarr;</h2>

<p>

Instantly deploy your Next.js site to a public URL with Vercel.

</p>

</a>

</div>

</main>

<footer className="footer">

<a

href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"

target="_blank"

rel="noopener noreferrer"

>

Powered by{" "}

<span className="logo">

<Image

src="/vercel.svg"

alt="Vercel Logo"

width={72}

height={16}

/>

</span>

</a>

</footer>

</div>

<style jsx>{styles}</style>

</>

);