Merge branch 'canary' into bugfix/span-relationship

docs/api-reference/next/router.md

@@ -202,7 +202,7 @@ Prefetch pages for faster client-side transitions. This method is only useful fo
 router.prefetch(url, as)
 ```
 
-- `url` - The URL to prefetch, that is, a path with a matching page
+- `url` - The URL to prefetch, including explicit routes (e.g. `/dashboard`) and dynamic routes (e.g. `/product/[id]`)
 - `as` - Optional decorator for `url`. Before Next.js 9.5.3 this was used to prefetch dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked
 
 #### Usage

docs/authentication.md

@@ -141,6 +141,7 @@ To see examples with other authentication providers, check out the [examples fol
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-userbase">with-userbase</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-supertokens">with-supertokens</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-nhost-auth-realtime-graphql">with-nhost-auth-realtime-graphql</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-clerk">with-clerk</a></li>
   </ul>
 </details>
 

docs/basic-features/typescript.md

@@ -44,7 +44,7 @@ npm run dev
 
 # You'll see instructions like these:
 #
-# Please install typescript, @types/react, and @types/node by running:
+# Please install TypeScript, @types/react, and @types/node by running:
 #
 #         yarn add --dev typescript @types/react @types/node
 #

docs/migrating/from-gatsby.md

@@ -167,7 +167,7 @@ export function getAllPosts() {
 
 ## Image Component and Image Optimization
 
-Since version **10.0.0**, Next.js has a built-in [Image Component and Automatic Image Optimization](/docs/basic-features/image-optimization.md).
+Next.js has a built-in [Image Component and Automatic Image Optimization](/docs/basic-features/image-optimization.md).
 
 The Next.js Image Component, [`next/image`](/docs/api-reference/next/image.md), is an extension of the HTML `<img>` element, evolved for the modern web.
 
@@ -189,15 +189,24 @@ Instead, use the built-in [`next/image`](/docs/api-reference/next/image.md) comp
 
 ```jsx
 import Image from 'next/image'
