Merge branch 'canary' into feat-next-binding

.gitignore

@@ -24,6 +24,7 @@ coverage
 # test output
 test/**/out*
 test/**/next-env.d.ts
+test/**/tsconfig.json
 .DS_Store
 /e2e-tests
 test/tmp/**
@@ -46,4 +47,4 @@ test-timings.json
 
 # Cache
 *.tsbuildinfo
-.swc/
+.swc/

.vscode/extensions.json

@@ -0,0 +1,24 @@
+{
+  "recommendations": [
+    // Linting / Formatting
+    "rust-lang.rust-analyzer",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "usernamehw.errorlens",
+
+    // Testing
+    "orta.vscode-jest",
+
+    // PR management / Reviewing
+    "github.vscode-pull-request-github",
+
+    // Showing todo comments
+    "gruntfuggly.todo-tree",
+
+    // Collaborating
+    "ms-vsliveshare.vsliveshare",
+
+    // Debugging
+    "ms-vscode.vscode-js-profile-flame"
+  ]
+}

.vscode/settings.json

@@ -1,15 +1,54 @@
 {
+  // Formatting using Prettier by default for all languages
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  // Formatting using Prettier for JavaScript, overrides VSCode default.
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // Formatting using Rust-Analyzer for Rust.
+  "[rust]": {
+    "editor.defaultFormatter": "rust-lang.rust-analyzer"
+  },
+  // Linting using ESLint.
   "eslint.validate": [
     "javascript",
     "javascriptreact",
-    { "language": "typescript", "autoFix": true },
-    { "language": "typescriptreact", "autoFix": true }
+    "typescript",
+    "typescriptreact"
   ],
-  "debug.javascript.unmapMissingSources": true,
+  // Disable Jest autoRun as otherwise it will start running all tests the first time.
   "jest.autoRun": "off",
+
+  // Debugging.
+  "debug.javascript.unmapMissingSources": true,
+
   "files.exclude": {
     "**/node_modules": false,
     "node_modules": true,
     "*[!test]**/node_modules": true
-  }
+  },
+
+  // Ensure enough terminal history is preserved when running tests.
+  "terminal.integrated.scrollback": 10000,
+
+  // Configure todo-tree to exclude node_modules, dist, and compiled.
+  "todo-tree.filtering.excludeGlobs": [
+    "**/node_modules",
+    "**/dist",
+    "**/compiled"
+  ],
+  // Match TODO-APP in addition to other TODOs.
+  "todo-tree.general.tags": [
+    "BUG",
+    "HACK",
+    "FIXME",
+    "TODO",
+    "XXX",
+    "[ ]",
+    "[x]",
+    "TODO-APP"
+  ],
+
+  // Disable TypeScript surveys.
+  "typescript.surveys.enabled": false
 }

docs/advanced-features/compiler.md

@@ -77,7 +77,7 @@ module.exports = {
 
 ### Jest
 
-Jest support not only includes the transformation previously provided by Babel, but also simplifies configuring Jest together with Next.js including:
+The Next.js Compiler transpiles your tests and simplifies configuring Jest together with Next.js including:
 
 - Auto mocking of `.css`, `.module.css` (and their `.scss` variants), and image imports
 - Automatically sets up `transform` using SWC

errors/context-in-server-component.md

@@ -0,0 +1,30 @@
+# createContext in a Server Component
+
+#### Why This Error Occurred
+
+You are using `createContext` in a Server Component but it only works in Client Components.
+
+#### Possible Ways to Fix It
+
+Mark the component using `createContext` as a Client Component by adding `'use client'` at the top of the file.
+
+##### Before
+
+```jsx
+import { createContext } from 'react'
+
+const Context = createContext()
+```
+
+##### After
+
+```jsx
+'use client'
+import { createContext } from 'react'
+
+const Context = createContext()
+```
+
+### Useful Links
+
+[Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components#context)

errors/manifest.json

@@ -773,6 +773,10 @@
         {
           "title": "fast-refresh-reload",
           "path": "/errors/fast-refresh-reload.md"
+        },
+        {
+          "title": "context-in-server-component",
+          "path": "/errors/context-in-server-component.md"
         }
       ]
     }

examples/github-pages/README.md

@@ -22,7 +22,7 @@ pnpm create next-app --example github-pages nextjs-github-pages
 1.  Edit `next.config.js` to match your GitHub repository name.
 1.  Push the starter code to the `main` branch.
 1.  Run the `deploy` script (e.g. `npm run deploy`) to create the `gh-pages` branch.
