// app/blog/[slug]/page.tsx — App Router page
interface Props {
  params: { slug: string }
}

// generateStaticParams → pre-render at build time (SSG)
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then((r) => r.json())
  return posts.map((p: { slug: string }) => ({ slug: p.slug }))
}

export default async function BlogPost({ params }: Props) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(
    (r) => r.json()
  )
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  )
}

// pages/blog/[slug].tsx — Pages Router page
import type { GetStaticProps, GetStaticPaths } from 'next'

interface Props {
  post: { title: string; body: string }
}

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await fetch('https://api.example.com/posts').then((r) => r.json())
  return {
    paths: posts.map((p: { slug: string }) => ({ params: { slug: p.slug } })),
    fallback: false,
  }
}

export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
  const post = await fetch(`https://api.example.com/posts/${params!.slug}`).then(
    (r) => r.json()
  )
  return { props: { post }, revalidate: 60 }
}

export default function BlogPost({ post }: Props) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  )
}

import Image from 'next/image'
import Link from 'next/link'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] }) // font loaded zero-layout-shift

export function Header() {
  return (
    <header className={inter.className}>
      <Link href="/">Home</Link>
      <Image
        src="/logo.png"
        alt="Company logo"
        width={120}
        height={40}
        priority // preload as LCP candidate
      />
    </header>
  )
}

// app/routes/contacts.$contactId.tsx — Remix route
import { json, redirect } from '@remix-run/node'
import { useLoaderData, Form } from '@remix-run/react'
import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
import { getContact, updateContact } from '~/data'

// loader runs on the server for GET requests
export async function loader({ params }: LoaderFunctionArgs) {
  const contact = await getContact(params.contactId)
  if (!contact) throw new Response('Not Found', { status: 404 })
  return json({ contact })
}

// action runs on the server for form submissions
export async function action({ params, request }: ActionFunctionArgs) {
  const formData = await request.formData()
  await updateContact(params.contactId, Object.fromEntries(formData))
  return redirect(`/contacts/${params.contactId}`)
}

export default function ContactDetail() {
  const { contact } = useLoaderData<typeof loader>()

  return (
    <Form method="post">
      <input name="name" defaultValue={contact.name} />
      <button type="submit">Save</button>
    </Form>
  )
}

// src/pages/blog/{markdownRemark.frontmatter__slug}.tsx
import { graphql, type PageProps } from 'gatsby'

export const query = graphql`
  query BlogPost($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`

export default function BlogPost({ data }: PageProps<Queries.BlogPostQuery>) {
  const post = data.markdownRemark!
  return (
    <main>
      <h1>{post.frontmatter?.title}</h1>
      <time>{post.frontmatter?.date}</time>
      <div dangerouslySetInnerHTML={{ __html: post.html! }} />
    </main>
  )
}

// app/(tabs)/profile.tsx — Expo Router screen
import { View, Text, StyleSheet } from 'react-native'
import { useLocalSearchParams } from 'expo-router'

export default function ProfileScreen() {
  const { userId } = useLocalSearchParams<{ userId: string }>()

  return (
    <View style={styles.container}>
      <Text style={styles.title}>User {userId}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  title: { fontSize: 24, fontWeight: 'bold' },
})