Step-by-step articles on Frontend, part of our Web Development collection.
Showing 40 articles
React 19 is mostly about making async work, especially forms and data mutations, simpler. Here are the features you'll use most, with short examples. Actions An Action is an async function used in a transition. React tracks its pending state, errors and optimi...
In the App Router, folders define routes and special files define what renders for them. Once you know the handful of file conventions, the structure of any Next.js app becomes easy to read. Folders are routes app/ layout.tsx -> wraps every page (html, body, h...
TypeScript is JavaScript with types. The types are checked at build time and then removed, so the code that runs is plain JavaScript. What you gain is autocomplete that knows your data and errors before your users find them. Inference does most of the work let...
Tailwind CSS v4 is a ground-up rewrite. The biggest change for day-to-day work: configuration moves from tailwind.config.js into your CSS file. Install with Vite npm install tailwindcss @tailwindcss/vite // vite.config.js import { defineConfig } from 'vite'; i...
Before React 19, a form needed state for values, errors, loading and the response. useActionState folds most of that into one hook. The signature const [state, formAction, isPending] = useActionState(actionFn, initialState); // actionFn(previousState, formData...
A Server Action is an async function that runs on the server but can be called from a form or a client component. Next.js creates the endpoint for you. A form that writes to the database // app/todos/page.tsx import { revalidatePath } from 'next/cache'; import...
Generics let you write code that works with many types while keeping the connection between input and output types. Think of them as function parameters, but for types. The problem function first(items: any[]) { return items[0]; } const n = first([1, 2, 3]); /...
Media queries respond to the viewport. But a card might sit in a wide main column on one page and a narrow sidebar on another. Container queries let the card respond to the width of its container instead. 1. Declare a container .card-wrapper { container-type:...
When a user likes a post or sends a message, waiting for the server before updating the screen feels sluggish. Optimistic UI shows the result immediately and corrects it if the request fails. The hook const [optimisticState, addOptimistic] = useOptimistic(actu...
Caching in Next.js used to be implicit and confusing. Recent versions moved to an explicit model: data is fetched fresh by default, and you opt in to caching with the 'use cache' directive. Turn on Cache Components // next.config.ts import type { NextConfig }...
Utility types build new types from existing ones, so you define your data once and derive variations instead of copying fields. interface User { id: number; name: string; email: string; role: 'admin' | 'member'; passwordHash: string; } Partial and Required //...
:has() matches an element if it contains something that matches the selector inside the brackets. For the first time, CSS can style a parent based on its children. Cards with or without an image .card:has(img) { grid-template-rows: 200px auto; } .card:not(:has...
use is a React API that reads the value of a resource : a promise or a context. It's unusual because you can call it inside conditions and loops. Reading a promise When the promise is pending, the component suspends and the nearest <Suspense> boundary shows it...
In the App Router you fetch data directly in async Server Components. No useEffect , no API route in between. The main thing to get right is avoiding slow request waterfalls . Fetch where the data is needed export default async function Dashboard() { const sta...
A type annotation checks a value against a type, but then the variable becomes that type, and you lose the specific details. satisfies checks the value without changing its inferred type. The problem with annotations type Route = { path: string; auth: boolean...
Nesting was one of the main reasons people used Sass. It's now part of CSS itself and works in every modern browser. The basics .card { padding: 1rem; border-radius: 12px; h2 { font-size: 1.25rem; /* .card h2 */ } &:hover { box-shadow: 0 4px 20px rgb(0 0 0 / 0...
React Server Components (RSC) render on the server and send their result to the browser, not their JavaScript. They can read databases and files directly, and they add nothing to your client bundle. Server vs client components Server Components (default in fra...
Dynamic routes let one file serve many URLs, such as every blog post or product. With generateStaticParams you can pre-render the popular ones at build time. Segment types [slug] - one segment: /blog/hello . [...slug] - catch-all: /docs/a/b/c gives ['a','b','c...
A union type says "this value is one of several shapes". Narrowing is how TypeScript figures out which one you have inside a branch. Built-in narrowing function format(value: string | number | Date) { if (typeof value === 'string') return value.trim(); // stri...
When two CSS rules conflict, specificity usually decides who wins. That leads to !important and ever-longer selectors. Cascade layers add a level above specificity: rules in a later layer beat rules in an earlier layer, no matter how specific. Declare the orde...
Re-renders in React are cheap until they aren't. Developers used useMemo , useCallback and React.memo to skip unnecessary work, but getting the dependency arrays right is tedious. React Compiler is a build-time tool that adds this memoization automatically. Wh...
Sometimes you need to act on a request before any page renders: redirect signed-out users, rewrite a path, or add a header. In Next.js 16 this file is called proxy.ts ; earlier versions called it middleware.ts and the idea is the same. A basic proxy // proxy.t...
TypeScript checks your code, not your data. A JSON response, a form submission or an environment variable can be anything at runtime. Zod validates data against a schema and gives you the TypeScript type from that same schema. Define once, get both import { z...
#hex and rgb() describe colours the way screens produce them, not the way people see them. Newer CSS colour functions make palettes more consistent and easier to generate. oklch(): perceptual colour :root { /* oklch(lightness chroma hue) */ --brand-300: oklch(...
Passing a ref to a custom component used to require wrapping it in forwardRef . In React 19, function components simply receive ref as a prop. Before and after // React 18 const Input = forwardRef(function Input(props, ref) { return <input ref={ref} className=...
The App Router has built-in tools for everything search engines and social networks need: titles, descriptions, canonical links, sitemaps and share images. Static metadata // app/layout.tsx import type { Metadata } from 'next'; export const metadata: Metadata...
For years, running TypeScript in Node.js meant a compile step or a loader like ts-node or tsx. Recent Node.js versions can run .ts files directly by stripping the type annotations. Try it // greet.ts interface Person { name: string } function greet(p: Person):...
CSS Grid handles two-dimensional layout: rows and columns. These recipes cover most real-world layouts. Responsive cards without media queries .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.5rem; } Columns...
Fetching in useEffect means handling loading, errors, caching, refetching and race conditions yourself. TanStack Query (formerly React Query) handles all of that for client-side data. Setup import { QueryClient, QueryClientProvider } from '@tanstack/react-quer...
Route Handlers are the App Router's version of API routes. A route.ts file exports functions named after HTTP methods and uses the standard Web Request and Response APIs. GET and POST // app/api/projects/route.ts import { NextResponse } from 'next/server'; exp...
tsconfig.json has over a hundred options. These are the ones that matter most for catching bugs in a modern project. { "compilerOptions": { "target": "es2022", "module": "nodenext", "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true,...
Animating from one UI state to another (a thumbnail growing into a detail view, a list reordering) used to need a heavy animation library. The View Transitions API lets the browser do it. Same-page transitions function showDetails(item) { if (!document.startVi...
"Which state library should I use?" depends on what kind of state you have. Most apps need less global state than they think. 1. Server state is not app state Data from your API (users, products, orders) belongs in a server-state tool: Server Components, TanSt...
The App Router turns error handling into file conventions. Each route segment can have its own error UI, so one broken widget doesn't take down the whole app. error.tsx: catch unexpected errors // app/dashboard/error.tsx 'use client'; // error boundaries must...
Advanced types let you describe APIs precisely: event names, CSS tokens, route parameters. You won't write these every day, but they make library-style code much safer. Template literal types type Size = 'sm' | 'md' | 'lg'; type Side = 'top' | 'bottom'; type M...
Scroll effects used to mean scroll event listeners or IntersectionObserver. Scroll-driven animations connect a normal CSS animation to the scroll position, and they run off the main thread, so they stay smooth. A reading progress bar .progress { position: fixe...
React Testing Library encourages tests that interact with your UI the way users do: find a button by its label, click it, check what appears. Vitest runs those tests quickly and shares config with Vite. Setup npm install -D vitest jsdom @testing-library/react...
Images and fonts are the most common causes of slow Largest Contentful Paint (LCP) and layout shift (CLS). Next.js includes components that fix both with very little effort. next/image import Image from 'next/image'; import hero from './hero.jpg'; // static im...
These three types sit at the edges of TypeScript's type system and are often confused. Using the right one is the difference between real safety and false confidence. any: switch off checking let data: any = JSON.parse(input); data.user.name.toUpperCase(); //...
Good dark mode isn't just inverted colours. It needs its own palette, respects the user's system setting, and lets them override it. 1. Use semantic colour variables :root { --bg: #ffffff; --surface: #f8fafc; --text: #0f172a; --muted: #64748b; --brand: #0d9488...
