TanStack Router vs Next.js

import { createRouter, createRoute, createRootRoute } from '@tanstack/react-router';

const rootRoute = createRootRoute();
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <h1>Home</h1>,
});

const router = createRouter({ routeTree: rootRoute.addChildren([indexRoute]) });

// app/page.tsx (Next.js App Router)
export default async function HomePage() {
  const data = await fetch('https://api.example.com/posts').then(r => r.json());
  
  return (
    <main>
      <h1>Posts</h1>
      {data.map(post => <article key={post.id}>{post.title}</article>)}
    </main>
  );
}