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

…o-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)

.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?

docs/advanced-features/measuring-performance.md

@@ -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/api-reference/cli.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.

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

@@ -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/with-deta-base/package.json

@@ -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-emotion-vanilla/pages/_document.js

@@ -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-jest/package.json

@@ -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-redis/pages/api/create.js

@@ -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/features.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)

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

@@ -1,6 +1,6 @@
 import redis from '../../lib/redis'
 
-export default async function upvote(req, res) {
+export default async function subscribe(req, res) {
   const { email } = req.body
 
   if (email && validateEmail(email)) {

examples/with-tailwindcss/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/with-tailwindcss/.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo

examples/with-tailwindcss/README.md

@@ -1,3 +1,11 @@
+<p  align="center">
+
+<img  src="https://res.cloudinary.com/ddcg0rzlo/image/upload/v1640340715/nextjs-tailwind-typescript-banner_vslgq4.png"  alt="Next.js TypeScript Starter">
+
+</p>
+
+<br />
+
 # Next.js + Tailwind CSS Example
 
 This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).

examples/with-tailwindcss/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/with-tailwindcss/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+}

examples/with-tailwindcss/package.json

@@ -11,8 +11,13 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@types/node": "17.0.4",
+    "@types/react": "17.0.38",
     "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "eslint": "8.5.0",
+    "eslint-config-next": "12.0.7",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.7",
+    "typescript": "4.5.4"
   }
 }

examples/with-tailwindcss/pages/_app.js → examples/with-tailwindcss/pages/_app.tsx

@@ -1,6 +1,7 @@
 import '../styles/globals.css'
+import type { AppProps } from 'next/app'
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
 }
 

examples/with-tailwindcss/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

examples/with-tailwindcss/pages/index.js → examples/with-tailwindcss/pages/index.tsx

@@ -19,7 +19,7 @@ export default function Home() {
         <p className="mt-3 text-2xl">
           Get started by editing{' '}
           <code className="p-3 font-mono text-lg bg-gray-100 rounded-md">
-            pages/index.js
+            pages/index.tsx
           </code>
         </p>
 

examples/with-tailwindcss/postcss.config.js

@@ -1,5 +1,3 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
 module.exports = {
   plugins: {
     tailwindcss: {},

examples/with-tailwindcss/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/with-typescript/pages/api/users/index.ts

@@ -8,7 +8,7 @@ const handler = (_req: NextApiRequest, res: NextApiResponse) => {
     }
 
     res.status(200).json(sampleUserData)
-  } catch (err) {
+  } catch (err: any) {
     res.status(500).json({ statusCode: 500, message: err.message })
   }
 }

examples/with-typescript/pages/users/[id].tsx

@@ -55,7 +55,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
     // By returning { props: item }, the StaticPropsDetail component
     // will receive `item` as a prop at build time
     return { props: { item } }
-  } catch (err) {
+  } catch (err: any) {
     return { props: { errors: err.message } }
   }
 }

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.0.8-canary.14"
+  "version": "12.0.8-canary.17"
 }

package.json

@@ -56,6 +56,7 @@
     "@types/fs-extra": "8.1.0",
     "@types/http-proxy": "1.17.3",
     "@types/jest": "24.0.13",
+    "@types/node": "13.11.0",
     "@types/selenium-webdriver": "4.0.15",
     "@types/sharp": "0.29.3",
     "@types/string-hash": "1.1.1",
@@ -153,7 +154,7 @@
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
     "tree-kill": "1.2.2",
-    "turbo": "1.0.14",
+    "turbo": "1.0.24",
     "typescript": "4.4.3",
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.0.8-canary.14",
+    "@next/eslint-plugin-next": "12.0.8-canary.17",
     "@rushstack/eslint-patch": "^1.0.8",
     "@typescript-eslint/parser": "^5.0.0",
     "eslint-import-resolver-node": "^0.3.4",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.0.8-canary.14",
+  "version": "12.0.8-canary.17",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",