Code Comparison

Each section below is one everyday task. The tabs show how each framework does it, written against the starter projects this site tracks on Dev Time. Every titled block is a complete file, so the task is done by writing exactly the files shown into a fresh starter. Your framework choice is remembered across examples and on your next visit.

Methodology: Code Comparison.

Create a Route

Add a static page at /about that renders an About heading, and a dynamic page at /posts/1 that reads the id from the URL and renders it.

AstroNext.jsNuxtReact RouterSolidStartSvelteKitTanStack Start

The starter builds static output, so a dynamic route has to enumerate the pages to build. Adding export const prerender = false switches the route to per-request rendering instead, which then needs an adapter to build and deploy.

src/pages/about.astro

<h1>About</h1>

src/pages/posts/[id].astro

---
export function getStaticPaths() {
  return [{ params: { id: '1' } }]
}

const { id } = Astro.params
---

<p>Post {id}</p>

Astro documentation

app/about/page.tsx

export default function AboutPage() {
  return <h1>About</h1>
}

app/posts/[id]/page.tsx

interface Props {
  params: Promise<{ id: string }>
}

export default async function PostPage({ params }: Props) {
  const { id } = await params

  return <p>Post {id}</p>
}

Next.js documentation

The starter has no pages/ directory and renders app.vue directly. Adding one turns the router on, so app.vue has to hand over to <NuxtPage /> and / needs its own app/pages/index.vue from then on.

app/app.vue

<template>
  <NuxtPage />
</template>

app/pages/about.vue

<template>
  <h1>About</h1>
</template>

app/pages/posts/[id].vue

<script setup lang="ts">
const route = useRoute()
</script>

<template>
  <p>Post {{ route.params.id }}</p>
</template>

Nuxt documentation

Routes are registered in app/routes.ts rather than inferred from file names. The ./+types/* modules are generated by react-router typegen, which the dev server runs on boot.

app/routes.ts

import { type RouteConfig, index, route } from '@react-router/dev/routes'

export default [
  index('routes/home.tsx'),
  route('about', 'routes/about.tsx'),
  route('posts/:id', 'routes/post.tsx'),
] satisfies RouteConfig

app/routes/about.tsx

export default function About() {
  return <h1>About</h1>
}

app/routes/post.tsx

import type { Route } from './+types/post'

export default function Post({ params }: Route.ComponentProps) {
  return <p>Post {params.id}</p>
}

React Router documentation

src/routes/about.tsx

export default function About() {
  return <h1>About</h1>
}

src/routes/posts/[id].tsx

import { useParams } from '@solidjs/router'

export default function Post() {
  const params = useParams()

  return <p>Post {params.id}</p>
}

SolidStart documentation

src/routes/about/+page.svelte

<h1>About</h1>

src/routes/posts/[id]/+page.svelte

<script lang="ts">
  import type { PageProps } from './$types'

  let { params }: PageProps = $props()
</script>

<p>Post {params.id}</p>

SvelteKit documentation

The exported route object has to be named Route. The dev server regenerates src/routeTree.gen.ts from the files in src/routes.

src/routes/about.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/about')({ component: About })

function About() {
  return <h1>About</h1>
}

src/routes/posts.$id.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$id')({ component: Post })

function Post() {
  const { id } = Route.useParams()

  return <p>Post {id}</p>
}

TanStack Start documentation