App Router vs Pages Router

Next.js 14 introduziu o App Router como uma alternativa moderna ao Pages Router. Vamos comparar ambos.

Pages Router (Tradicional)

// pages/posts/index.js
export default function Posts({ posts }) {
    return (
        <div>
            {posts.map(post => (
                <div key={post.id}>{post.title}</div>
            ))}
        </div>
    );
}

export async function getServerSideProps() {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();
    return { props: { posts } };
}

App Router (Novo)

// app/posts/page.js
async function getPosts() {
    const res = await fetch('https://api.example.com/posts');
    return res.json();
}

export default async function Posts() {
    const posts = await getPosts();
    
    return (
        <div>
            {posts.map(post => (
                <div key={post.id}>{post.title}</div>
            ))}
        </div>
    );
}

Rotas Dinâmicas

// app/posts/[slug]/page.js
export default async function Post({ params }) {
    const post = await getPost(params.slug);
    return <article>{post.content}</article>;
}