Merge branch 'canary' into add/new-sass-examples

.github/workflows/test_react_next.yml

@@ -6,39 +6,45 @@ on:
 name: Test react@next
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
+  # build:
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v2
 
-      - run: cd repo && yarn install --frozen-lockfile --check-files
-        env:
-          NEXT_TELEMETRY_DISABLED: 1
+  #     - run: yarn install --frozen-lockfile --check-files
+  #       env:
+  #         NEXT_TELEMETRY_DISABLED: 1
 
-      - run: cd repo && yarn upgrade react@next react-dom@next -W --dev
+  #     - run: yarn upgrade react@next react-dom@next -W --dev
 
-      - uses: actions/cache@v1
-        id: cache-build
-        with:
-          path: '.'
-          key: ${{ github.sha }}
+  #     - uses: actions/cache@v1
+  #       id: cache-build
+  #       with:
+  #         path: '.'
+  #         key: ${{ github.sha }}
 
   testAll:
     name: Test All
     runs-on: ubuntu-latest
-    needs: build
+    # needs: build
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      HEADLESS: true
     strategy:
       fail-fast: false
       matrix:
         group: [1, 2, 3, 4, 5, 6]
     steps:
-      - uses: actions/cache@v1
-        id: restore-build
-        with:
-          path: '.'
-          key: ${{ github.sha }}
-
-      - run: cd repo && node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3
-        env:
-          NEXT_TELEMETRY_DISABLED: 1
-          HEADLESS: true
+      # - uses: actions/cache@v1
+      #   id: restore-build
+      #   with:
+      #     path: '.'
+      #     key: ${{ github.sha }}
+
+      - uses: actions/checkout@v2
+
+      - run: yarn install --frozen-lockfile --check-files
+
+      - run: yarn upgrade react@next react-dom@next -W --dev
+
+      - run: node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3

docs/basic-features/static-file-serving.md

@@ -16,6 +16,10 @@ function MyImage() {
 export default MyImage
 ```
 
-> Don't name the `public` directory anything else. The name can't be changed and is the only directory that **Next.js** uses to serve static assets.
+This folder is also useful for `robots.txt`, Google Site Verification, and any other static files (including `.html`)!
 
-> If you ever add a static asset that conflicts with the name of a page in the `pages` directory, the public file will be ignored in favor of the file in `pages`.
+> **Note**: Don't name the `public` directory anything else. The name cannot be changed and is the only directory used to serve static assets.
+
+> **Note**: Be sure to not have a static file with the same name as a file in the `pages/` directory, as this will result in an error.
+>
+> Read more: <http://err.sh/next.js/conflicting-public-file-page>

examples/with-google-analytics/README.md

@@ -1,6 +1,6 @@
 # Example app with analytics
 
-This example shows how to use [Next.js](https://github.com/zeit/next.js) along with [Google Analytics](https://developers.google.com/analytics/devguides/collection/gtagjs/). A custom [\_document](https://github.com/zeit/next.js/#custom-document) is used to inject [tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) and track [pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages) and [event](https://developers.google.com/analytics/devguides/collection/gtagjs/events).
+This example shows how to use [Next.js](https://github.com/zeit/next.js) along with [Google Analytics](https://developers.google.com/analytics/devguides/collection/gtagjs/). A custom [\_document](https://nextjs.org/docs/advanced-features/custom-document) is used to inject [tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) and track [pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages) and [event](https://developers.google.com/analytics/devguides/collection/gtagjs/events).
 
 ## Deploy your own
 

lerna.json

@@ -12,5 +12,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.2.2-canary.2"
+  "version": "9.2.2-canary.3"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.2.2-canary.2",
+  "version": "9.2.2-canary.3",
   "keywords": [
     "react",
     "next",

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>