# App vs Web in Nextjs: The Router Decision That Saved My Weekend
Picked up nextjs on a Friday. By Sunday, I had something running in production. Here's my actual learning path.
Why This Matters (and Why I Care)
The app vs web in nextjs debate isn't theoretical—it's about how you structure your entire React application. At Beyin Digital, we migrated a client project from Pages Router to App Router last month. The difference in developer experience? Night and day. The App Router gives you server components by default, nested layouts that actually make sense, and streaming SSR without third-party libraries. If you're starting fresh in 2024, there's no reason to touch the Pages Router unless you're maintaining legacy code.
The Basics You Actually Need
// app/layout.tsx — App Router (the "app" side)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<Header />
{children}
<Footer />
</body>
</html>
)
}
// pages/index.tsx — Pages Router (the "web" side)
import type { NextPage } from 'next'
const Home: NextPage = () => {
return <div>Hello World</div>
}
How I Build With It (Step by Step)
I start every new project with `npx create-next-app@latest` and choose App Router. Here's my actual workflow:
1. **Folder structure**: `app/` for routes, `components/` for shared UI, `lib/` for utilities
2. **Server components by default**: I keep data fetching in server components—no more `useEffect` for API calls
3. **Client components only when needed**: Add `'use client'` at the top for interactive elements
// app/projects/page.tsx — Server component, zero client JS
async function getProjects() {
const res = await fetch('https://api.beyindigital.com/projects')
return res.json()
}
export default async function Projects() {
const projects = await getProjects()
return <ProjectList projects={projects} />
}
Mistakes I Made (So You Don't Have To)
1. **Mixing routers**: Tried migrating half the app—broke routing. Migrate all at once.
2. **Forgetting `'use client'`**: Spent an hour debugging why my `useState` wasn't working.
3. **Over-fetching**: With server components, I initially fetched the same data twice.
Advanced Tips From Production
My Honest Take
App Router isn't perfect—the caching can be confusing, and middleware has quirks. But for the app vs web in nextjs choice, go `app/` every time. You'll write less code, ship faster, and your users will thank you for the smaller JS bundles.
---
*Mohamed Qurashi | Full-Stack Developer at Beyin Digital | [https://qurashi.dev](https://qurashi.dev)*
---
**Further reading:**
**Related articles on this blog:**