Update the default template of create-next-app (#10327)

* Update the default template for create-next-app * Fix link
vercel · Jan 30, 2020 · 81fd704 · 81fd704
1 parent 90015e3
commit 81fd704
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 91 deletions.
diff --git a/packages/create-next-app/templates/default/components/nav.js b/packages/create-next-app/templates/default/components/nav.js
diff --git a/packages/create-next-app/templates/default/pages/index.js b/packages/create-next-app/templates/default/pages/index.js
@@ -1,85 +1,194 @@
 import React from 'react'
 import Head from 'next/head'
-import Nav from '../components/nav'
 
 const Home = () => (
-  <div>
+  <div className="container">
     <Head>
-      <title>Home</title>
+      <title>Create Next App</title>
       <link rel="icon" href="/favicon.ico" />
     </Head>
 
-    <Nav />
+    <main>
+      <h1 className="title">
+        Welcome to <a href="https://nextjs.org">Next.js!</a>
+      </h1>
 
-    <div className="hero">
-      <h1 className="title">Welcome to Next.js!</h1>
       <p className="description">
-        To get started, edit <code>pages/index.js</code> and save to reload.
+        Get started by editing <code>pages/index.js</code>
       </p>
 
-      <div className="row">
+      <div className="grid">
         <a href="https://nextjs.org/docs" className="card">
           <h3>Documentation &rarr;</h3>
-          <p>Learn more about Next.js in the documentation.</p>
+          <p>Find in-depth information about Next.js features and API.</p>
         </a>
+
         <a href="https://nextjs.org/learn" className="card">
-          <h3>Next.js Learn &rarr;</h3>
-          <p>Learn about Next.js by following an interactive tutorial!</p>
+          <h3>Learn &rarr;</h3>
+          <p>Learn about Next.js in an interactive course with quizzes!</p>
         </a>
+
         <a
           href="https://github.com/zeit/next.js/tree/master/examples"
           className="card"
         >
           <h3>Examples &rarr;</h3>
-          <p>Find other example boilerplates on the Next.js GitHub.</p>
+          <p>Discover and deploy boilerplate example Next.js projects.</p>
+        </a>
+
+        <a href="https://zeit.co/new/nextjs" className="card">
+          <h3>Deploy &rarr;</h3>
+          <p>
+            Instantly deploy your Next.js site to a public URL with ZEIT Now.
+          </p>
         </a>
       </div>
-    </div>
+    </main>
+
+    <footer>
+      <a href="https://zeit.co" target="_blank" rel="noopener noreferrer">
+        Powered by <img src="/zeit.svg" alt="ZEIT Logo" />
+      </a>
+    </footer>
 
     <style jsx>{`
-      .hero {
+      .container {
+        min-height: 100vh;
+        padding: 0 0.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      main {
+        padding: 5rem 0;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      footer {
         width: 100%;
-        color: #333;
+        height: 100px;
+        border-top: 1px solid #eaeaea;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      footer img {
+        margin-left: 0.5rem;
+      }
+
+      footer a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .title a {
+        color: #0070f3;
+        text-decoration: none;
+      }
+
+      .title a:hover,
+      .title a:focus,
+      .title a:active {
+        text-decoration: underline;
       }
+
       .title {
         margin: 0;
-        width: 100%;
-        padding-top: 80px;
         line-height: 1.15;
-        font-size: 48px;
+        font-size: 4rem;
       }
+
       .title,
       .description {
         text-align: center;
       }
-      .row {
-        max-width: 880px;
-        margin: 80px auto 40px;
+
+      .description {
+        line-height: 1.5;
+        font-size: 1.5rem;
+      }
+
+      code {
+        background: #fafafa;
+        border-radius: 5px;
+        padding: 0.75rem;
+        font-size: 1.1rem;
+        font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+      }
+
+      .grid {
         display: flex;
-        flex-direction: row;
-        justify-content: space-around;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+
+        max-width: 800px;
+        margin-top: 3rem;
       }
+
       .card {
-        padding: 18px 18px 24px;
-        width: 220px;
+        margin: 1rem;
+        flex-basis: 45%;
+        padding: 1.5rem;
         text-align: left;
+        color: inherit;
         text-decoration: none;
-        color: #434343;
-        border: 1px solid #9b9b9b;
+        border: 1px solid #eaeaea;
+        border-radius: 10px;
+        transition: color 0.15s ease, border-color 0.15s ease;
       }
-      .card:hover {
-        border-color: #067df7;
+
+      .card:hover,
+      .card:focus,
+      .card:active {
+        color: #0070f3;
+        border-color: #0070f3;
       }
+
       .card h3 {
-        margin: 0;
-        color: #067df7;
-        font-size: 18px;
+        margin: 0 0 1rem 0;
+        font-size: 1.5rem;
       }
+
       .card p {
         margin: 0;
-        padding: 12px 0 0;
-        font-size: 13px;
-        color: #333;
+        font-size: 1.25rem;
+        line-height: 1.5;
+      }
+
+      @media (max-width: 600px) {
+        .grid {
+          width: 100%;
+          flex-direction: column;
+        }
+      }
+    `}</style>
+
+    <style jsx global>{`
+      html,
+      body {
+        padding: 0;
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+          Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+      }
+
+      * {
+        box-sizing: border-box;
       }
     `}</style>
   </div>

diff --git a/packages/create-next-app/templates/default/public/zeit.svg b/packages/create-next-app/templates/default/public/zeit.svg