headers, ImageResponse, notFound, and permanentRedirect in Next.js — Request Handling, Dynamic Images, Errors, and Redirects

1. Reading HTTP Headers with headers()

headers() is an async function that returns a read-only Web Headers object. It can be used in Server Components to access incoming HTTP headers.

Example:

import { headers } from 'next/headers'

export default async function Page() {
  const headersList = await headers()
  const userAgent = headersList.get('user-agent')
}

Common Methods:

• get(name): Get a specific header value
• has(name): Check if a header exists
• entries(): Iterate over key/value pairs

2. Generating Dynamic Images with ImageResponse

ImageResponse lets you generate Open Graph images, Twitter cards, and other social visuals using JSX and CSS.

Basic Example:

return new ImageResponse(
  <div style={{ fontSize: 60 }}>Welcome</div>,
  { width: 1200, height: 630 }
)

Supported Features:

• Flexbox and absolute positioning
• Custom fonts (ttf, otf, woff)
• Max bundle size: 500KB

Using Custom Fonts:

const fontData = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))

return new ImageResponse(
  <div>My site</div>,
  {
    width: 1200,
    height: 630,
    fonts: [{ name: 'Inter', data: fontData, style: 'normal', weight: 400 }],
  }
)

3. Handling 404 Errors with notFound()

notFound() throws a 404 error and renders the not-found file in the current route segment. It also injects a <meta name="robots" content="noindex" /> tag.

Example:

import { notFound } from 'next/navigation'

const user = await fetchUser(id)
if (!user) {
  notFound()
}

4. Redirecting with permanentRedirect()

permanentRedirect() redirects the user to another route. It can be used in Server Components, Client Components, Route Handlers, and Server Actions.

Example:

import { permanentRedirect } from 'next/navigation'

const team = await fetchTeam(id)
if (!team) {
  permanentRedirect('/login')
}

Parameters:

• path: Destination URL
• type: 'replace' or 'push' (optional)

Conclusion

headers helps you personalize responses, ImageResponse lets you generate dynamic visuals, notFound provides graceful error handling, and permanentRedirect ensures smooth navigation. Together, these tools help you build responsive, secure, and user-friendly applications in Next.js.