Merge branch 'canary' into shu/f8d8

errors/react-hydration-error.md

@@ -41,8 +41,9 @@ Common causes with css-in-js libraries:
 
 - When using Styled Components / Emotion
   - When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the application has to follow the Next.js example for the library. For example if `pages/_document` is missing and the Babel plugin is not added.
-    - Possible fix for Styled Components: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components
-      - If you want to leverage Styled Components with the new Next.js Compiler in Next.js 12 there is an [experimental flag available](https://github.com/vercel/next.js/discussions/30174#discussion-3643870)
+    - Possible fix for Styled Components:
+      - If you want to leverage Styled Components with SWC in Next.js 12.1+ you need to [add it to your Next.js config under compiler options](https://nextjs.org/docs/advanced-features/compiler#styled-components): https://github.com/vercel/next.js/tree/canary/examples/with-styled-components
+      - If you want to use Styled Components with Babel, you need `pages/_document` and the Babel plugin: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel
     - Possible fix for Emotion: https://github.com/vercel/next.js/tree/canary/examples/with-emotion
 - When using other css-in-js libraries
   - Similar to Styled Components / Emotion css-in-js libraries generally need configuration specified in their examples in the [examples directory](https://github.com/vercel/next.js/tree/canary/examples)

examples/cms-sanity/README.md

@@ -2,6 +2,11 @@
 
 This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Sanity](https://www.sanity.io/) as the data source.
 
+You'll get:
+
+- Sanity Studio running on localhost
+- Sub-second as-you-type previews in Next.js
+
 ## Demo
 
 ### [https://next-blog-sanity.vercel.app/](https://next-blog-sanity.vercel.app/)
@@ -85,11 +90,30 @@ SANITY_API_TOKEN=...
 SANITY_PREVIEW_SECRET=...
 ```
 
-### Step 5. Prepare project for previewing
+### Step 5. Prepare the project for previewing
+
+5.1. Install the `@sanity/production-preview` plugin with `sanity install @sanity/production-preview`.
+
+5.2. Create a file called `resolveProductionUrl.js` (we'll get back to that file in a bit).
+
+5.3. Open your studio's sanity.json, and add the following entry to the parts-array:
 
-Go to https://www.sanity.io/docs/preview-content-on-site and follow the three steps on that page. It should be done inside the studio project generated in Step 2.
+```diff
+{
+  "plugins": [
+    "@sanity/production-preview"
+  ],
+  "parts": [
+    //...
++   {
++     "implements": "part:@sanity/production-preview/resolve-production-url",
++     "path": "./resolveProductionUrl.js"
++   }
+  ]
+}
+```
 
-When you get to the second step about creating a file called `resolveProductionUrl.js`, copy the following instead:
+Now, go back to `resolveProductionUrl.js` and add a function that will receive the full document that was selected for previewing:
 
 ```js
 const previewSecret = 'MY_SECRET' // Copy the string you used for SANITY_PREVIEW_SECRET
@@ -100,6 +124,8 @@ export default function resolveProductionUrl(document) {
 }
 ```
 
+For more information on live previewing check the [full guide.](https://www.sanity.io/guides/nextjs-live-preview)
+
 ### Step 6. Copy the schema file
 
 After initializing your Sanity studio project there should be a `schemas` folder.
@@ -168,3 +194,8 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [
 Alternatively, you can deploy using our template by clicking on the Deploy button below.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-sanity&project-name=cms-sanity&repository-name=cms-sanity&env=NEXT_PUBLIC_SANITY_PROJECT_ID,SANITY_API_TOKEN,SANITY_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env)
+
+#### Next steps
+
+- Invalidate your routes in production [on-demand](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta) with GROQ powered webhooks
+- Mount your preview inside the Sanity Studio for comfortable side-by-side editing

examples/cms-sanity/components/cover-image.js

@@ -5,15 +5,19 @@ import { urlForImage } from '../lib/sanity'
 
 export default function CoverImage({ title, slug, image: source }) {
   const image = source ? (
-    <Image
-      width={2000}
-      height={1000}
-      alt={`Cover Image for ${title}`}
-      src={urlForImage(source).height(1000).width(2000).url()}
+    <div
       className={cn('shadow-small', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
-    />
+    >
+      <Image
+        layout="responsive"
+        width={2000}
+        height={1000}
+        alt={`Cover Image for ${title}`}
+        src={urlForImage(source).height(1000).width(2000).url()}
+      />
+    </div>
   ) : (
     <div style={{ paddingTop: '50%', backgroundColor: '#ddd' }} />
   )

examples/cms-sanity/components/post-body.js

@@ -1,10 +1,10 @@
 import markdownStyles from './markdown-styles.module.css'
-import BlockContent from '@sanity/block-content-to-react'
+import { PortableText } from '@portabletext/react'
 
 export default function PostBody({ content }) {
   return (
-    <div className="max-w-2xl mx-auto">
-      <BlockContent blocks={content} className={markdownStyles.markdown} />
+    <div className={`max-w-2xl mx-auto ${markdownStyles.markdown}`}>
+      <PortableText value={content} />
     </div>
   )
 }

examples/cms-sanity/lib/sanity.js

@@ -1,7 +1,5 @@
-import {
-  createImageUrlBuilder,
-  createPreviewSubscriptionHook,
-} from 'next-sanity'
+import createImageUrlBuilder from '@sanity/image-url'
+import { createPreviewSubscriptionHook } from 'next-sanity'
 import { sanityConfig } from './config'
 
 export const imageBuilder = createImageUrlBuilder(sanityConfig)

examples/cms-sanity/package.json

@@ -6,17 +6,18 @@
     "start": "next start"
   },
   "dependencies": {
-    "@sanity/block-content-to-react": "2.0.7",
+    "@portabletext/react": "^1.0.3",
+    "@sanity/image-url": "^1.0.1",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "next": "latest",
-    "next-sanity": "0.3.0",
+    "next-sanity": "0.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "autoprefixer": "10.4.2",
-    "postcss": "8.4.5",
-    "tailwindcss": "^3.0.15"
+    "postcss": "8.4.7",
+    "tailwindcss": "^3.0.23"
   }
 }

examples/cms-wordpress/components/more-stories.js

@@ -11,9 +11,9 @@ export default function MoreStories({ posts }) {
           <PostPreview
             key={node.slug}
             title={node.title}
-            coverImage={node.featuredImage?.node}
+            coverImage={node.featuredImage}
             date={node.date}
-            author={node.author?.node}
+            author={node.author}
             slug={node.slug}
             excerpt={node.excerpt}
           />

examples/cms-wordpress/lib/api.js

@@ -70,18 +70,14 @@ export async function getAllPostsForHome(preview) {
             slug
             date
             featuredImage {
-              node {
-                sourceUrl
-              }
+              sourceUrl
             }
             author {
-              node {
-                name
-                firstName
-                lastName
-                avatar {
-                  url
-                }
+              name
+              firstName
+              lastName
+              avatar {
+                url
               }
             }
           }
@@ -125,14 +121,10 @@ export async function getPostAndMorePosts(slug, preview, previewData) {
       slug
       date
       featuredImage {
-        node {
-          sourceUrl
-        }
+        sourceUrl
       }
       author {
-        node {
-          ...AuthorFields
-        }
+        ...AuthorFields
       }
       categories {
         edges {
@@ -164,9 +156,7 @@ export async function getPostAndMorePosts(slug, preview, previewData) {
               excerpt
               content
               author {
-                node {
-                  ...AuthorFields
-                }
+                ...AuthorFields
               }
             }
           }

examples/cms-wordpress/next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  images: {
+    domains: [
+      // "[yourapp].wpengine.com" (Update this to be your Wordpress application name in order to load images connected to your posts)
+      'secure.gravatar.com',
+    ],
+  },
+}

examples/cms-wordpress/pages/index.js

@@ -22,9 +22,9 @@ export default function Index({ allPosts: { edges }, preview }) {
           {heroPost && (
             <HeroPost
               title={heroPost.title}
-              coverImage={heroPost.featuredImage?.node}
+              coverImage={heroPost.featuredImage}
               date={heroPost.date}
-              author={heroPost.author?.node}
+              author={heroPost.author}
               slug={heroPost.slug}
               excerpt={heroPost.excerpt}
             />
@@ -38,6 +38,7 @@ export default function Index({ allPosts: { edges }, preview }) {
 
 export async function getStaticProps({ preview = false }) {
   const allPosts = await getAllPostsForHome(preview)
+
   return {
     props: { allPosts, preview },
   }

examples/cms-wordpress/pages/posts/[slug].js

@@ -36,14 +36,14 @@ export default function Post({ post, posts, preview }) {
                 </title>
                 <meta
                   property="og:image"
-                  content={post.featuredImage?.node?.sourceUrl}
+                  content={post.featuredImage?.sourceUrl}
                 />
               </Head>
               <PostHeader
                 title={post.title}
-                coverImage={post.featuredImage?.node}
+                coverImage={post.featuredImage}
                 date={post.date}
-                author={post.author?.node}
+                author={post.author}
                 categories={post.categories}
               />
               <PostBody content={post.content} />

examples/with-styled-components-babel/.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/with-styled-components-babel/README.md

@@ -0,0 +1,29 @@
+# Example app with styled-components using babel
+
+This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).
+
+For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [`<App>`](https://nextjs.org/docs/advanced-features/custom-app) component.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components-babel)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel&project-name=with-styled-components-babel&repository-name=with-styled-components-babel)
+
+## How to use
+
+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 with-styled-components-babel with-styled-components-babel-app
+# or
+yarn create next-app --example with-styled-components-babel with-styled-components-babel-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-styled-components-babel/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "styled-components": "^5.2.3"
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.12.0"
+  }
+}

examples/with-styled-components-babel/pages/_app.js

@@ -0,0 +1,26 @@
+import { createGlobalStyle, ThemeProvider } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+`
+
+const theme = {
+  colors: {
+    primary: '#0070f3',
+  },
+}
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <GlobalStyle />
+      <ThemeProvider theme={theme}>
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </>
+  )
+}

examples/with-styled-components-babel/pages/index.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+const Title = styled.h1`
+  font-size: 50px;
+  color: ${({ theme }) => theme.colors.primary};
+`
+
+export default function Home() {
+  return <Title>My page</Title>
+}

examples/with-styled-components/README.md

@@ -2,7 +2,9 @@
 
 This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).
 
-For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [`<App>`](https://nextjs.org/docs/advanced-features/custom-app) component.
+This example uses the Rust-based [SWC](https://nextjs.org/docs/advanced-features/compiler#styled-components) in Next.js for better performance than Babel.
+
+Currently, only the `ssr` and `displayName` transforms have been implemented. These two transforms are the main requirement for using `styled-components` in Next.js.
 
 ## Preview