Skip to content

docs: update nextjs documentation #41

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

Merged
merged 1 commit into from
Jun 2, 2025
Merged

docs: update nextjs documentation #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 38 additions & 2 deletions apps/docs/content/en/docs/01-app/01-getting-started/04-images.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,41 @@ export default function Page() {
<Image
src="/profile.png"
alt="Picture of the author"
width={500}
height={500}
/>
)
}
```

```jsx filename="app/page.js" switcher
import Image from 'next/image'

export default function Page() {
return (
<Image
src="/profile.png"
alt="Picture of the author"
width={500}
height={500}
/>
)
}
```

### Statically imported images

You can also import and use local image files. Next.js will automatically determine the intrinsic [`width`](/docs/app/api-reference/components/image#width-and-height) and [`height`](/docs/app/api-reference/components/image#width-and-height) of your image based on the imported file. These values are used to determine the image ratio and prevent [Cumulative Layout Shift](https://web.dev/articles/cls) while your image is loading.

```tsx filename="app/page.tsx" switcher
import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
return (
<Image
src={ProfileImage}
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="data:..." automatically provided
Expand All @@ -69,11 +104,12 @@ export default function Page() {

```jsx filename="app/page.js" switcher
import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
return (
<Image
src="/profile.png"
src={ProfileImage}
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
Expand All @@ -84,7 +120,7 @@ export default function Page() {
}
```

When using local images, Next.js will automatically determine the intrinsic [`width`](/docs/app/api-reference/components/image#width-and-height) and [`height`](/docs/app/api-reference/components/image#width-and-height) of your image based on the imported file. These values are used to determine the image ratio and prevent [Cumulative Layout Shift](https://web.dev/articles/cls) while your image is loading.
In this case, Next.js expects the `app/profile.png` file to be available.

## Remote images

Expand Down
1 change: 0 additions & 1 deletion ...nt/en/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ export const dynamicParams = true // true | false,
> - This option replaces the `fallback: true | false | blocking` option of `getStaticPaths` in the `pages` directory.
> - To statically render all paths the first time they're visited, you'll need to return an empty array in `generateStaticParams` or utilize `export const dynamic = 'force-static'`.
> - When `dynamicParams = true`, the segment uses [Streaming Server Rendering](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense).
> - If the `dynamic = 'error'` and `dynamic = 'force-static'` are used, it'll change the default of `dynamicParams` to `false`.

### `revalidate`

Expand Down
130 changes: 74 additions & 56 deletions .../content/en/docs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,19 @@ description: API Reference for the useReportWebVitals function.

The `useReportWebVitals` hook allows you to report [Core Web Vitals](https://web.dev/vitals/), and can be used in combination with your analytics service.

New functions passed to `useReportWebVitals` are called with the available metrics up to that point. To prevent reporting duplicated data, ensure that the callback function reference does not change (as shown in the code examples below).

<PagesOnly>

```jsx filename="pages/_app.js"
import { useReportWebVitals } from 'next/web-vitals'

const logWebVitals = (metric) => {
console.log(metric)
}

function MyApp({ Component, pageProps }) {
useReportWebVitals((metric) => {
console.log(metric)
})
useReportWebVitals(logWebVitals)

return <Component {...pageProps} />
}
Expand All @@ -30,10 +34,12 @@ function MyApp({ Component, pageProps }) {

import { useReportWebVitals } from 'next/web-vitals'

const logWebVitals = (metric) => {
console.log(metric)
}

export function WebVitals() {
useReportWebVitals((metric) => {
console.log(metric)
})
useReportWebVitals(logWebVitals)

return null
}
Expand Down Expand Up @@ -89,18 +95,20 @@ You can handle all the results of these metrics using the `name` property.
```jsx filename="pages/_app.js"
import { useReportWebVitals } from 'next/web-vitals'

function MyApp({ Component, pageProps }) {
useReportWebVitals((metric) => {
switch (metric.name) {
case 'FCP': {
// handle FCP results
}
case 'LCP': {
// handle LCP results
}
// ...
const handleWebVitals = (metric) => {
switch (metric.name) {
case 'FCP': {
// handle FCP results
}
})
case 'LCP': {
// handle LCP results
}
// ...
}
}

function MyApp({ Component, pageProps }) {
useReportWebVitals(handleWebVitals)

return <Component {...pageProps} />
}
Expand All @@ -115,18 +123,22 @@ function MyApp({ Component, pageProps }) {

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
useReportWebVitals((metric) => {
switch (metric.name) {
case 'FCP': {
// handle FCP results
}
case 'LCP': {
// handle LCP results
}
// ...
type ReportWebVitalsCallback = Parameters<typeof useReportWebVitals>[0]

const handleWebVitals: ReportWebVitalsCallback = (metric) => {
switch (metric.name) {
case 'FCP': {
// handle FCP results
}
case 'LCP': {
// handle LCP results
}
})
// ...
}
}

export function WebVitals() {
useReportWebVitals(handleWebVitals)
}
```

Expand All @@ -135,18 +147,20 @@ export function WebVitals() {

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
useReportWebVitals((metric) => {
switch (metric.name) {
case 'FCP': {
// handle FCP results
}
case 'LCP': {
// handle LCP results
}
// ...
const handleWebVitals = (metric) => {
switch (metric.name) {
case 'FCP': {
// handle FCP results
}
})
case 'LCP': {
// handle LCP results
}
// ...
}
}

export function WebVitals() {
useReportWebVitals(handleWebVitals)
}
```

Expand All @@ -169,22 +183,24 @@ You can handle all the results of these metrics separately:
```jsx filename="pages/_app.js"
import { useReportWebVitals } from 'next/web-vitals'

function handleCustomMetrics(metrics) {
switch (metric.name) {
case 'Next.js-hydration':
// handle hydration results
break
case 'Next.js-route-change-to-render':
// handle route-change to render results
break
case 'Next.js-render':
// handle render results
break
default:
break
}
}

function MyApp({ Component, pageProps }) {
useReportWebVitals((metric) => {
switch (metric.name) {
case 'Next.js-hydration':
// handle hydration results
break
case 'Next.js-route-change-to-render':
// handle route-change to render results
break
case 'Next.js-render':
// handle render results
break
default:
break
}
})
useReportWebVitals(handleCustomMetrics)

return <Component {...pageProps} />
}
Expand All @@ -200,7 +216,7 @@ You can send results to any endpoint to measure and track
real user performance on your site. For example:

```js
useReportWebVitals((metric) => {
function postWebVitals(metrics) {
const body = JSON.stringify(metric)
const url = 'https://example.com/analytics'

Expand All @@ -210,7 +226,9 @@ useReportWebVitals((metric) => {
} else {
fetch(url, { body, method: 'POST', keepalive: true })
}
})
}

useReportWebVitals(postWebVitals)
```

> **Good to know**: If you use [Google Analytics](https://analytics.google.com/analytics/web/), using the
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/en/learn/02-dashboard-app/12-mutating-data.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ export async function createInvoice(formData: FormData) {

Now that you have all the values you need for your database, you can create an SQL query to insert the new invoice into your database and pass in the variables:

```ts {2,15,16,17,18} filename="/app/lib/actions.ts"
```ts {2,4,17,18,19,20} filename="/app/lib/actions.ts"
import { z } from 'zod';
import postgres from 'postgres';

Expand Down Expand Up @@ -363,7 +363,7 @@ Once the database has been updated, the `/dashboard/invoices` path will be reval

At this point, you also want to redirect the user back to the `/dashboard/invoices` page. You can do this with the [`redirect`](/docs/app/api-reference/functions/redirect) function from Next.js:

```ts {6,14} filename="/app/lib/actions.ts"
```ts {5,16} filename="/app/lib/actions.ts"
'use server';

import { z } from 'zod';
Expand Down Expand Up @@ -488,7 +488,7 @@ Notice how it's similar to your `/create` invoice page, except it imports a diff

In addition to `searchParams`, page components also accept a prop called `params` which you can use to access the `id`. Update your `<Page>` component to receive the prop:

```tsx {5,6} filename="/app/dashboard/invoices/[id]/edit/page.tsx"
```tsx {5,6,7} filename="/app/dashboard/invoices/[id]/edit/page.tsx"
import Form from '@/app/ui/invoices/edit-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchCustomers } from '@/app/lib/data';
Expand Down