Introduction to Next.js (server-side React)

// Run in your local React project (npm install required)
// npx create-next-app@latest my-app
// cd my-app && npm run dev

// app/page.js
export default function HomePage() {
  return <h1>Welcome to my Next.js app</h1>;
}

// Run in your local React project (npm install required)
// File structure -> resulting routes:
// app/page.js          -> /
// app/about/page.js    -> /about
// app/blog/[slug]/page.js -> /blog/:slug (dynamic)

// app/about/page.js
export default function AboutPage() {
  return <p>About us</p>;
}

// Run in your local React project (npm install required)
// app/page.js -- runs on the server, can directly await data
async function getData() {
  return { title: 'Server-rendered title' };
}
export default async function Page() {
  const data = await getData();
  return <h1>{data.title}</h1>;
}

1. Treating Next.js as just 'React with extra CSS' — it fundamentally changes rendering (server-side by default) and routing (file-based) compared to a plain client-side React app.
2. Putting client-only code (like directly accessing window) in a Server Component without a 'use client' directive.
3. Not understanding file-based routing — a file's location under the app/ or pages/ folder directly determines its URL.

• Next.js is a popular React framework adding server-side rendering, file-based routing, and more, on top of React.
• The App Router organizes pages by folder structure under an 'app/' directory; each folder can have a page.js file.
• Server Components are the default in the App Router; add 'use client' for interactive pieces.
• Next.js handles much of the build/deployment tooling (bundling, routing, SSR) that a plain React app would need configured separately.

Requires npm install next react react-dom (typically via create-next-app) — not available via CDN in this sandbox.