Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Makes codeblock language and filename extensions consistent #51056

Merged
merged 9 commits into from
Jun 12, 2023
Merged

Makes codeblock language and filename extensions consistent #51056

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
52efb7e
Makes codeblock language and filename extensions consistent
manovotny Jun 9, 2023
59b537e
Merge branch 'canary' into lang-and-filename-consistency
manovotny Jun 9, 2023
e379f06
Revert filenames in error files.
manovotny Jun 9, 2023
f324e4e
Valid json and filenames.
manovotny Jun 9, 2023
8bf6963
Fixes amp pages.
manovotny Jun 9, 2023
9e2d0a9
Use .js files for JSX
manovotny Jun 12, 2023
c42d47c
Adds language and extension table for code blocks
manovotny Jun 12, 2023
d192011
Merge branch 'canary' into lang-and-filename-consistency
manovotny Jun 12, 2023
112adb4
Merge branch 'canary' into lang-and-filename-consistency
kodiakhq[bot] Jun 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/01-getting-started/01-installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default function RootLayout({
}
```

```jsx filename="app/layout.js" switcher
```jsx filename="app/layout.jsx" switcher
export default function RootLayout({ children }) {
return (
<html lang="en">
Expand All @@ -115,7 +115,7 @@ export default function Page() {
}
```

```jsx filename="app/page.js" switcher
```jsx filename="app/page.jsx" switcher
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
Expand Down
34 changes: 17 additions & 17 deletions docs/01-getting-started/03-react-essentials.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
}
```

```jsx filename="app/layout.js" switcher
```jsx filename="app/layout.jsx" switcher
// SearchBar is a Client Component
import SearchBar from './searchbar'
// Logo is a Server Component
Expand Down Expand Up @@ -220,7 +220,7 @@ export default function ExampleClientComponent({
}
```

```jsx filename="app/example-client-component.js" switcher highlight={5,14}
```jsx filename="app/example-client-component.jsx" switcher highlight={5,14}
'use client'