+import profilePic from '../public/me.png'
 
 export default function Home() {
   return (
     <>
       <h1>My Homepage</h1>
       <Image
-        src="/me.png"
+        src={profilePic}
         alt="Picture of the author"
+        // When "responsive", similar to "fluid" from Gatsby
+        // When "intrinsic", similar to "fluid" with maxWidth from Gatsby
+        // When "fixed", similar to "fixed" from Gatsby
+        layout="responsive"
+        // Optional, similar to "blur-up" from Gatsby
+        placeholder="blur"
+        // Optional, similar to "width" in Gatsby GraphQL
         width={500}
+        // Optional, similar to "height" in Gatsby GraphQL
         height={500}
       />
       <p>Welcome to my homepage!</p>

errors/gssp-no-mutating-res → errors/gssp-no-mutating-res.md

@@ -2,13 +2,12 @@
 
 #### Why This Error Occurred
 
-`getServerSideProps()` surfaces a `ServerResponse` object through the `res` property of its `context` arg. This object is not intended to be accessed or changed after `getServerSideProps()` resolves. 
+`getServerSideProps()` surfaces a `ServerResponse` object through the `res` property of its `context` arg. This object is not intended to be accessed or changed after `getServerSideProps()` resolves.
 
 This is because the framework tries to optimize when items like headers or status codes are flushed to the browser. If they are changed after `getServerSideProps()` completes, we can't guarantee that the changes will work.
 
 For this reason, accessing the object after this time is disallowed.
 
-
 #### Possible Ways to Fix It
 
 You can fix this error by moving any access of the `res` object into `getServerSideProps()` itself or any functions that run before `getServerSideProps()` returns.

examples/api-routes/data.js

@@ -61,7 +61,7 @@ export const people = [
   },
   {
     id: '7',
-    name: 'Beru Whitesun lars',
+    name: 'Beru Whitesun Lars',
     height: '165',
     mass: '75',
     hair_color: 'brown',

examples/api-routes/package.json

@@ -9,6 +9,6 @@
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "swr": "0.1.18"
+    "swr": "^1.0.1"
   }
 }

examples/cms-strapi/lib/markdownToHtml.js

@@ -1,4 +1,4 @@
-import remark from 'remark'
+import { remark } from 'remark'
 import html from 'remark-html'
 
 export default async function markdownToHtml(markdown) {

examples/with-aws-amplify-typescript/README.md

@@ -1,4 +1,4 @@
-# AWS Amplify and Typescript with NextJS
+# AWS Amplify and TypeScript with NextJS
 
 [![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/vercel/next.js/tree/canary/examples/with-aws-amplify-typescript)
 

examples/with-chakra-ui-typescript/README.md

@@ -1,6 +1,6 @@
-# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and Typescript
+# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) and TypeScript
 
-This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with typescript.
+This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app with TypeScript.
 
 Next.js and chakra-ui have built-in TypeScript declarations, so we'll get autocompletion for their modules straight away.
 

examples/with-clerk/.env.local.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_CLERK_FRONTEND_API=your-frontend-api
+CLERK_API_KEY=your-api-key

examples/with-clerk/README.md

@@ -1,6 +1,10 @@
-# Clerk.dev Example
+# Clerk and Next.js Example
 
-This example shows how to use [Clerk.dev](https://www.clerk.dev/?utm_source=github&utm_medium=nextjs-examples&utm_campaign=nextjs) with Next.js. The example features adding sign up, sign in, and profile management to your Next.js application in minutes.
+This example shows how to use [Clerk](https://www.clerk.dev/?utm_source=github&utm_medium=nextjs-examples&utm_campaign=nextjs) with Next.js. The example features adding sign up, sign in, profile management, and an authenticated API route to your Next.js application.
+
+## Demo
+
+A hosted demo of this example is available at [clerk-nextjs-example.vercel.app](https://clerk-nextjs-example.vercel.app)
 
 ## Deploy your own
 
@@ -18,10 +22,18 @@ npx create-next-app --example with-clerk with-clerk-app
 yarn create next-app --example with-clerk with-clerk-app
 ```
 
+To run the example locally you need to:
+
+1. Sign up at [Clerk.dev](https://www.clerk.dev/?utm_source=github&utm_medium=starter_repos&utm_campaign=nextjs_starter).
+2. Go to [Clerk's dashboard](https://dashboard.clerk.dev/?utm_source=github&utm_medium=starter_repos&utm_campaign=nextjs_starter) and create an application.
+3. Set the required Clerk environment variables from your Clerk project as shown at [the example env file](./.env.local.example).
+4. `yarn` to install the required dependencies.
+5. `yarn dev` to launch the development server.
+
 ## Learn More
 
 To learn more about Clerk.dev and Next.js, take a look at the following resources:
 
-- [Quick start](https://docs.clerk.dev/frontend/quick-starts/next.js)
+- [Quick start](https://docs.clerk.dev/get-started/nextjs)
 - [Clerk.dev Documentation](https://docs.clerk.dev/) - learn about Clerk.dev features and API.
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

examples/with-clerk/components/Header.js

@@ -1,7 +1,7 @@
 import styles from '../styles/Header.module.css'
 import Image from 'next/image'
 import Link from 'next/link'
-import { SignedIn, SignedOut, UserButton } from '@clerk/clerk-react'
+import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 
 // Header component using <SignedIn> & <SignedOut>.
 //

examples/with-clerk/package.json

@@ -6,10 +6,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "@clerk/clerk-react": "1.7.0",
-    "@clerk/clerk-sdk-node": "0.3.0",
-    "next": "10.0.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@clerk/nextjs": "1.0.1",
+    "next": "latest",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   }
 }

examples/with-clerk/pages/_app.js

@@ -1,8 +1,10 @@
 import '../styles/globals.css'
-import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-react'
+import { ClerkProvider, SignedIn, SignedOut } from '@clerk/nextjs'
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
 import Layout from '../components/Layout'
+import Head from 'next/head'
+import Script from 'next/script'
+import Link from 'next/link'
 
 /**
  * List pages you want to be publicly accessible, or leave empty if
@@ -14,26 +16,23 @@ import Layout from '../components/Layout'
  */
 const publicPages = ['/', '/sign-in/[[...index]]', '/sign-up/[[...index]]']
 
-const RedirectToSignIn = () => {
-  const router = useRouter()
-  useEffect(() => {
-    router.push('/sign-in')
-  })
-  return null
-}
-
 const MyApp = ({ Component, pageProps }) => {
   const router = useRouter()
+
   /**
    * If the current route is listed as public, render it directly.
    * Otherwise, use Clerk to require authentication.
    */
   return (
-    <ClerkProvider
-      frontendApi={process.env.NEXT_PUBLIC_CLERK_FRONTEND_API}
-      scriptUrl={process.env.NEXT_PUBLIC_CLERK_JS}
-      navigate={(to) => router.push(to)}
-    >
+    <ClerkProvider>
+      <Head>
+        <link
+          href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css"
+          rel="stylesheet"
+        />
+      </Head>
+      <Script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js" />
+      <Script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js" />
       <Layout>
         {publicPages.includes(router.pathname) ? (
           <Component {...pageProps} />
@@ -43,7 +42,15 @@ const MyApp = ({ Component, pageProps }) => {
               <Component {...pageProps} />
             </SignedIn>
             <SignedOut>
-              <RedirectToSignIn />
+              <main>
+                <p>
+                  Please{' '}
+                  <Link href="/sign-in">
+                    <a>sign in</a>
+                  </Link>{' '}
+                  to access this page.
+                </p>
+              </main>
             </SignedOut>
           </>
         )}

examples/with-clerk/pages/api/getAuthenticatedUserId.js

@@ -0,0 +1,10 @@
+import { withSession } from '@clerk/nextjs/api'
+
+export default withSession((req, res) => {
+  res.statusCode = 200
+  if (req.session) {
+    res.json({ id: req.session.userId })
+  } else {
+    res.json({ id: null })
+  }
+})

examples/with-clerk/pages/index.js

@@ -1,7 +1,8 @@
+import React from 'react'
 import Head from 'next/head'
 import Link from 'next/link'
 import styles from '../styles/Home.module.css'
-import { SignedIn, SignedOut } from '@clerk/clerk-react'
+import { SignedIn, SignedOut } from '@clerk/nextjs'
 
 const ClerkFeatures = () => (
   <Link href="/user">
@@ -39,6 +40,17 @@ const SignupLink = () => (
   </Link>
 )
 
+const apiSample = `import { withSession } from '@clerk/nextjs/api'
+
+export default withSession((req, res) => {
+  res.statusCode = 200
+  if (req.session) {
+    res.json({ id: req.session.userId })
+  } else {
+    res.json({ id: null })
+  }
+})`
+
 // Main component using <SignedIn> & <SignedOut>.
 //
 // The SignedIn and SignedOut components are used to control rendering depending
@@ -79,6 +91,8 @@ const Main = () => (
       </div>
     </div>
 
+    <APIRequest />
+
     <div className={styles.links}>
       <Link href="https://docs.clerk.dev">
         <a target="_blank" rel="noreferrer" className={styles.link}>
@@ -94,17 +108,82 @@ const Main = () => (
   </main>
 )
 
+const APIRequest = () => {
+  React.useEffect(() => {
+    if (window.Prism) {
+      window.Prism.highlightAll()
+    }
+  })
+  const [response, setResponse] = React.useState(
+    '// Click above to run the request'
+  )
+  const makeRequest = async () => {
+    setResponse('// Loading...')
+
+    try {
+      const res = await fetch('/api/getAuthenticatedUserId')
+      const body = await res.json()
+      setResponse(JSON.stringify(body, null, '  '))
+    } catch (e) {
+      setResponse(
+        '// There was an error with the request. Please contact support@clerk.dev'
+      )
+    }
+  }
+  return (
+    <div className={styles.backend}>
+      <h2>API request example</h2>
+      <div className={styles.card}>
+        <button
+          target="_blank"
+          rel="noreferrer"
+          className={styles.cardContent}
+          onClick={() => makeRequest()}
+        >
+          <img src="/icons/server.svg" />
+          <div>
+            <h3>fetch('/api/getAuthenticatedUserId')</h3>
+            <p>
+              Retrieve the user ID of the signed in user, or null if there is no
+              user
+            </p>
+          </div>
+          <div className={styles.arrow}>
+            <img src="/icons/download.svg" />
+          </div>
+        </button>
+      </div>
+      <h4>
+        Response
+        <em>
+          <SignedIn>
+            You are signed in, so the request will return your user ID
+          </SignedIn>
+          <SignedOut>
+            You are signed out, so the request will return null
+          </SignedOut>
+        </em>
+      </h4>
+      <pre>
+        <code className="language-js">{response}</code>
+      </pre>
+      <h4>pages/api/getAuthenticatedUserId.js</h4>
+      <pre>
+        <code className="language-js">{apiSample}</code>
+      </pre>
+    </div>
+  )
+}
+
 // Footer component
 const Footer = () => (
   <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{' '}
+    Powered by{' '}
+    <a href="https://clerk.dev" target="_blank" rel="noopener noreferrer">
       <img src="/clerk.svg" alt="Clerk.dev" className={styles.logo} />
-      +
+    </a>
+    +
+    <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">
       <img src="/nextjs.svg" alt="Next.js" className={styles.logo} />
     </a>
   </footer>

examples/with-clerk/pages/sign-in/[[...index]].js

@@ -1,7 +1,7 @@
-import { SignIn } from '@clerk/clerk-react'
+import { SignIn } from '@clerk/nextjs'
 
 const SignInPage = () => (
-  <SignIn path="/sign-in" routing="path" signUpURL="/sign-up" />
+  <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
 )
 
 export default SignInPage