Latest note
Why Is My Next.js App Router Data Still Stale? Find the Cache Layer
Identify whether stale data comes from a cached fetch, rendered output, or a CDN response before choosing how to refresh it.
The Next.js notebook
Next.js Notes: Exploring the Framework
Next.js Notes is a blog focused on Next.js. Read notes about the framework and use them as a starting point for exploring Next.js development.
More notes
Does Next.js Cache Images? Fix a Stale `next/image`
Find the image response your browser displays, check whether its source is current, then choose a freshness strategy for the cache that serves it.
Fetch API Data in a Next.js Client Component with TanStack Query
Use TanStack Query to request posts from an existing API endpoint and render pending, error, empty, and populated states.
Add an MDX Page to an Existing Nextra Documentation Starter
Add an MDX file to a Nextra starter’s pages directory, register its filename in the starter’s navigation metadata, and check both the URL and rendered navigation.
Test and improve application performance
Set Up Vitest in a Next.js Pages Router App—and Know Its Testing Boundary
Add a Vitest component test for a Pages Router page, then distinguish its heading assertion from a route-level check.
Choose an application architecture
Next.js App Router vs Pages Router: Whether—and How—to Migrate
Keep stable Pages Router routes, and move routes selectively when App Router layouts, Server Components, or data fetching solve a real problem.
Test and improve application performance
Next.js vs React Performance: How to Run a Fair App Comparison
Compare matched apps and explicit rendering modes, then report response, paint, and interaction measurements under repeatable conditions.
Build and Call an API Endpoint with Next.js App Router Route Handlers
Create a GET and POST endpoint at /api/todos, call it with fetch, and check its JSON responses and status codes.
Secure and maintain an application
How to Check Whether Your Next.js Version Is Vulnerable—and Fix It
Check the version your project resolves, compare it with the advisory for the specific issue, and verify the fix after deployment.
Choose an application architecture
Next.js vs Vite: Choose a Framework or Build Your Own React Stack
Choose Next.js for integrated routing and rendering options, or build a Vite-based React stack when a client-heavy app and control over its tools matter more.
