diff --git a/apps/docs/content/en/docs/01-app/01-getting-started/04-images.mdx b/apps/docs/content/en/docs/01-app/01-getting-started/04-images.mdx index 5a06add9..39758012 100644 --- a/apps/docs/content/en/docs/01-app/01-getting-started/04-images.mdx +++ b/apps/docs/content/en/docs/01-app/01-getting-started/04-images.mdx @@ -58,6 +58,41 @@ export default function Page() { Picture of the author + ) +} +``` + +```jsx filename="app/page.js" switcher +import Image from 'next/image' + +export default function Page() { + return ( + Picture of the author + ) +} +``` + +### 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 ( + Picture of the author - 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` diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx index 050889f6..e7dc02ce 100644 --- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx +++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx @@ -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). + ```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 } @@ -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 } @@ -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 } @@ -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[0] + +const handleWebVitals: ReportWebVitalsCallback = (metric) => { + switch (metric.name) { + case 'FCP': { + // handle FCP results + } + case 'LCP': { + // handle LCP results } - }) + // ... + } +} + +export function WebVitals() { + useReportWebVitals(handleWebVitals) } ``` @@ -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) } ``` @@ -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 } @@ -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' @@ -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 diff --git a/apps/docs/content/en/learn/02-dashboard-app/12-mutating-data.mdx b/apps/docs/content/en/learn/02-dashboard-app/12-mutating-data.mdx index 0a206bd4..4f05e1df 100644 --- a/apps/docs/content/en/learn/02-dashboard-app/12-mutating-data.mdx +++ b/apps/docs/content/en/learn/02-dashboard-app/12-mutating-data.mdx @@ -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'; @@ -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'; @@ -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 `` 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';