Merge branch 'canary' into static-500-getserversideprops

docs/api-reference/create-next-app.md

@@ -12,10 +12,19 @@ npx create-next-app
 yarn create next-app
 ```
 
+You can create a [TypeScript project](https://github.com/vercel/next.js/blob/canary/docs/basic-features/typescript.md) with the `--ts, --typescript` flag:
+
+```bash
+npx create-next-app --ts
+# or
+yarn create next-app --typescript
+```
+
 ### Options
 
 `create-next-app` comes with the following options:
 
+- **--ts, --typescript** - Initialize as a TypeScript project.
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
 - **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app`

docs/basic-features/typescript.md

@@ -11,9 +11,23 @@ description: Next.js supports TypeScript by default and has built-in types for p
   </ul>
 </details>
 
-Next.js provides an integrated [TypeScript](https://www.typescriptlang.org/) experience out of the box, similar to an IDE.
+Next.js provides an integrated [TypeScript](https://www.typescriptlang.org/)
+experience out of the box, similar to an IDE.
 
-To get started, create an empty `tsconfig.json` file in the root of your project:
+## `create-next-app` support
+
+You can create a TypeScript project with [`create-next-app`](https://nextjs.org/docs/api-reference/create-next-app) using the `--ts, --typescript` flag like so:
+
+```
+npx create-next-app --ts
+# or
+yarn create next-app --typescript
+```
+
+## Existing projects
+
+To get started in an existing project, create an empty `tsconfig.json` file in
+the root folder:
 
 ```bash
 touch tsconfig.json

errors/placeholder-blur-data-url.md

@@ -0,0 +1,15 @@
+# `placeholder=blur` without `blurDataURL`
+
+#### Why This Error Occurred
+
+You are attempting use the `next/image` component with `placeholder=blur` property but no `blurDataURL` property.
+
+The `blurDataURL` might be missing because your using a string for `src` instead of a static import.
+
+Or `blurDataURL` might be missing because the static import is an unsupported image format. Only jpg, png, and webp are supported at this time.
+
+#### Possible Ways to Fix It
+
+- Add a [`blurDataURL`](https://nextjs.org/docs/api-reference/next/image#blurdataurl) property, the contents should be a small Data URL to represent the image
+- Change the [`src`](https://nextjs.org/docs/api-reference/next/image#src) property to a static import with one of the supported file types: jpg, png, or webp
+- Remove the [`placeholder`](https://nextjs.org/docs/api-reference/next/image#placeholder) property, effectively no blur effect

examples/blog-with-comment/.env.local.example

@@ -0,0 +1,4 @@
+REDIS_URL=
+NEXT_PUBLIC_AUTH0_CLIENT_ID=
+NEXT_PUBLIC_AUTH0_DOMAIN=
+NEXT_PUBLIC_AUTH0_ADMIN_EMAIL=

examples/blog-with-comment/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/blog-with-comment/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

examples/blog-with-comment/README.md

@@ -0,0 +1,63 @@
+# Blog with Comment
+
+This project adds commenting functionality to [Next.js blog application](https://github.com/vercel/next.js/tree/canary/examples/blog) using Upstash and Auth0.
+
+The comment box requires Auth0 authentication for users to add new comments. A user can delete their own comment. Also admin user can delete any comment.
+
+Comments are stored in Serverless Redis ([Upstash](http://upstash.com/)).
+
+### Demo
+
+[https://blog-with-comment.vercel.app/](https://blog-with-comment.vercel.app/)
+
+## `1` Project set up
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
+with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the
+example:
+
+```bash
+npx create-next-app --example blog-with-comment blog-with-comment-app
+```
+
+## `2` Set up environment variables
+
+Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
+
+```bash
+cp .env.local.example .env.local
+```
+
+## `3` Configuring Upstash
+
+Go to the [Upstash Console](https://console.upstash.com/) and create a new database
+
+#### Upstash environment
+
+- `REDIS_URL`: Find the URL in the database details page in Upstash Console clicking on **Redis Connect** button.
+
+## `4` Configuring Auth0
+
+1. Go to the [Auth0 dashboard](https://manage.auth0.com/) and create a new application of type **Single Page Web
+   Applications**.
+2. Go to the settings page of the application
+3. Configure the following settings:
+   - **Allowed Callback URLs**: Should be set to `http://localhost:3000/` when testing locally or typically
+     to `https://myapp.com/` when deploying your application.
+   - **Allowed Logout URLs**: Should be set to `http://localhost:3000/` when testing locally or typically
+     to `https://myapp.com/` when deploying your application.
+4. Save the settings.
+
+#### Auth0 environment
+
+- `NEXT_PUBLIC_AUTH0_DOMAIN`: Can be found in the Auth0 dashboard under `settings`.
+- `NEXT_PUBLIC_AUTH0_CLIENT_ID`: Can be found in the Auth0 dashboard under `settings`.
+- `NEXT_PUBLIC_AUTH0_ADMIN_EMAIL`: This is the email of the admin user which you use while singing in Auth0. Admin is able to delete any comment.
+
+## Deploy Your Local Project
+
+To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket
+and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=upstash-roadmap).
+
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to
+match your `.env.local` file.

examples/blog-with-comment/_posts/long-expected-party.md

@@ -0,0 +1,18 @@
+---
+title: "A Long-expected Party"
+excerpt: "Gandalf arrives in the Shire for Bilbo's Farewell Birthday Party.
+Bilbo leaves the Shire permanently."
+date: "2021-03-02"
+---
+
+Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias
+totam laborum pariatur quam. Praesentium quo veritatis expedita animi.
+
+Quite anything glass benefit. Such form clearly top tend can require my. Federal
+degree sort performance region maintain.
+
+Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad
+corrupti aut. Expedita culpa aut deleniti officiis.
+
+Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque
+cum ea.

examples/blog-with-comment/_posts/passing-of-grey-company.md

@@ -0,0 +1,18 @@
+---
+title: "The Passing of the Grey Company"
+excerpt: "Aragorn, Legolas, and Gimli are accompanied by the Grey Company as
+they pass through the Paths of the Dead between Rohan and Gondor."
+date: "2021-01-22"
+---
+
+Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias
+totam laborum pariatur quam. Praesentium quo veritatis expedita animi.
+
+Quite anything glass benefit. Such form clearly top tend can require my. Federal
+degree sort performance region maintain.
+
+Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad
+corrupti aut. Expedita culpa aut deleniti officiis.
+
+Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque
+cum ea.

examples/blog-with-comment/_posts/prancing-pony.md

@@ -0,0 +1,18 @@
+---
+title: "At the Sign of the Prancing Pony"
+excerpt: "The Hobbits reach the The Prancing Pony inn at Bree, where Frodo uses
+a false name, Underhill."
+date: "2021-03-03"
+---
+
+Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias
+totam laborum pariatur quam. Praesentium quo veritatis expedita animi.
+
+Quite anything glass benefit. Such form clearly top tend can require my. Federal
+degree sort performance region maintain.
+
+Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad
+corrupti aut. Expedita culpa aut deleniti officiis.
+
+Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque
+cum ea.

examples/blog-with-comment/_posts/riders-of-rohan.md

@@ -0,0 +1,18 @@
+---
+title: "The Riders of Rohan"
+excerpt: "Aragorn, Legolas, and Gimli follow the trail of the Orcs and find
+several clues as to what happened with Merry and Pippin."
+date: "2021-02-01"
+---
+
+Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias
+totam laborum pariatur quam. Praesentium quo veritatis expedita animi.
+
+Quite anything glass benefit. Such form clearly top tend can require my. Federal
+degree sort performance region maintain.
+
+Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad
+corrupti aut. Expedita culpa aut deleniti officiis.
+
+Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque
+cum ea.

examples/blog-with-comment/components/comment/form.js

@@ -0,0 +1,45 @@
+import { useAuth0 } from '@auth0/auth0-react'
+
+function CommentForm({ text, setText, onSubmit }) {
+  const { isAuthenticated, logout, loginWithPopup } = useAuth0()
+
+  return (
+    <form onSubmit={onSubmit}>
+      <textarea
+        className="flex w-full max-h-40 p-3 rounded resize-y bg-gray-200 text-gray-900 placeholder-gray-500"
+        rows="2"
+        placeholder={
+          isAuthenticated
+            ? `What are your thoughts?`
+            : 'Please login to leave a comment'
+        }
+        onChange={(e) => setText(e.target.value)}
+        value={text}
+        disabled={!isAuthenticated}
+      />
+
+      <div className="flex items-center mt-4">
+        {isAuthenticated ? (
+          <div className="flex items-center space-x-6">
+            <button className="py-2 px-4 rounded bg-blue-600 text-white disabled:opacity-40 hover:bg-blue-700">
+              Send
+            </button>
+            <button className="text-gray-500" onClick={() => logout()}>
+              Log out
+            </button>
+          </div>
+        ) : (
+          <button
+            type="button"
+            className="py-2 px-4 rounded bg-blue-600 text-white disabled:opacity-40 hover:bg-blue-700"
+            onClick={() => loginWithPopup()}
+          >
+            Log In
+          </button>
+        )}
+      </div>
+    </form>
+  )
+}
+
+export default CommentForm

examples/blog-with-comment/components/comment/index.js

@@ -0,0 +1,16 @@
+import CommentForm from './form'
+import CommentList from './list'
+import useComments from '../../hooks/useComment'
+
+function Comment() {
+  const { text, setText, comments, onSubmit, onDelete } = useComments()
+
+  return (
+    <div className="mt-20">
+      <CommentForm onSubmit={onSubmit} text={text} setText={setText} />
+      <CommentList comments={comments} onDelete={onDelete} />
+    </div>
+  )
+}
+
+export default Comment

examples/blog-with-comment/components/comment/list.js

@@ -0,0 +1,52 @@
+import distanceToNow from '../../lib/dateRelative'
+import { useAuth0 } from '@auth0/auth0-react'
+
+function CommentList({ comments, onDelete }) {
+  const { user } = useAuth0()
+
+  return (
+    <div className="space-y-6 mt-10">
+      {comments.map((comment) => {
+        const isAuthor = user && user.sub === comment.user.sub
+        const isAdmin =
+          user && user.email === process.env.NEXT_PUBLIC_AUTH0_ADMIN_EMAIL
+
+        return (
+          <div key={comment.created_at} className="flex space-x-4">
+            <div className="flex-shrink-0">
+              <img
+                src={comment.user.picture}
+                alt={comment.user.name}
+                width={40}
+                height={40}
+                className="rounded-full"
+              />
+            </div>
+
+            <div className="flex-grow">
+              <div className="flex space-x-2">
+                <b>{comment.user.name}</b>
+                <time className="text-gray-400">
+                  {distanceToNow(comment.created_at)}
+                </time>
+                {(isAdmin || isAuthor) && (
+                  <button
+                    className="text-gray-400 hover:text-red-500"
+                    onClick={() => onDelete(comment)}
+                    aria-label="Close"
+                  >
+                    x
+                  </button>
+                )}
+              </div>
+
+              <div>{comment.text}</div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default CommentList

examples/blog-with-comment/components/container.js

@@ -0,0 +1,5 @@
+function Container({ children }) {
+  return <div className="container max-w-2xl m-auto px-4">{children}</div>
+}
+
+export default Container

examples/blog-with-comment/components/header.js

@@ -0,0 +1,21 @@
+import Link from 'next/link'
+import Container from '../components/container'
+
+function Header() {
+  return (
+    <header className="py-6">
+      <Container>
+        <nav className="flex space-x-4">
+          <Link href="/">
+            <a>About</a>
+          </Link>
+          <Link href="/posts">
+            <a>Posts</a>
+          </Link>
+        </nav>
+      </Container>
+    </header>
+  )
+}
+
+export default Header