Makes codeblock language and filename extensions consistent (vercel#51056)

There was mismatched usage of `js`, `jsx`, `ts`, and `tsx`. Just tried to get them all in sync.

Author: manovotny

contributing/core/developing-using-local-app.md

@@ -41,10 +41,12 @@ Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/
 Try to add the below section to your `package.json`, then run again
 
 ```json
-"optionalDependencies": {
-  "@next/swc-linux-x64-gnu": "canary",
-  "@next/swc-win32-x64-msvc": "canary",
-  "@next/swc-darwin-x64": "canary",
-  "@next/swc-darwin-arm64": "canary"
-},
+{
+  "optionalDependencies": {
+    "@next/swc-linux-x64-gnu": "canary",
+    "@next/swc-win32-x64-msvc": "canary",
+    "@next/swc-darwin-x64": "canary",
+    "@next/swc-darwin-arm64": "canary"
+  }
+}
 ```

docs/01-getting-started/03-react-essentials.mdx

@@ -70,7 +70,7 @@ export default function Counter() {
 }
 ```
 
-```jsx filename="app/counter.jsx" highlight={1} switcher
+```jsx filename="app/counter.js" highlight={1} switcher
 'use client'
 
 import { useState } from 'react'

docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx

@@ -42,7 +42,7 @@ There are optional props you can pass to `<Link>`. See the [API reference](/docs
 
 When linking to [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts:
 
-```jsx filename="app/blog/PostList.jsx"
+```jsx filename="app/blog/PostList.js"
 import Link from 'next/link'
 
 export default function PostList({ posts }) {
@@ -62,7 +62,7 @@ export default function PostList({ posts }) {
 
 You can use [`usePathname()`](/docs/app/api-reference/functions/use-pathname) to determine if a link is active. For example, to add a class to the active link, you can check if the current `pathname` matches the `href` of the link:
 
-```jsx filename="app/ui/Navigation.jsx"
+```jsx filename="app/ui/Navigation.js"
 'use client'
 
 import { usePathname } from 'next/navigation'
@@ -109,7 +109,7 @@ The `useRouter` hook allows you to programmatically change routes inside [Client
 
 To use `useRouter`, import it from `next/navigation`, and call the hook inside your Client Component:
 
-```jsx filename="app/page.jsx"
+```jsx filename="app/page.js"
 'use client'
 
 import { useRouter } from 'next/navigation'

docs/02-app/01-building-your-application/01-routing/05-dynamic-routes.mdx

@@ -21,9 +21,15 @@ Dynamic Segments are passed as the `params` prop to [`layout`](/docs/app/api-ref
 
 For example, a blog could include the following route `app/blog/[slug]/page.js` where `[slug]` is the Dynamic Segment for blog posts.
 
-```tsx filename="app/blog/[slug]/page.js"
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default function Page({ params: { slug: string } }) {
+  return <div>My Post: {slug}</div>
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
 export default function Page({ params }) {
-  return <div>My Post</div>
+  return <div>My Post: {slug}</div>
 }
 ```
 

docs/02-app/01-building-your-application/01-routing/08-parallel-routes.mdx

@@ -126,6 +126,7 @@ Both [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected
 
 ```tsx filename="app/layout.tsx" switcher
 'use client'
+
 import { useSelectedLayoutSegment } from 'next/navigation'
 
 export default async function Layout(props: {
@@ -139,6 +140,7 @@ export default async function Layout(props: {
 
 ```jsx filename="app/layout.js" switcher
 'use client'
+
 import { useSelectedLayoutSegment } from 'next/navigation'
 
 export default async function Layout(props) {
@@ -251,7 +253,7 @@ export default async function Login() {
 }
 ```
 
-```jsx filename="app/@authModal/login/page.jsx" highlight="5" switcher
+```jsx filename="app/@authModal/login/page.js" highlight="5" switcher
 'use client'
 import { useRouter } from 'next/navigation'
 import { Modal } from 'components/modal'
@@ -280,7 +282,13 @@ If you want to navigate elsewhere and dismiss a modal, you can also use a catch-
   height="768"
 />
 
-```tsx filename="app/@authModal/[...catchAll]/page.js"
+```tsx filename="app/@authModal/[...catchAll]/page.tsx" switcher
+export default function CatchAll() {
+  return null
+}
+```
+
+```jsx filename="app/@authModal/[...catchAll]/page.js" switcher
 export default function CatchAll() {
   return null
 }

docs/02-app/01-building-your-application/01-routing/10-router-handlers.mdx

@@ -187,7 +187,7 @@ You can consider a `route` the lowest level routing primitive.
 
 Each `route.js` or `page.js` file takes over all HTTP verbs for that route.
 
-```tsx filename="app/page.js"
+```jsx filename="app/page.js"
 export default function Page() {
   return <h1>Hello, Next.js!</h1>
 }

docs/02-app/01-building-your-application/01-routing/12-colocation.mdx

@@ -127,7 +127,7 @@ Next.js supports storing application code (including `app`) inside an optional [
 
 Next.js supports [Module Path Aliases](/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases) which make it easier to read and maintain imports across deeply nested project files.
 
-```tsx filename="app/dashboard/settings/analytics/page.js"
+```jsx filename="app/dashboard/settings/analytics/page.js"
 // before
 import { Button } from '../../../components/button'
 

docs/02-app/01-building-your-application/01-routing/13-internationalization.mdx

@@ -18,7 +18,7 @@ It’s recommended to use the user’s language preferences in the browser to se
 
 For example, using the following libraries, you can look at an incoming `Request` to determine which locale to select, based on the `Headers`, locales you plan to support, and the default locale.
 
-```jsx filename="middleware.js"
+```js filename="middleware.js"
 import { match } from '@formatjs/intl-localematcher'
 import Negotiator from 'negotiator'
 
@@ -32,7 +32,7 @@ match(languages, locales, defaultLocale) // -> 'en-US'
 
 Routing can be internationalized by either the sub-path (`/fr/products`) or domain (`my-site.fr/products`). With this information, you can now redirect the user based on the locale inside [Middleware](/docs/app/building-your-application/routing/middleware).
 
-```jsx filename="middleware.js"
+```js filename="middleware.js"
 import { NextResponse } from 'next/server'
 
 let locales = ['en-US', 'nl-NL', 'nl']
@@ -87,15 +87,15 @@ Changing displayed content based on the user’s preferred locale, or localizati
 
 Let’s assume we want to support both English and Dutch content inside our application. We might maintain two different “dictionaries”, which are objects that give us a mapping from some key to a localized string. For example:
 
-```jsx filename="dictionaries/en.json"
+```json filename="dictionaries/en.json"
 {
   "products": {
     "cart": "Add to Cart"
   }
 }
 ```
 
-```jsx filename="dictionaries/nl.json"
+```json filename="dictionaries/nl.json"
 {
   "products": {
     "cart": "Toevoegen aan Winkelwagen"

docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx

@@ -368,7 +368,7 @@ If the segment is static (default), the output of the request will be cached and
 
 As a temporary solution, until the caching behavior of third-party queries can be configured, you can use [segment configuration](/docs/app/api-reference/file-conventions/route-segment-config#revalidate) to customize the cache behavior of the entire segment.
 
-```ts filename="app/page.tsx" switcher
+```tsx filename="app/page.tsx" switcher
 import prisma from './lib/prisma'
 
 export const revalidate = 3600 // revalidate every hour

docs/02-app/01-building-your-application/03-data-fetching/02-caching.mdx

@@ -76,7 +76,7 @@ export default async function Page() {
 
 React allows you to [`cache()`](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md) and deduplicate requests, memoizing the result of the wrapped function call. The same function called with the same arguments will reuse a cached value instead of re-running the function.
 
-```tsx filename="utils/getUser.ts" switcher
+```ts filename="utils/getUser.ts" switcher
 import { cache } from 'react'
 
 export const getUser = cache(async (id: string) => {
@@ -85,7 +85,7 @@ export const getUser = cache(async (id: string) => {
 })
 ```
 
-```jsx filename="utils/getUser.js" switcher
+```js filename="utils/getUser.js" switcher
 import { cache } from 'react'
 
 export const getUser = cache(async (id) => {
@@ -146,7 +146,7 @@ Although the `getUser()` function is called twice in the example above, only one
 
 `POST` requests are automatically deduplicated when using `fetch` – unless they are inside of `POST` Route Handler or come after reading `headers()`/`cookies()`. For example, if you are using GraphQL and `POST` requests in the above cases, you can use `cache` to deduplicate requests. The `cache` arguments must be flat and only include primitives. Deep objects won't match for deduplication.
 
-```tsx filename="utils/getUser.ts" switcher
+```ts filename="utils/getUser.ts" switcher
 import { cache } from 'react'
 
 export const getUser = cache(async (id: string) => {
@@ -155,7 +155,7 @@ export const getUser = cache(async (id: string) => {
 })
 ```
 
-```jsx filename="utils/getUser.js" switcher
+```js filename="utils/getUser.js" switcher
 import { cache } from 'react'
 
 export const getUser = cache(async (id) => {
@@ -232,7 +232,7 @@ export default async function Page({ params: { id } }) {
 
 You can combine the `cache` function, the `preload` pattern, and the `server-only` package to create a data fetching utility that can be used throughout your app.
 
-```tsx filename="utils/getUser.ts" switcher
+```ts filename="utils/getUser.ts" switcher
 import { cache } from 'react'
 import 'server-only'
 
@@ -245,7 +245,7 @@ export const getUser = cache(async (id: string) => {
 })
 ```
 
-```jsx filename="utils/getUser.js" switcher
+```js filename="utils/getUser.js" switcher
 import { cache } from 'react'
 import 'server-only'