Next.js is a powerful React framework that’s evolved significantly over time — so much so, that even seasoned devs can get tripped up by its newer features. If you’ve found yourself wondering, “Wait, do I use getStaticProps, or just fetch directly in a Server Component now?” you’re not alone.
Let’s break it down Cody-style: quick, clear, and no fluff. Here are three of the most common Next.js questions, answered with zero judgment and maximum clarity.
1. What’s the difference between pages/ and app/ directories in Next.js?
| Feature | pages/ Directory (Classic) | app/ Directory (New – App Router) |
|---|---|---|
| Routing | File-based routing (auto-generated) | Still file-based, but now with nested layouts |
| Rendering | getStaticProps, getServerSideProps | React Server Components (RSC) |
| Components | Client-side by default | Server-side by default ("use client" opt-in) |
| Layouts | Manual and repetitive | Built-in layout composition |
| Status | Solid and familiar | Stable since Next.js 14 — now recommended |
TL;DR: If you’re starting fresh, use the app/ directory. It’s the future-proof route, complete with streaming, layouts, and all the React Server Component magic.
2. How do I fetch data — and do I still need getStaticProps?
Good question! Next.js offers a few flavors of data fetching depending on which router you’re using.
a. getStaticProps – for Static Site Generation (SSG)
Best for pages that don’t change often, like blog posts or marketing pages.
export async function getStaticProps() {
const posts = await fetchPosts();
return { props: { posts } };
}
b. getServerSideProps – for Server-Side Rendering (SSR)
Runs on every request. Use this for dashboards or user-specific data.
export async function getServerSideProps() {
const data = await fetchLiveData();
return { props: { data } };
}
c. Server Components – if you’re using the app/ directory
No need for getStaticProps at all. Just fetch directly inside your async component.
// app/products/page.tsx
async function ProductsPage() {
const products = await getProducts(); // runs on the server
return <ProductList items={products} />;
}
export default ProductsPage;
Bonus: Cleaner code, fewer files, and no extra boilerplate.
3. How do I navigate between pages in Next.js?
Short answer: <Link> is your friend, but the exact syntax depends on your router.
In the pages/ directory:
You might still need useRouter for programmatic navigation.
import { useRouter } from 'next/router';
const GoHome = () => {
const router = useRouter();
return <button onClick={() => router.push('/')}>Home</button>;
};
Or just use:
import Link from 'next/link'; <Link href="/about">About Us</Link>
In the app/ directory:
Keep it simple. <Link> still works, but useRouter is less common.
<Link href="/about">About Us</Link>
Client-side navigation is fast, smooth, and automatically prefetches routes.
Wrapping Up
Next.js has come a long way from its humble beginnings, and keeping up with the changes doesn’t have to feel like learning a new dialect every six months. Whether you’re still cruising in the pages/ lane or already diving into the app/ router’s bells and whistles, the important thing is understanding the “why” behind each choice.
You don’t need to memorize every new feature — just know which tool fits the job.