Code Quiz

Data Fetching in the App Router

Spot why this App Router page never receives its data.

Codejavascript

// app/blog/page.js (App Router)

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

export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  )
}

What is the bug that prevents this App Router page from rendering the posts?

Next →App Router Rendering Defaults