// This pattern will **not** work!
Expand Down Expand Up @@ -270,7 +270,7 @@ export default function ExampleClientComponent({
}
```

```jsx filename="app/example-client-component.js" switcher highlight={5,12}
```jsx filename="app/example-client-component.jsx" switcher highlight={5,12}
'use client'

import { useState } from 'react'
Expand Down Expand Up @@ -311,7 +311,7 @@ export default function Page() {
}
```

```jsx filename="app/page.js" highlight={11} switcher
```jsx filename="app/page.jsx" highlight={11} switcher
// This pattern works:
// You can pass a Server Component as a child or prop of a
// Client Component.
Expand Down Expand Up @@ -449,7 +449,7 @@ export default function Gallery() {
}
```

```jsx filename="app/gallery.js" switcher
```jsx filename="app/gallery.jsx" switcher
'use client'

import { useState } from 'react'
Expand Down Expand Up @@ -486,7 +486,7 @@ export default function Page() {
}
```

```jsx filename="app/page.js" switcher
```jsx filename="app/page.jsx" switcher
import { Carousel } from 'acme-carousel'

export default function Page() {
Expand All @@ -513,7 +513,7 @@ import { Carousel } from 'acme-carousel'
export default Carousel
```

```jsx filename="app/carousel.js" switcher
```jsx filename="app/carousel.jsx" switcher
'use client'

import { Carousel } from 'acme-carousel'
Expand All @@ -538,7 +538,7 @@ export default function Page() {
}
```

```jsx filename="app/page.js" switcher
```jsx filename="app/page.jsx" switcher
import Carousel from './carousel'

export default function Page() {
Expand Down Expand Up @@ -603,7 +603,7 @@ function SidebarNav() {
}
```

```jsx filename="app/sidebar.js" switcher
```jsx filename="app/sidebar.jsx" switcher
'use client'

import { createContext, useContext, useState } from 'react'
Expand Down Expand Up @@ -652,7 +652,7 @@ export default function RootLayout({ children }) {
}
```

```jsx filename="app/layout.js" switcher
```jsx filename="app/layout.jsx" switcher
import { createContext } from 'react'

// createContext is not supported in Server Components
Expand Down Expand Up @@ -683,7 +683,7 @@ export default function ThemeProvider({ children }) {
}
```

```jsx filename="app/theme-provider.js" switcher
```jsx filename="app/theme-provider.jsx" switcher
'use client'

import { createContext } from 'react'
Expand Down Expand Up @@ -715,7 +715,7 @@ export default function RootLayout({
}
```

```jsx filename="app/layout.js" switcher
```jsx filename="app/layout.jsx" switcher
import ThemeProvider from './theme-provider'

export default function RootLayout({ children }) {
Expand Down Expand Up @@ -754,7 +754,7 @@ export default function RootLayout({ children }) {
}
```

```jsx filename="app/layout.js" switcher
```jsx filename="app/layout.jsx" switcher
import { ThemeProvider } from 'acme-theme'

export default function RootLayout({ children }) {
Expand All @@ -771,7 +771,7 @@ export default function RootLayout({ children }) {

To fix this, wrap third-party providers in your own Client Component:

```jsx filename="app/providers.js"
```jsx filename="app/providers.jsx"
'use client'

import { ThemeProvider } from 'acme-theme'
Expand All @@ -788,7 +788,7 @@ export function Providers({ children }) {

Now, you can import and render `<Providers />` directly within your root layout.

```jsx filename="app/layout.js"
```jsx filename="app/layout.jsx"
import { Providers } from './providers'

export default function RootLayout({ children }) {
Expand Down Expand Up @@ -827,7 +827,7 @@ export async function UsersLayout() {
}
```

```jsx filename="app/users/layout.js" switcher
```jsx filename="app/users/layout.jsx" switcher
import { db } from '@utils/database'

export async function UsersLayout() {
Expand All @@ -845,7 +845,7 @@ export async function DashboardPage() {
}
```

```jsx filename="app/users/[id]/page.js" switcher
```jsx filename="app/users/[id]/page.jsx" switcher
import { db } from '@utils/database'

export async function DashboardPage() {
Expand Down
2 changes: 1 addition & 1 deletion docs/02-app/01-building-your-application/01-routing/01-defining-routes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function Page() {
}
```

```jsx filename="app/page.js" switcher
```jsx filename="app/page.jsx" switcher
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
Expand Down
14 changes: 7 additions & 7 deletions docs/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function Page() {
}
```

```jsx filename="app/page.js" switcher
```jsx filename="app/page.jsx" switcher
// `app/page.js` is the UI for the `/` URL
export default function Page() {
return <h1>Hello, Home page!</h1>
Expand All @@ -42,7 +42,7 @@ export default function Page() {
}
```

```jsx filename="app/dashboard/page.js" switcher
```jsx filename="app/dashboard/page.jsx" switcher
// `app/dashboard/page.js` is the UI for the `/dashboard` URL
export default function Page() {
return <h1>Hello, Dashboard Page!</h1>
Expand Down Expand Up @@ -88,7 +88,7 @@ export default function DashboardLayout({
}
```

```jsx filename="app/dashboard/layout.js" switcher
```jsx filename="app/dashboard/layout.jsx" switcher
export default function DashboardLayout({
children, // will be a page or nested layout
}) {
Expand Down Expand Up @@ -134,7 +134,7 @@ export default function RootLayout({
}
```

```jsx filename="app/layout.js" switcher
```jsx filename="app/layout.jsx" switcher
export default function RootLayout({ children }) {
return (
<html lang="en">
Expand Down Expand Up @@ -176,7 +176,7 @@ export default function DashboardLayout({
}
```

```jsx filename="app/dashboard/layout.js" switcher
```jsx filename="app/dashboard/layout.jsx" switcher
export default function DashboardLayout({ children }) {
return <section>{children}</section>
}
Expand Down Expand Up @@ -224,7 +224,7 @@ export default function Template({ children }: { children: React.ReactNode }) {
}
```

```jsx filename="app/template.js" switcher
```jsx filename="app/template.jsx" switcher
export default function Template({ children }) {
return <div>{children}</div>
}
Expand Down Expand Up @@ -257,7 +257,7 @@ export default function Page() {
}
```

```jsx filename="app/page.js" switcher
```jsx filename="app/page.jsx" switcher
export const metadata = {
title: 'Next.js',
}
Expand Down
2 changes: 1 addition & 1 deletion docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Page() {
}
```

```jsx filename="app/page.js" switcher
```jsx filename="app/page.jsx" switcher
import Link from 'next/link'

export default function Page() {
Expand Down
14 changes: 10 additions & 4 deletions docs/02-app/01-building-your-application/01-routing/05-dynamic-routes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.jsx" switcher
export default function Page({ params }) {
return <div>My Post</div>
return <div>My Post: {slug}</div>
}
manovotny marked this conversation as resolved.
Show resolved Hide resolved
```

Expand Down Expand Up @@ -51,7 +57,7 @@ export async function generateStaticParams() {
}
```

```jsx filename="app/blog/[slug]/page.js" switcher
```jsx filename="app/blog/[slug]/page.jsx" switcher
export async function generateStaticParams() {
const posts = await fetch('https://.../posts').then((res) => res.json())

Expand Down Expand Up @@ -104,7 +110,7 @@ export default function Page({ params }: { params: { slug: string } }) {
}
```

```jsx filename="app/blog/[slug]/page.js" switcher
```jsx filename="app/blog/[slug]/page.jsx" switcher
export default function Page({ params }) {
return <h1>My Page</h1>
}
Expand Down
4 changes: 2 additions & 2 deletions .../02-app/01-building-your-application/01-routing/06-loading-ui-and-streaming.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function Loading() {
}
```

```jsx filename="app/dashboard/loading.js" switcher
```jsx filename="app/dashboard/loading.jsx" switcher
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <LoadingSkeleton />
Expand Down Expand Up @@ -143,7 +143,7 @@ export default function Posts() {
}
```

```jsx filename="app/dashboard/page.js" switcher
```jsx filename="app/dashboard/page.jsx" switcher
import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

Expand Down
6 changes: 3 additions & 3 deletions docs/02-app/01-building-your-application/01-routing/07-error-handling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function Error({
}
```

```jsx filename="app/dashboard/error.js" switcher
```jsx filename="app/dashboard/error.jsx" switcher
'use client' // Error components must be Client Components

import { useEffect } from 'react'
Expand Down Expand Up @@ -120,7 +120,7 @@ export default function Error({
}
```

```jsx filename="app/dashboard/error.js" switcher
```jsx filename="app/dashboard/error.jsx" switcher
'use client'

export default function Error({ error, reset }) {
Expand Down Expand Up @@ -193,7 +193,7 @@ export default function GlobalError({
}
```

```jsx filename="app/global-error.js" switcher
```jsx filename="app/global-error.jsx" switcher
'use client'

export default function GlobalError({ error, reset }) {
Expand Down