new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Next.js App Router · all subjects

images & media

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Next.js Image component prevents layout shifts

The Next.js `<Image>` component automatically sets `width` and `height` attributes based on the image's dimensions, preventing layout shifts when the image loads. However, this can cause distortion if your app has images with only one dimension styled without the other styled to `auto`.

next/image and next/legacy/image codemods

Two codemods are available for Image component migration: next-image-to-legacy-image (safely renames next/image imports to next/legacy/image for backward compatibility) and next-image-experimental (dangerously adds inline styles and removes unused props to match new defaults; requires running next-image-to-legacy-image first).

Image component improvements in Next.js 13

In Next.js 12, the new Image improvements were available via next/future/image import. In version 13, this new behavior is now the default for next/image, with less client-side JavaScript, easier ways to extend and style images, better accessibility, and native browser lazy loading.

Image component example for public folder assets

This example shows how to display an image from the public folder using the Image component from Next.js: ```jsx import Image from 'next/image' export function Avatar({ id, alt }) { return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" /> } export function AvatarOfMe() { return <Avatar id="me" alt="A portrait of me" /> } ``` The example demonstrates referencing a file at `public/avatars/me.png` using the `/avatars/me.png` path and specifying explicit width and height properties.

Public folder for static assets

Create a `public` folder at the root of your project to store static assets such as images and fonts. Files inside public can be referenced by your code starting from the base URL (/). For example, `public/profile.png` can be referenced as `/profile.png`.

Example referencing static assets from public folder

Static assets in the public folder are referenced using the root path. Example using Next.js Image component: ```tsx import Image from 'next/image' export default function Page() { return <Image src="/profile.png" alt="Profile" width={100} height={100} /> } ```

Give your agent this brain