Exploring Various Coding Languages
Fonts are the outfit of your page — and next/font makes them fast, secure, and beautiful. With automatic optimization, zero external requests, and no layout shift, next/font lets you load Google or local fonts with ease. This article shows how to use next/font with Tailwind CSS, organize font definitions, preload fonts, and follow best practices.
In Next.js, the default.js file provides a fallback for Parallel Routes when the active state of a slot cannot be recovered after a full-page load. This article explains how to use default.js, access dynamic route parameters, handle catch-all segments, and generate static paths with generateStaticParams.
nextjs-error-boundary-global-error-forbidden-instrumentation-observability
The instrumentation-client.js file in Next.js lets you run monitoring, analytics, and polyfills before your app becomes interactive. Combined with Intercepting Routes, you can display content like modals without changing the page context. This article explains how to use both features with practical examples.
The layout.js file in Next.js defines the structure of your pages. Layouts can be local or root-level and receive props like children and params. This article explains how to use layouts, handle dynamic parameters, integrate with Client Components, and optimize performance through caching and reusability.
Next.js supports streaming UI with React Suspense using loading.js, and provides graceful error handling with not-found.js and global-not-found.js.. This article explains how to create instant loading states, define custom 404 pages, and optimize user experience and SEO with these special files.
The page.js file in Next.js defines the unique UI for a route. It can receive dynamic route parameters (params) and query string parameters (searchParams), and is a Server Component by default. This article explains how to use page.js to build dynamic, filterable, and personalized pages.
Parallel Routes in Next.js allow you to render multiple pages simultaneously or conditionally within the same layout. This is ideal for dynamic sections like dashboards, modals, and tabbed interfaces. This article explains how to define named slots, use default.js for fallbacks, manage modals with intercepting routes, and build independent tab groups.
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.
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.
