Makes codeblock language and filename extensions consistent

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'
 

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

@@ -15,7 +15,7 @@ There are two types of revalidation in Next.js:
 
 To revalidate cached data at a specific interval, you can use the `next.revalidate` option in `fetch()` to set the `cache` lifetime of a resource (in seconds).
 
-```jsx
+```js
 fetch('https://...', { next: { revalidate: 60 } })
 ```
 
@@ -76,7 +76,7 @@ export default async function Page() {
 
 This cached data can then be revalidated on-demand by calling `revalidateTag` in a [Route Handler](/docs/app/building-your-application/routing/router-handlers).
 
-```tsx filename="app/api/revalidate/route.ts" switcher
+```ts filename="app/api/revalidate/route.ts" switcher
 import { NextRequest, NextResponse } from 'next/server'
 import { revalidateTag } from 'next/cache'
 
@@ -87,7 +87,7 @@ export async function GET(request: NextRequest) {
 }
 ```
 
-```jsx filename="app/api/revalidate/route.js" switcher
+```js filename="app/api/revalidate/route.js" switcher
 import { NextResponse } from 'next/server'
 import { revalidateTag } from 'next/cache'
 

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

@@ -13,7 +13,7 @@ related:
 
 **With Server Components:**
 
-```jsx filename="app/add-to-cart.jsx" highlight={5, 6, 13}
+```jsx filename="app/add-to-cart.js" highlight={5, 6, 13}
 import { cookies } from 'next/headers'
 
 // Server action defined inside a Server Component
@@ -44,7 +44,7 @@ async function addItem(data) {
 }
 ```
 
-```jsx filename="app/add-to-cart.jsx" highlight={1, 3, 8}
+```jsx filename="app/add-to-cart.js" highlight={1, 3, 8}
 'use client'
 
 import { addItem } from './actions.js'
@@ -88,7 +88,7 @@ Server Actions can be defined in two places:
 
 Create a Server Action by defining an asynchronous function with the `"use server"` directive at the top of the function body. This function should have **serializable arguments** and a **serializable return value** based on the React Server Components protocol.
 
-```jsx filename="app/server-component.jsx" highlight={2}
+```jsx filename="app/server-component.js" highlight={2}
 export default function ServerComponent() {
   async function myAction() {
     'use server'
@@ -101,15 +101,15 @@ export default function ServerComponent() {
 
 If you're using a Server Action inside a Client Component, create your action in a separate file with the "use server" directive at the top of the file. Then, import the Server Action into your Client Component:
 
-```jsx filename="app/actions.js" highlight={1}
+```js filename="app/actions.js" highlight={1}
 'use server'
 
 export async function myAction() {
   // ...
 }
 ```
 
-```jsx filename="app/client-component.jsx" highlight={1}
+```jsx filename="app/client-component.js" highlight={1}
 'use client'
 
 import { myAction } from './actions'
@@ -160,7 +160,7 @@ export default function AddToCart({ productId }) {
 
 You can use `formAction` prop to handle **Form Actions** on elements such as `button`, `input type="submit"`, and `input type="image"`. The `formAction` prop takes presedence over the form's `action`.
 
-```jsx filename="app/form" highlight={15}
+```jsx filename="app/form.js" highlight={15}
 export default function Form() {
   async function handleSubmit() {
     'use server'
@@ -207,7 +207,7 @@ function ExampleClientComponent({ id }) {
 }
 ```
 
-```jsx filename="app/actions.js"
+```js filename="app/actions.js"
 'use server'
 
 export async function addItem(id) {
@@ -390,7 +390,7 @@ In both cases, the form is interactive before hydration occurs. Although Server
 
 Server Actions **cannot** be _defined_ within Client Components, but they can be _imported_. To use Server Actions in Client Components, you can import the action from a file containing a top-level `"use server"` directive.
 
-```jsx filename="app/actions.js" highlight={1}
+```js filename="app/actions.js" highlight={1}
 'use server'
 
 export async function addItem() {
@@ -455,7 +455,7 @@ function ExampleClientComponent({ updateItem }) {
 
 Server Actions can be used to revalidate data on-demand by path ([`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)) or by cache tag ([`revalidateTag`](/docs/app/api-reference/functions/revalidateTag)).
 
-```jsx
+```js
 import { revalidateTag } from 'next/cache'
 
 async function revalidate() {
@@ -468,7 +468,7 @@ async function revalidate() {
 
 The data passed to a Server Action can be validated or sanitized before invoking the action. For example, you can create a wrapper function that receives the action as its argument, and returns a function that invokes the action if it's valid.
 
-```jsx filename="app/actions.js"
+```js filename="app/actions.js"
 'use server'
 
 import { withValidate } from 'lib/form-validation'
@@ -478,7 +478,7 @@ export const action = withValidate((data) => {
 })
 ```
 
-```jsx filename="lib/form-validation"
+```js filename="lib/form-validation.js"
 export function withValidate(action) {
   return (formData: FormData) => {
     'use server'
@@ -499,7 +499,7 @@ export function withValidate(action) {
 
 You can read incoming request headers such as `cookies` and `headers` within a Server Action.
 
-```jsx highlight={6}
+```js highlight={6}
 import { cookies } from 'next/headers'
 
 async function addItem(data) {
@@ -513,7 +513,7 @@ async function addItem(data) {
 
 Additionally, you can modify cookies within a Server Action.
 
-```jsx highlight={7, 9, 10, 11, 12, 13, 14}
+```js highlight={7, 9, 10, 11, 12, 13, 14}
 import { cookies } from 'next/headers';
 
 async function create(data) {

docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx

@@ -249,7 +249,7 @@ export default function MyApp({ Component, pageProps }) {
 
 For importing CSS required by a third-party component, you can do so in your component. For example:
 
-```tsx filename="components/example-dialog.js"
+```jsx filename="components/example-dialog.js"
 import { useState } from 'react'
 import { Dialog } from '@reach/dialog'
 import VisuallyHidden from '@reach/visually-hidden'

docs/02-app/01-building-your-application/05-optimizing/01-images.mdx

@@ -29,7 +29,7 @@ The Next.js Image component extends the HTML `<img>` element with features for a
 
 ## Usage
 
-```jsx
+```js
 import Image from 'next/image'
 ```