Merge branch 'canary' of github.com:vercel/next.js into cms-builder-io-example

* 'canary' of github.com:vercel/next.js:
  [chore] Update `deta` version in examples (vercel#30204)
  fix: typescript example supporting strict w/ version >= 4.4 (vercel#33042)
  Avoid page double render with emotion vanilla (vercel#30541)
  converted the old tailwind css example to typescript  (vercel#32808)
  fix(examples/cms-contentful): add correct Content-Type + missing closing tag for html (vercel#30321)
  Ensure NODE_ENV is not inlined for next/jest (vercel#33032)
  Rename api in with-redis example (vercel#33016)
  Remove unused turbo remote cache env vars (vercel#33030)
  v12.0.8-canary.17
  Re-enable turbo caching for swc build jobs (vercel#32617)
  feat(cli): introduce `next info` CLI command (vercel#32972)
  fix(examples): add missing dependencies wo (vercel#32977)
  Updated wrong link to example of gtag init in measuring-performance.md (vercel#32974)
  v12.0.8-canary.16
  Revert "Reduce install size for linux glibc/musl (vercel#32850)" (vercel#32973)
  Ensure middleware is output in standalone mode (vercel#32967)
  v12.0.8-canary.15
  Reduce install size for linux glibc/musl (vercel#32850)
  Fixes issue with makeStylesheetInert (vercel#32027)
  Ensure setImmediate and punycode are polyfilled (vercel#32768)

Author: teleaziz

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -14,6 +14,12 @@ body:
   - type: markdown
     attributes:
       value: 'next@canary is the beta version of Next.js. It includes all features and fixes that are pending to land on the stable release line.'
+  - type: textarea
+    attributes:
+      label: Run `next info` (available from version 12.0.8 and up)
+      description: Please run `next info` in the root directory of your project and paste the results. You might need to use `npx --no-install next info` if next is not in the current PATH.
+    validations:
+      required: false
   - type: input
     attributes:
       label: What version of Next.js are you using?

.github/workflows/build_test_deploy.yml

@@ -164,7 +164,7 @@ export function reportWebVitals(metric) {
 > ```js
 > export function reportWebVitals({ id, name, label, value }) {
 >   // Use `window.gtag` if you initialized Google Analytics as this example:
->   // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_document.js
+>   // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
 >   window.gtag('event', name, {
 >     event_category:
 >       label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',

docs/advanced-features/measuring-performance.md

@@ -21,7 +21,7 @@ Usage
   $ next <command>
 
 Available commands
-  build, start, export, dev, lint, telemetry
+  build, start, export, dev, lint, telemetry, info
 
 Options
   --version, -v   Version number
@@ -125,3 +125,36 @@ Next.js collects **completely anonymous** telemetry data about general usage.
 Participation in this anonymous program is optional, and you may opt-out if you'd not like to share any information.
 
 To learn more about Telemetry, [please read this document](https://nextjs.org/telemetry/).
+
+## Info
+
+`next info` prints relevant details about the current system which can be used to report Next.js bugs.
+This information includes Operating System platform/arch/version, Binaries (Node.js, npm, Yarn, pnpm) and npm package versions (`next`, `react`, `react-dom`).
+
+Running the following in your project's root directory:
+
+```bash
+next info
+```
+
+will give you information like this example:
+
+```bash
+
+    Operating System:
+      Platform: linux
+      Arch: x64
+      Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
+    Binaries:
+      Node: 16.13.0
+      npm: 8.1.0
+      Yarn: 1.22.17
+      pnpm: 6.24.2
+    Relevant packages:
+      next: 12.0.8
+      react: 17.0.2
+      react-dom: 17.0.2
+
+```
+
+This information should then be pasted into GitHub Issues.

docs/api-reference/cli.md

@@ -0,0 +1,33 @@
+import { getPreviewPostBySlug } from '../../lib/api'
+
+export default async function preview(req, res) {
+  const { secret, slug } = req.query
+
+  if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET || !slug) {
+    return res.status(401).json({ message: 'Invalid token' })
+  }
+
+  // Fetch the headless CMS to check if the provided `slug` exists
+  const post = await getPreviewPostBySlug(slug)
+
+  // If the slug doesn't exist prevent preview mode from being enabled
+  if (!post) {
+    return res.status(401).json({ message: 'Invalid slug' })
+  }
+
+  // Enable Preview Mode by setting the cookies
+  res.setPreviewData({})
+
+  // Redirect to the path from the fetched post
+  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
+  // res.writeHead(307, { Location: `/posts/${post.slug}` })
+  const url = `/posts/${post.slug}`
+  res.setHeader('Content-Type', 'text/html')
+  res.write(
+    `<!DOCTYPE html><html><head><meta http-equiv="Refresh" content="0; url=${url}" />
+    <script>window.location.href = '${url}'</script>
+    </head>
+    </html>`
+  )
+  res.end()
+}

examples/cms-contentful/pages/api/preview.js

@@ -6,7 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "deta": "^0.0.8",
+    "deta": "^1.0.1",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

examples/with-deta-base/package.json

@@ -3,9 +3,8 @@ import * as React from 'react'
 import { renderStatic } from '../shared/renderer'
 export default class AppDocument extends Document {
   static async getInitialProps(ctx) {
-    const page = await ctx.renderPage()
-    const { css, ids } = await renderStatic(page.html)
     const initialProps = await Document.getInitialProps(ctx)
+    const { css, ids } = await renderStatic(initialProps.html)
     return {
       ...initialProps,
       styles: (

examples/with-emotion-vanilla/pages/_document.js

@@ -17,10 +17,12 @@
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
+    "@types/react": "17.0.38",
     "babel-jest": "27.4.5",
     "eslint": "8.5.0",
     "eslint-config-next": "latest",
     "eslint-plugin-testing-library": "5.0.1",
-    "jest": "27.4.5"
+    "jest": "27.4.5",
+    "typescript": "4.5.4"
   }
 }

examples/with-jest/package.json

@@ -2,7 +2,7 @@ import { v4 as uuidv4 } from 'uuid'
 
 import redis from '../../lib/redis'
 
-export default async function upvote(req, res) {
+export default async function create(req, res) {
   const { title } = req.body
 
   if (!title) {

examples/with-redis/pages/api/create.js

@@ -1,6 +1,6 @@
 import redis from '../../lib/redis'
 
-export default async function upvote(req, res) {
+export default async function getAllFeatures(req, res) {
   const features = (await redis.hvals('features'))
     .map((entry) => JSON.parse(entry))
     .sort((a, b) => b.score - a.score)