Merge branch 'canary' into shu/7yrw

.alexignore

@@ -1,2 +1,3 @@
 CODE_OF_CONDUCT.md
 examples/
+**/*/LICENSE.md

.devcontainer/Dockerfile

@@ -12,7 +12,11 @@ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
     libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 \
     libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
     libxdamage1 libxss1 libxtst6 libappindicator1 libnss3 libasound2 \
-    libatk1.0-0 libc6 libdrm-dev libgbm-dev ca-certificates fonts-liberation lsb-release xdg-utils wget
+    libatk1.0-0 libc6 libdrm-dev libgbm-dev ca-certificates fonts-liberation lsb-release xdg-utils wget \
+    # Chromium for running Turbopack benchmarks
+    chromium \
+    # Used for plotters graph visualizations in turbopack benchmarks
+    libfontconfig1-dev
 
 # [Optional] Uncomment if you want to install an additional version of node using nvm
 # ARG EXTRA_NODE_VERSION=10

.github/CODEOWNERS

@@ -2,10 +2,10 @@
 # https://help.github.com/en/articles/about-code-owners
 
 *          @timneutkens @ijjk @shuding @huozhi @feedthejim
-/.github/  @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @balazsorban44 @jankaifer
-/docs/     @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @balazsorban44 @jankaifer
-/errors/   @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @balazsorban44 @jankaifer
-/examples/ @timneutkens @ijjk @shuding @leerob @steven-tey @balazsorban44 @jankaifer
+/.github/  @timneutkens @ijjk @shuding @huozhi @feedthejim @styfle @padmaia @balazsorban44 @jankaifer
+/docs/     @timneutkens @ijjk @shuding @huozhi @feedthejim @styfle @padmaia @leerob @balazsorban44 @jankaifer
+/errors/   @timneutkens @ijjk @shuding @huozhi @feedthejim @styfle @padmaia @leerob @balazsorban44 @jankaifer
+/examples/ @timneutkens @ijjk @shuding @feedthejim @leerob @steven-tey @balazsorban44 @jankaifer
 
 # SWC Build & Telemetry (@padmaia)
 

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -11,7 +11,7 @@ body:
   - type: checkboxes
     attributes:
       label: Verify canary release
-      description: '`next@canary` is the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.'
+      description: 'Please run `npm install next@canary` to try the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.'
       options:
         - label: I verified that the issue exists in the latest Next.js canary release
           required: true

.github/ISSUE_TEMPLATE/2.example_bug_report.yml

@@ -10,7 +10,7 @@ body:
   - type: checkboxes
     attributes:
       label: Verify canary release
-      description: '`next@canary` is the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.'
+      description: 'Please run `npm install next@canary` to try the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue.'
       options:
         - label: I verified that the issue exists in the latest Next.js canary release
           required: true

.github/actions/next-stats-action/package.json

@@ -10,7 +10,7 @@
     "gzip-size": "^5.1.1",
     "minimatch": "^3.0.4",
     "node-fetch": "^2.6.0",
-    "prettier": "^1.18.2",
+    "prettier": "^2.8.4",
     "pretty-bytes": "^5.3.0",
     "pretty-ms": "^5.0.0",
     "semver": "7.3.4"

.github/workflows/build_test_deploy.yml

@@ -816,6 +816,7 @@ jobs:
         lint,
         check-examples,
         test-native,
+        test-native-integration,
         checkPrecompiled,
         testIntegration,
         testUnit,
@@ -951,6 +952,29 @@ jobs:
       - run: ./scripts/publish-native.js
       - run: ./scripts/publish-release.js
 
+  deployExamples:
+    name: Deploy examples
+    runs-on: ubuntu-latest
+    needs: [publishRelease]
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 25
+      - name: Install Vercel CLI
+        run: npm i -g vercel@28.16.15
+      - name: Deploy preview examples
+        if: ${{ needs.build.outputs.isRelease != 'true' }}
+        run: ./scripts/deploy-examples.sh
+        env:
+          VERCEL_API_TOKEN: ${{ secrets.VERCEL_API_TOKEN }}
+          DEPLOY_ENVIRONMENT: preview
+      - name: Deploy production examples
+        if: ${{ needs.build.outputs.isRelease == 'true' }}
+        run: ./scripts/deploy-examples.sh
+        env:
+          VERCEL_API_TOKEN: ${{ secrets.VERCEL_API_TOKEN }}
+          DEPLOY_ENVIRONMENT: production
+
   testDeployE2E:
     name: E2E (deploy)
     runs-on: ubuntu-latest
@@ -1127,7 +1151,48 @@ jobs:
           toolchain: ${{ env.RUST_TOOLCHAIN }}
           profile: minimal
 
-      - run: cd packages/next-swc && cargo test
+      - run: cd packages/next-swc && cargo test --workspace --exclude next-dev-tests
+        if: ${{ steps.swc-change.outputs.SWC_CHANGE == 'yup' }}
+
+  test-native-integration:
+    name: Integration Test Native Code
+    runs-on: ubuntu-latest-16-core-oss
+    needs: build
+
+    env:
+      CARGO_PROFILE_RELEASE_LTO: false
+
+    steps:
+      - uses: actions/cache@v3
+        timeout-minutes: 5
+        id: restore-build
+        with:
+          path: ./*
+          key: ${{ github.sha }}-${{ github.run_number }}
+
+      - run: echo "SWC_CHANGE<<EOF" >> $GITHUB_OUTPUT; echo "$(node scripts/run-for-change.js --type next-swc --exec echo 'yup')" >> $GITHUB_OUTPUT; echo 'EOF' >> $GITHUB_OUTPUT
+        id: swc-change
+
+      - run: echo "${{ steps.swc-change.outputs.SWC_CHANGE }}"
+
+      - name: Install
+        if: ${{ steps.swc-change.outputs.SWC_CHANGE == 'yup' }}
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: ${{ env.RUST_TOOLCHAIN }}
+          profile: minimal
+
+      - name: Install nextest
+        uses: taiki-e/install-action@nextest
+
+      - name: Build tests
+        timeout-minutes: 60
+        run: cd packages/next-swc && cargo nextest run -p next-dev-tests --release --no-run
+        if: ${{ steps.swc-change.outputs.SWC_CHANGE == 'yup' }}
+
+      - name: Run tests
+        timeout-minutes: 20
+        run: cd packages/next-swc && cargo nextest run -p next-dev-tests --release --no-fail-fast
         if: ${{ steps.swc-change.outputs.SWC_CHANGE == 'yup' }}
 
   test-wasm:

.vscode/settings.json

@@ -57,5 +57,16 @@
   "explorer.fileNesting.patterns": {
     "*.ts": "$(capture).test.ts, $(capture).test.tsx",
     "*.tsx": "$(capture).test.ts, $(capture).test.tsx"
-  }
+  },
+  // Allow to find the cargo project for rust-analyzer.
+  "rust-analyzer.linkedProjects": ["packages/next-swc/Cargo.toml"],
+  // Compile rust-analyzer in a separate directory to avoid conflicts with the main project.
+  "rust-analyzer.checkOnSave.extraEnv": {
+    "CARGO_TARGET_DIR": "target/rust-analyzer"
+  },
+  "rust-analyzer.server.extraEnv": {
+    "CARGO_TARGET_DIR": "target/rust-analyzer",
+    "RUST_BACKTRACE": "0"
+  },
+  "cSpell.words": ["opentelemetry", "zipkin"]
 }

docs/api-reference/create-next-app.md

@@ -45,9 +45,17 @@ Options:
 
     Initialize as a JavaScript project.
 
+  --tailwind
+
+    Initialize with Tailwind CSS config. (default)
+
+  --no-tailwind
+
+    Initialize without Tailwind CSS config.
+
   --eslint
 
-    Initialize with eslint config.
+    Initialize with ESLint config.
 
   --experimental-app
 

docs/basic-features/font-optimization.md

@@ -117,29 +117,10 @@ export default function Home() {
 
 Google Fonts are automatically [subset](https://fonts.google.com/knowledge/glossary/subsetting). This reduces the size of the font file and improves performance. You'll need to define which of these subsets you want to preload. Failing to specify any subsets while [`preload`](/docs/api-reference/next/font.md#preload) is true will result in a warning.
 
-This can be done in 2 ways:
-
-- On a font per font basis by adding it to the function call
-
-  ```js
-  // pages/_app.js
-  const inter = Inter({ subsets: ['latin'] })
-  ```
-
-- Globally for all your fonts in your `next.config.js`
-
-  ```js
-  // next.config.js
-  module.exports = {
-    experimental: {
-      fontLoaders: [
-        { loader: 'next/font/google', options: { subsets: ['latin'] } },
-      ],
-    },
-  }
-  ```
-
-  - If both are configured, the subset in the function call is used.
+```js
+// pages/_app.js
+const inter = Inter({ subsets: ['latin'] })
+```
 
 View the [Font API Reference](/docs/api-reference/next/font.md#nextfontgoogle) for more information.
 

docs/going-to-production.md

@@ -109,7 +109,7 @@ Since Next.js runs on both the client and server, there are multiple forms of lo
 - `console.log` in the browser
 - `stdout` on the server
 
-If you want a structured logging package, we recommend [Pino](https://www.npmjs.com/package/pino). If you're using Vercel, there are [pre-built logging integrations](https://vercel.com/integrations#logging?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) compatible with Next.js.
+If you want a structured logging package, we recommend [Pino](https://www.npmjs.com/package/pino). If you're using Vercel, there are [pre-built logging integrations](https://vercel.com/integrations?utm_source=next-site&utm_medium=docs&utm_campaign=next-website#logging) compatible with Next.js.
 
 ## Error Handling
 

errors/google-fonts-missing-subsets.md

@@ -8,26 +8,11 @@ Preload is enabled for a font that is missing a specified subset.
 
 ##### Specify which subsets to preload for that font.
 
-- On a font per font basis by adding it to the function call
-
 ```js
 const inter = Inter({ subsets: ['latin'] })
 ```
 
-- Globally for all your fonts
-
-```js
-// next.config.js
-module.exports = {
-  experimental: {
-    fontLoaders: [
-      { loader: 'next/font/google', options: { subsets: ['latin'] } },
-    ],
-  },
-}
-```
-
-If both are configured, the subset in the function call is used.
+Note: previously it was possible to specify default subsets in your `next.config.js` with the `experimental.fontLoaders` option, but this is no longer supported.
 
 ##### Disable preloading for that font
 

examples/image-component/package.json

@@ -11,8 +11,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "18.7.14",
-    "@types/react": "16.9.17",
-    "typescript": "4.8.2"
+    "@types/node": "18.15.3",
+    "@types/react": "18.0.28",
+    "typescript": "4.9.5"
   }
 }

examples/with-cloudinary/utils/cloudinary.ts

@@ -1,7 +1,6 @@
 import cloudinary from 'cloudinary'
 
-// @ts-ignore
-cloudinary.config({
+cloudinary.v2.config({
   cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
   api_key: process.env.CLOUDINARY_API_KEY,
   api_secret: process.env.CLOUDINARY_API_SECRET,

examples/with-jest/jest.config.js

@@ -8,12 +8,6 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  moduleNameMapper: {
-    // Handle module aliases (this will be automatically configured for you soon)
-    '^@/components/(.*)$': '<rootDir>/components/$1',
-
-    '^@/pages/(.*)$': '<rootDir>/pages/$1',
-  },
   testEnvironment: 'jest-environment-jsdom',
 }
 

examples/with-jest/package.json

@@ -9,17 +9,17 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "13.2.0",
-    "@testing-library/user-event": "14.2.0",
-    "@types/react": "18.0.9",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/react": "18.0.28",
     "@types/testing-library__jest-dom": "5.14.5",
-    "jest": "28.1.0",
-    "jest-environment-jsdom": "28.1.0",
-    "typescript": "4.6.4"
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "typescript": "4.9.5"
   }
 }

examples/with-mongodb/lib/mongodb.ts

@@ -13,11 +13,15 @@ let clientPromise: Promise<MongoClient>
 if (process.env.NODE_ENV === 'development') {
   // In development mode, use a global variable so that the value
   // is preserved across module reloads caused by HMR (Hot Module Replacement).
-  if (!global._mongoClientPromise) {
+  let globalWithMongo = global as typeof globalThis & {
+    _mongoClientPromise?: Promise<MongoClient>
+  }
+
+  if (!globalWithMongo._mongoClientPromise) {
     client = new MongoClient(uri, options)
-    global._mongoClientPromise = client.connect()
+    globalWithMongo._mongoClientPromise = client.connect()
   }
-  clientPromise = global._mongoClientPromise
+  clientPromise = globalWithMongo._mongoClientPromise
 } else {
   // In production mode, it's best to not use a global variable.
   client = new MongoClient(uri, options)

examples/with-opentelemetry/README.md

@@ -1,30 +1,34 @@
-# Data fetch example
+# OpenTelemetry example
 
-Next.js was conceived to make it easy to create universal apps. That's why fetching data
-on the server and the client when necessary is so easy with Next.js.
+[OpenTelemetry](https://opentelemetry.io/) is a collection of tools for easier instrumentation of you applications.
+You can use it to setup instrumentation for Next.js with the `instrumentation.ts` file.
 
-By using `getStaticProps` Next.js will fetch data at build time from a page, and pre-render the page to static assets.
+In order to collect and inspect traces generated by OpenTelemetry you need a running OpenTelemetry collector and a backend.
+
+You can easily deploy this example on Vercel. It manages OpenTelemetry collector for you, read the [docs](https://vercel.com/docs/concepts/observability/otel-overview/quickstart) for more details. Or you can follow official OpenTelemetry [documentation](https://opentelemetry.io/docs/collector/getting-started/) if you want to use it in your self-hosted Next.js app.
+
+But you need to run your own collector if you want to test OpenTelemetry locally. We recommend cloning pre-made [dev setup](https://github.com/vercel/opentelemetry-collector-dev-setup). It contains pre-configured docker images for Collector, ZipKin, Jaeger and Prometheus.
 
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/data-fetch)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/data-fetch&project-name=data-fetch&repository-name=data-fetch)
+[![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-opentelemetry&project-name=with-opentelemetry&repository-name=with-opentelemetry)
 
 ## 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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
 
 ```bash
-npx create-next-app --example data-fetch data-fetch-app
+npx create-next-app --example with-opentelemetry with-opentelemetry-app
 ```
 
 ```bash
-yarn create next-app --example data-fetch data-fetch-app
+yarn create next-app --example with-opentelemetry with-opentelemetry-app
 ```
 
 ```bash
-pnpm create next-app --example data-fetch data-fetch-app
+pnpm create next-app --example with-opentelemetry with-opentelemetry-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-opentelemetry/instrumentation-node.ts

@@ -0,0 +1,22 @@
+import { Resource } from '@opentelemetry/resources'
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+import {
+  NodeTracerProvider,
+  SimpleSpanProcessor,
+} from '@opentelemetry/sdk-trace-node'
+
+// You can use gRPC exporter instead
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+
+// Next.js expects you to use to register TraceProvider. It won't work if you use NodeSDK.
+// We use registered provider to create traces inside of Next.js internals.
+const provider = new NodeTracerProvider({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'next-app',
+  }),
+})
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter({})))
+
+// Make sure to register you provider
+provider.register()