Exploring Various Coding Languages
Next.js supports special conventions for setting app icons: favicon, icon, and apple-icon. These icons appear in browser tabs, mobile home screens, and search engine previews. You can define them using image files or generate them programmatically with ImageResponse. This article explains both approaches, valid file locations, metadata configuration, and how Next.js automatically injects the correct <head> tags.
The manifest.json or manifest.webmanifest file in Next.js provides metadata about your application to browsers. It defines the app’s name, icons, colors, and display behavior, especially for Progressive Web Apps (PWAs). You can define it statically or generate it dynamically using manifest.ts.. This article explains both approaches, valid placement, and supported options.
Next.js supports special conventions for generating social preview images using opengraph-image and twitter-image files. These images appear when your site is shared on platforms like Twitter, WhatsApp, or LinkedIn. You can define them using static image files or generate them dynamically with ImageResponse. This article explains both approaches, metadata configuration, and how to customize previews per route segment.
The robots.txt file in Next.js defines which parts of your site search engine crawlers can access. You can create it as a static file or generate it dynamically using a special Route Handler. You can also customize rules for specific bots like Googlebot or Bingbot. This article explains how to define the file, its structure, and advanced configuration options.
Next.js supports sitemap.xml through both static files and dynamic route handlers. These sitemaps help search engine crawlers index your site efficiently by listing URLs, last modified dates, priorities, and change frequencies. You can also generate image, video, and localized sitemaps, or split large sitemaps into multiple files. This article explains all supported formats and strategies.
The after function in Next.js lets you schedule tasks to run after a response or prerender is completed. It’s ideal for non-blocking side effects like logging, analytics, or background operations. You can use it in Server Components, Server Actions, Route Handlers, and Proxy. It doesn’t make your route dynamic and runs even if the response fails. This article explains how to use after, its limitations, and examples with request APIs.
The cacheLife function in Next.js lets you define how long a component or function should remain cached. It works alongside the use cache directive and must be called within the same scope. You can use preset profiles like seconds, days, or max, or define custom profiles in next.config.ts.. This article explains how cacheLife works, the difference between stale, revalidate, and expire, and how to apply it across your app.
The connection function in Next.js lets you delay rendering until a real user request arrives. This is useful when you want runtime behavior (like Math.random or new Date) without using Dynamic APIs. The cookies API allows reading cookies in Server Components and reading/writing them in Server Actions or Route Handlers. This article explains how both features work, with practical examples and important caveats.
Next.js offers powerful tools for dynamic rendering and secure access control. The draftMode function lets you enable or disable preview mode and check its status. The fetch API is extended with cache, revalidate, and tags options for precise control over data freshness. The forbidden function throws a 403 error when access is denied, useful for role-based protection. This article explains how to use all three features with practical examples.
The generateStaticParams function in Next.js allows you to prebuild dynamic routes at build time instead of rendering them on-demand. It replaces getStaticPaths from the Pages Router and supports single, multiple, and catch-all segments. You can generate routes from the bottom up or top down, and control fallback behavior using dynamicParams. This article explains how to use generateStaticParams with practical examples and configuration tips.
In modern versions of Next.js, managing page metadata is more powerful and intuitive than ever. Metadata is automatically injected into the <head> of your pages and plays a vital role in SEO, social sharing, and user experience. This guide explains the two main ways to define metadata: using the static metadata object and the dynamic generateMetadata function.
Next.js offers powerful tools for handling HTTP requests and responses in Server Components. The headers function lets you read incoming request headers. ImageResponse allows you to generate dynamic images using JSX and CSS. The notFound function renders a custom 404 page, and permanentRedirect enables permanent redirection to another route. This article explains how to use each feature with practical examples.
