import Head from "next/head"; import Image from "next/image"; import styles from "../styles/Home.module.css"; import Link from "next/link"; import { useRouter } from "next/router"; import Title from "../components/Title"; export default function Home() { const router = useRouter(); return (
Fo <main className={styles.main}> <h1 className={styles.title}> Welcome <a href="https://nextjs.org">Next.js!</a> </h1> <p className={styles.description}> Get started by editing{" "} <code className={styles.code}>pages/index.js</code> </p> <div className={styles.grid}> <Link href="/second"> <div className={styles.card}> <h2>Second Page →</h2> <p>Link</p> </div> </Link> <button onClick={() => router.push("/foo/bar/third")} className={styles.card} style={{ backgroundColor: "white" }} > <h2>Third Page →</h2> <p>button, router.push()</p> </button> <a href="https://github.com/vercel/next.js/tree/master/examples" className={styles.card} > <h2>Examples →</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={styles.card} > <h2>Deploy →</h2> <p> Instantly deploy your Next.js site to a public URL with Vercel. </p> </a> </div> </main> <footer className={styles.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={styles.logo}> <img src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> </span> </a> </footer> </div> ); }