Next.js and the App Router

Three ways to see it

1. 1

   Next.js is a full-stack React framework from Vercel. It does three things React alone cannot: it renders pages on the server, it gives you a file-based router, and it provides built-in solutions for data fetching, image optimisation, fonts, and edge functions. In 2026, Next.js with the App Router is the default choice for new Pakistani product startups because it ships HTML the moment a request lands, then hydrates React on the client. Visitors on Telenor 3G see content in under one second, not five.

2. 2

   Way one, file-based routing. In Next.js App Router, a folder is a route. app/page.tsx is the home page. app/vendors/page.tsx is the vendors list page at /vendors. app/vendors/[ntn]/page.tsx is the dynamic detail page at /vendors/0000123-4. The folder name is the URL segment. No router config file. You restructure the app by renaming folders. Pakistani teams find this far simpler than configuring react-router because the URL tree and the file tree match exactly.

3. 3

   Way two, server components and client components. In App Router, every component is a server component by default. Server components run on the server, can directly hit a database or an API, and ship zero JavaScript to the browser. They are perfect for data fetching and rendering. When you need interactivity (a click handler, useState), you mark a file with 'use client' at the top. That file and its children become client components. This split is the central mental model. Most of the FBR vendor portal is server-rendered; only a small search-input component is a client component.

The why-tree

Try this with Claude

AI-edge prompt to try with Claude: 'Scaffold a Next.js 15 App Router page that fetches a list of NTN-verified vendors from a server function, renders them in a Tailwind table, and supports server-side pagination via searchParams. Include a client component for the search box. Add ISR with a 1-hour revalidation. Add a not-found.tsx and a loading.tsx. TypeScript strict mode.' Read every file carefully, especially the data-fetching pattern.