aboutsummaryrefslogtreecommitdiff
path: root/examples/hello-next/pages/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'examples/hello-next/pages/index.tsx')
-rw-r--r--examples/hello-next/pages/index.tsx82
1 files changed, 82 insertions, 0 deletions
diff --git a/examples/hello-next/pages/index.tsx b/examples/hello-next/pages/index.tsx
new file mode 100644
index 000000000..b87c67a84
--- /dev/null
+++ b/examples/hello-next/pages/index.tsx
@@ -0,0 +1,82 @@
+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 (
+ <div className={styles.container}>
+ <Head>
+ <title>Fo</title>
+ <meta name="description" content="Generated by create next app" />
+ <link rel="icon" href="/favicon.ico" />
+ </Head>
+
+ <Title />
+
+ <main className={styles.main}>
+ <h1 className={styles.title}>
+ Welcome to <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 &rarr;</h2>
+ <p>Link</p>
+ </div>
+ </Link>
+
+ <button
+ onClick={() => router.push("/foo/bar/third")}
+ className={styles.card}
+ style={{ backgroundColor: "white" }}
+ >
+ <h2>Third Page &rarr;</h2>
+ <p>button, router.push()</p>
+ </button>
+
+ <a
+ href="https://github.com/vercel/next.js/tree/master/examples"
+ className={styles.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={styles.card}
+ >
+ <h2>Deploy &rarr;</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>
+ );
+}