-1.  On GitHub, go to **Settings** > **Pages** > **Source**, and choose `gh-pages` as the branch with the `/root` folder. Hit **Save**.
+1.  On GitHub, go to **Settings** > **Pages** > **Branch**, and choose `gh-pages` as the branch with the `/root` folder. Hit **Save**.
 1.  Make a change.
 1.  Run the `deploy` script again to push the changes to GitHub Pages.
 

examples/with-gsap/components/Content.js → examples/with-gsap/components/Content.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useRef } from 'react'
 import { gsap } from 'gsap'
 
-const Content = () => {
+export default function Content() {
   let line1 = useRef(null)
+
   useEffect(() => {
-    gsap.from([line1], 0.6, {
+    gsap.from([line1.current], 0.6, {
       delay: 0.9,
       ease: 'power3.out',
       y: 24,
@@ -15,7 +16,7 @@ const Content = () => {
   }, [line1])
 
   return (
-    <p ref={(el) => (line1 = el)} className="line">
+    <p ref={line1} className="line">
       A Simple example using{' '}
       <a
         href="https://greensock.com/gsap/"
@@ -33,5 +34,3 @@ const Content = () => {
     </p>
   )
 }
-
-export default Content

examples/with-gsap/components/Home.js → examples/with-gsap/components/Home.tsx

@@ -1,7 +1,7 @@
 import Title from './Title'
 import Content from './Content'
 
-const Home = () => {
+export default function Home() {
   return (
     <div className="inner">
       <Title lineContent="With-GSAP" lineContent2="Using NEXT" />
@@ -15,5 +15,3 @@ const Home = () => {
     </div>
   )
 }
-
-export default Home

examples/with-gsap/components/Title.js → examples/with-gsap/components/Title.tsx

@@ -1,11 +1,17 @@
 import { useEffect, useRef } from 'react'
 import { gsap } from 'gsap'
 
-const Title = ({ lineContent, lineContent2 }) => {
+type TitleProps = {
+  lineContent: string
+  lineContent2: string
+}
+
+export default function Title({ lineContent, lineContent2 }: TitleProps) {
   let line1 = useRef(null)
   let line2 = useRef(null)
+
   useEffect(() => {
-    gsap.from([line1, line2], 0.8, {
+    gsap.from([line1.current, line2.current], 0.8, {
       delay: 0.8,
       ease: 'power3.out',
       y: 64,
@@ -14,20 +20,19 @@ const Title = ({ lineContent, lineContent2 }) => {
       },
     })
   }, [line1, line2])
+
   return (
     <h1 className="page-title">
       <div className="line-wrap">
-        <div ref={(el) => (line1 = el)} className="line">
+        <div ref={line1} className="line">
           {lineContent}
         </div>
       </div>
       <div className="line-wrap">
-        <div ref={(el) => (line2 = el)} className="line">
+        <div ref={line2} className="line">
           {lineContent2}
         </div>
       </div>
     </h1>
   )
 }
-
-export default Title

examples/with-gsap/package.json

@@ -6,11 +6,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "gsap": "^3.0.1",
+    "gsap": "^3.11.3",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-transition-group": "^4.3.0",
-    "sass": "1.29.0"
+    "react-transition-group": "^4.4.5",
+    "sass": "^1.56.2"
+  },
+  "devDependencies": {
+    "@types/gsap": "^3.0.0",
+    "@types/node": "^18.11.12",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@types/react-transition-group": "^4.4.5",
+    "typescript": "^4.9.4"
   }
 }

examples/with-gsap/pages/_app.tsx

@@ -0,0 +1,8 @@
+import type { AppProps } from 'next/app'
+import '../App.scss'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

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

@@ -2,8 +2,8 @@ import { CSSTransition } from 'react-transition-group'
 import { gsap } from 'gsap'
 import Home from '../components/Home'
 
-function App() {
-  const onEnter = (node) => {
+export default function HomePage() {
+  const onEnter = (node: any) => {
     gsap.from(
       [node.children[0].firstElementChild, node.children[0].lastElementChild],
       0.6,
@@ -18,7 +18,7 @@ function App() {
       }
     )
   }
-  const onExit = (node) => {
+  const onExit = (node: any) => {
     gsap.to(
       [node.children[0].firstElementChild, node.children[0].lastElementChild],
       0.6,
@@ -51,5 +51,3 @@ function App() {
     </>
   )
 }
-
-export default App

examples/with-gsap/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-mqtt-js/environment.d.ts

@@ -0,0 +1,8 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    readonly NEXT_PUBLIC_MQTT_URI: string
+    readonly NEXT_PUBLIC_MQTT_USERNAME: string
+    readonly NEXT_PUBLIC_MQTT_PASSWORD: string
+    readonly NEXT_PUBLIC_MQTT_CLIENTID: string
+  }
+}