Building Your App

Fetching Data

Load data on the server with getServerSideProps.

Export an async getServerSideProps from a page to fetch data on the server before render. The returned props are passed to your component.

tsx

export default function Post({ post }) {
  return <article><h1>{post.title}</h1></article>;
}

export async function getServerSideProps(ctx) {
  const post = await db.posts.find(ctx.params.id);
  return { props: { post } };
}

Redirects

Return a redirect instead of props to send the visitor elsewhere.

tsx

return { redirect: { destination: '/login', permanent: false } };

Never fetch data inside the component body — it runs during SSR and inflates time-to-first-byte. Use getServerSideProps.