# App vs Web in Next.js: Why I Finally Switched After 5 Years
A client in Abu Dhabi asked me last week why their Next.js app was loading slowly on mobile. I assumed it was their API, but digging deeper revealed the real issue: they were using the wrong router for their use case. That pushed me to understand the app vs web in nextjs debate at a production level.
Why This Matters (and Why I Care)
Honestly, most tutorials oversimplify this. They say "App Router is the future, use it." That's lazy advice. At Beyin Digital, we've shipped both patterns to production, and the choice isn't about "new vs old" — it's about what your app actually needs. The app directory gives you React Server Components and nested layouts, but the pages directory is still simpler for small projects. I've seen teams waste weeks migrating to App Router when Pages Router would've been fine.
The Basics You Actually Need
Here's the real difference:
// Pages Router (simple, predictable)
export default function Dashboard() {
return <div>Hello</div>
}
// App Router (powerful, but complex)
export default async function Dashboard() {
const data = await fetchData() // Runs on server
return <div>{data.name}</div>
}
The app directory forces server components by default. This is great for SEO and initial load, but it changes how you think about state management.
How I Build With It (Step by Step)
For our e-commerce client, we use both routers:
// /app/products/[id]/page.tsx — App Router for product pages
export default async function ProductPage({ params }: { params: { id: string } }) {
const product = await getProduct(params.id) // Server-side fetch
return <ProductDetails product={product} />
}
// /pages/checkout.tsx — Pages Router for checkout flow
export default function Checkout() {
const [cart, setCart] = useState([]) // Client state needed
// ... checkout logic
}
Rule I follow: static content → App Router. Heavy client interactions → Pages Router.
Mistakes I Made
1. **Forcing everything into App Router**: Our admin dashboard needed tons of client state. Pages Router was simpler.
2. **Ignoring `use client` implications**: Every "use client" component breaks the server component chain.
3. **Not testing on slow networks**: App Router's streaming is great, but Pages Router's `getStaticProps` is faster for static content.
Advanced Tips From Production
My Honest Take
App Router is better for most new projects, but don't migrate existing Pages Router apps unless you have a clear performance problem. The hype around app vs web in nextjs ignores that both work fine in production. Choose based on your data flow, not trends.
---
*Mohamed Qurashi | Full-Stack Developer at Beyin Digital | [https://qurashi.dev](https://qurashi.dev)*
---
**Further reading:**
**Related articles on this blog:**