Next.js Fundamentals

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.3.3",
    "react": "19.3.0",
    "react-dom": "19.3.0"
  }
}

:root {
  --background: #f6f8fa;
  --surface: #ffffff;
  --text: #17212b;
  --border: #d8e0e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: Arial, sans-serif;
}

main {
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0;

import type { Metadata } from "next";
import Link from "next/link";
import "./globals.css";

export const metadata: Metadata = {
  title: "TaskFlow",
  description: "Project and task management for focused teams",
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>
        <header>
          <Link href="/">TaskFlow</Link>
          <nav aria-label="Primary navigation">
            <Link href="/projects">Projects</Link>
            <Link href="/settings">Settings</Link>
          </nav>
        </header>

export default function HomePage() {
  return (
    <section>
      <p>TaskFlow</p>
      <h1>Keep work visible and moving.</h1>
      <p>Projects, tasks, ownership, and progress will grow here throughout the course.</p>
    </section>
  );
}

const projects = [
  { id: 1, name: "Website refresh", status: "Active" },
  { id: 2, name: "Inventory rollout", status: "Planning" },
];

export default function ProjectsPage() {
  return (
    <section>
      <h1>Projects</h1>
      {projects.map((project) => (
        <article key={project.id}>
          <h2>{project.name}</h2>
          <p>{project.status}</p>
        </article>
      ))}
    </section>
  );
}

"use client";

import { useState } from "react";

export function DensityToggle() {
  const [compact, setCompact] = useState(false);
  return (
    <button onClick={() => setCompact((value) => !value)}>
      Density: {compact ? "Compact" : "Comfortable"}
    </button>
  );
}

import { DensityToggle } from "./density-toggle";

export default function SettingsPage() {
  return (
    <section>
      <h1>Settings</h1>
      <DensityToggle />
    </section>
  );
}