1 files changed, 30 insertions, 21 deletions
diff --git a/demos/hello-next/pages/index.tsx b/demos/hello-next/pages/index.tsx
index 621f2c401..0c5c1086f 100644
--- a/demos/hello-next/pages/index.tsx
+++ b/demos/hello-next/pages/index.tsx
@@ -2,48 +2,57 @@ 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>Create Next Ap123p</title>
+        <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}>
-          Welcom <a href="https://nextjs.org">Next.js!</a>
+          Welcome <a href="https://nextjs.org">Next.js!</a>
         </h1>
 
-        <Title />
-
-        <Link href="/blue">
-          <a>Blue page</a>
-        </Link>
-
         <p className={styles.description}>
           Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
         <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
+          <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://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          <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>
-          <Link href="/hi">
-            <a className={styles.card}>
-              <h2>Examples &rarr;</h2>
-              <p>Discover and deploy boilerplate example Next.js projects.</p>
-            </a>
-          </Link>
+
           <a
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
             className={styles.card}