In this section, we explore the world of programming, algorithms, networks, and infrastructure
The proxy.ts file in Next.js replaces middleware.ts and acts as an edge-level gatekeeper before your app renders. It can rewrite or redirect routes, set headers and cookies, block access, and run background tasks. This article explains how to use proxy.ts, define precise matchers, and implement real-world scenarios like authentication, A/B testing, CORS, and geo-based redirects.
The public folder in Next.js is used to serve static files like images, fonts, and text documents. Files placed in this folder are accessible via direct URLs and can be rendered in the browser without special imports. This article explains how to use the public folder, display images, and understand its caching behavior.
Route Handlers in Next.js allow you to define custom request logic using Web APIs. With support for all major HTTP methods, cookies, headers, query parameters, dynamic segments, streaming, and webhooks, route.ts files offer a powerful way to build flexible, server-side functionality directly within your app.
The template.tsx file in Next.js behaves like a layout but remounts on every navigation due to its unique key. Unlike layouts that persist across routes, templates reset the state of child Client Components, re-run effects like useEffect, and show Suspense fallbacks on every route change. This makes them ideal for input resets, effect resynchronization, and dynamic UI transitions.
The unauthorized.tsx file in Next.js is an experimental feature used to render a custom UI when the unauthorized() function is called during authentication. It allows you to display a login prompt or message for unauthenticated users, and automatically returns a 401 status code. This article explains how to use unauthorized.tsx to improve user experience during access control.
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.
