Next.js

Learn the basics of end-to-end testing in a real browser, and how to install Playwright, write tests, and run them with UI mode and Codegen.

Review Parts 1–14, see how TDD changed the code, and explore where to go next with end-to-end and visual regression testing.

Explore the costs and benefits of introducing TDD to a production project, strategies for adopting it as a team, and how CI/CD makes testing sustainable.

Compare unit, integration, and end-to-end tests, and learn how the Testing Trophy guides an effective React testing strategy.

Learn to write robust tests that survive internal changes by avoiding implementation details and focusing on user behavior.

Recognize hard-to-test components and improve testability through UI/logic separation and provider-aware test setup.

Use userEvent.type to simulate text input and verify validation messages when required fields are missing.

Introduce Mock Service Worker to intercept network requests, manage mock responses, and test success and server-error cases without a real server.

Learn to test asynchronous operations such as API calls, and verify Loading, Success, and Error states with findBy queries.

Extract business logic into a custom hook and test it independently with renderHook and act.

Test conditional rendering as React state changes, and learn when to use getBy and queryBy.

Refactor a React component by extracting a reusable child component, and use existing tests to confirm the behavior remains reliable.

Implement the minimum component code to turn failing tests green, then use useState to complete its interactive behavior.

Learn to test React from the user’s perspective, use accessibility queries, and write a failing test as the first TDD step.

Create a React project with Vite, then configure Vitest and React Testing Library for test-driven development.

Learn why frontend testing matters, what TDD offers React projects, and which behaviors to cover with tests.

Explore View Transitions, stronger Server Actions security, useOptimistic, useEffectEvent, and Activity in Next.js 16 and React 19.

A step-by-step guide to upgrading a Next.js 15 project to version 16, covering codemods, asynchronous APIs, image security settings, and other required changes.

Explore Next.js 16 asynchronous runtime APIs, explicit caching with the use cache directive, cache revalidation, the Middleware-to-Proxy change, and stricter Parallel Routes.

A detailed look at Next.js 16, including Turbopack, filesystem caching, React Compiler, and the MCP server for AI development tools.

Analyze the React2Shell vulnerability from a computer science perspective (serialization and RCE), and review general mitigations that are not tied to a specific cloud provider.

Understand Zustand’s create function with TypeScript, optimize performance with selectors and shallow, and use advanced store methods such as get, set, and subscribe.

Learn why React applications need state management, compare Zustand with Context API, Redux, and Recoil, and build a simple counter store.

Abstract React Query into reusable custom hooks for pages and components, with practical JSONPlaceholder examples.

Set up i18next in React, Expo, and React Native, manage translation resources, use dynamic keys and variables, format values, and handle plural forms.

Set up a typed Axios client with interceptors and shared request and response types in Next.js, with patterns you can adapt to React, React Native, or Node.js.

Learn how to place AdSense ads exactly where you want them in a Next.js site, with examples of four ad formats, script setup, a reusable component, and testing guidance.

Use JSDoc syntax and tags to document functions, improve IDE assistance, and make JavaScript and TypeScript code easier to share and maintain.

Create API keys and retrieve EOA wallet balances across chains using Etherscan V2, React, and TypeScript.

A deep dive into Server-Side Rendering (SSR) for React developers. Learn why SSR is useful, how it works, and how React 18 streaming rendering uses renderToPipeableStream and Suspense.

Automatically resize and convert images to WebP on S3 upload with AWS Lambda. Set up buckets, IAM permissions, the Lambda function, and test the pipeline.

A detailed look at why and how I moved blog post pages from static rendering to ISR, the results, and how I resolved build errors.

Practical performance improvements in a Next.js blog, including removing duplicate fetches, simplifying Suspense, and formatting dates on the client.

Walk through an upgrade from Next.js 14 to 15, including dependencies, request APIs, codemods, and troubleshooting.

Customize Tailwind themes, reusable CSS sets, global styles, and fonts with configuration files and plugins.

Learn basic file-system routing, dynamic routes, and API route handlers with Next.js App Router.

Set up a Next.js project and configure Tailwind CSS, Shadcn/ui, and the typography plugin.

The technology stack and libraries used to build this blog, their roles, and why I chose them.

Compare custom API endpoints powered by Prisma with Supabase REST API for fetching data in Next.js, including setup examples and a performance comparison.

Upgrade Tailwind CSS 3 to 4 and review browser support, the new configuration structure, breaking changes, and before-and-after examples.

Learn the concepts behind Incremental Static Regeneration (ISR) in Next.js, how to implement it, and how to use its advanced features.

Compare Next.js data-fetching approaches and choose strategies for static content, authenticated dashboards, interactions, and frequently changing data.

Customize fetch headers and cookies, invalidate tagged caches, and build backend communication with Next.js route handlers.

Handle multiple requests with parallel, sequential, and conditional fetch patterns, and fetch data in client components using useEffect and SWR.

Understand fetch caching, no-store, revalidation, ISR, and cache-key generation in Next.js.

Understand data fetching in the Next.js App Router and server-component-centered data flow.

Display static HTML files inside Next.js App Router pages with public assets and iframes.

Learn how to manage global state with Context API in React (Native), with detailed explanations and examples for beginners.