FS26
Ctrl K
Phase 03 · Lesson 01

Create the TaskFlow Next.js App

≈ 3 min core reading · 645 source/companion words
Learning contract

What you should be able to do after this

  • Explain Create the TaskFlow Next.js App without relying on framework buzzwords.
  • Connect the lesson to the phase outcome: Build the Next.js application shell while understanding App Router routing, layouts, Server Components, Client Components, environment boundaries, and rendering behavior.
  • Reproduce the relevant behavior and verify it with evidence.
  • Diagnose at least one representative failure instead of guessing.
Figure 3.1 — TaskFlow boundary map
Route request
App Router match
layout/page Server Component
optional server fetch
Client Component island
browser interaction
This lesson belongs to Phase 03. Keep the full request/data path visible even when today's code changes only one box.
Instructor workflow: predict first → implement the smallest slice → run it → inspect evidence → break one assumption → diagnose → explain it back. Do not copy the whole code block before understanding the first failing boundary.

Phase 03

Create the TaskFlow Next.js App Scaffold apps/web into the existing pnpm monorepo with deliberate settings, then verify the first browser-rendered application.

Book 1 - Hands-on scaffold

Course baseline: September 17, 2026 - Windows-first - Project-driven - Production-oriented

Create the TaskFlow Next.js Application We now create apps/web inside the repository from Phase 02. This is our first framework installation, so we move carefully and verify where every generated file belongs.

Before the command From the TaskFlow repository root, verify all three things before scaffolding:

Terminal
Get-Location
node --version
pnpm --version

Expected course baseline: repository path ends in taskflow, Node is 24.21.0, and pnpm is 12.4.2.

Why we do not run create-next-app from a random folder The pnpm workspace root already declares apps/* as workspace packages. Creating apps/web from the repository root lets the generated package naturally join the same lockfile and workspace graph. Creating it elsewhere and copying it later can leave extra lockfiles or Git metadata behind.

Scaffold with explicit choices From taskflow\, run the create-next-app command using the locked Next.js patch rather than @latest:

Terminal
pnpm create next-app@16.3.3 apps/web

Choose the course settings when prompted:

Prompt Course choice Reason

TypeScript? Yes Primary language

Linter? ESLint Conventional, explicit linting

React Compiler? No initially Avoid adding a new optimization concept before core rendering is clear

Tailwind CSS? No CSS Modules first so styling mechanics remain visible

Use src/ directory? Yes Separates source code from configuration files

App Router? Yes Modern Next.js routing model

Customize import alias? No Keep @/* default

Why not --yes? The current default generator enables Tailwind and other recommended defaults. For this course we intentionally customize the scaffold so the first frontend phase teaches CSS Modules and App Router explicitly.

Nested Git check create-next-app may initialize Git depending on context. Because TaskFlow already has one root repository, verify there is no second .git directory under apps/web.

Terminal
Get-ChildItem .■pps\web -Force
Get-ChildItem .■pps\web\.git -Force -ErrorAction SilentlyContinue

If a nested .git folder exists, remove only that nested metadata after verifying you are inside taskflow/apps/web. The root taskflow/.git must remain untouched.

Inspect the generated package

Terminal
Get-Content .■pps\web\package.json
Get-Content .■pps\web■sconfig.json
Get-ChildItem .■pps\web\src■pp

Notice that apps/web has its own package.json. That is the package boundary Phase 02 prepared us to understand.

Expected scripts "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint" }

Current Next.js uses Turbopack by default for next dev. The script does not need to mention Turbopack for the default behavior.

Run only the web package From the repository root:

Terminal
pnpm --filter web dev

If the generated package name is not web, inspect apps/web/package.json and filter by the actual package name. You can also run the script from inside apps/web with pnpm dev.

Verify in the browser Open http://localhost:3000. Keep the terminal visible. Change src/app/page.tsx, save, and observe Fast Refresh update the browser. The point is not the starter design; the checkpoint is that repository -> workspace -> package -> dev server -> browser is now a working chain.

What the first dev command actually connects

taskflow root workspace apps/web package script next dev

HTTP

localhost:3000

Figure 1 - The browser is the last step in a chain rooted in the monorepo workspace

Clean the starter intentionally Do not delete everything blindly. Read the generated page, layout, global stylesheet and metadata first. Then replace starter content with a minimal TaskFlow title and description while preserving a valid root layout.

Checkpoint • apps/web exists and is tracked by the root Git repository. • No second lockfile exists inside apps/web.

Volume 02 - Frontend + Backend Foundations

• No nested .git directory remains. • pnpm --filter web dev starts the frontend. • localhost:3000 renders and refreshes after a source edit.

Volume 02 - Frontend + Backend Foundations

Executable lesson studio · next

Now turn the explanation into engineering skill.

Next.js is useful only when you can explain what runs on the server, what crosses into the browser, and which route owns a user-visible state.

By the end, you should be able to

  • Explain Create the TaskFlow Next.js App in terms of concrete inputs, ownership, outputs, and evidence.
  • Implement or reproduce the smallest TaskFlow slice that demonstrates this next concept.
  • Diagnose one representative next failure using observable evidence instead of trial-and-error.
Figure 3.1B — Mental model
route
Server Component
client boundary
request/data source
rendered UI
Read left-to-right while implementing. When debugging, walk right-to-left until the first observed fact differs from your prediction.
Code-along sequence

One coherent change at a time

  1. 01

    Restate the goal of “Create the TaskFlow Next.js App” as one observable behavior. Write the success signal before touching code.

  2. 02

    Trace the boundary map: route → Server Component → client boundary → request/data source → rendered UI. Mark the one boundary this lesson changes.

  3. 03

    Inspect the current repository state and record the exact files, route, table, or runtime involved. Avoid creating an abstraction before you can name the existing owner.

  4. 04

    Implement the smallest vertical slice. Add one coherent change, run the narrowest verification command, and read the output before continuing.

  5. 05

    Connect the slice to TaskFlow’s phase artifact: A navigable TaskFlow web shell with route groups/layouts, server-first composition, selective client interactivity, and verified environment handling.. Verify behavior from the outside as a user or API client would.

  6. 06

    Create one controlled failure that is safe to reproduce. Predict the symptom first, capture evidence, locate the earliest broken boundary, then fix only that cause.

  7. 07

    Close the reference and rebuild or explain the core change from memory. Record what you would monitor or test before trusting the same change in production.

tsxSmall server/client boundary
// app/tasks/page.tsx
import { TaskList } from "./task-list";

export default async function TasksPage() {
  const tasks = await loadTasks();
  return <TaskList initialTasks={tasks} />;
}

Do not copy this as a finished answer. Predict what each boundary does, type the smallest useful slice, run it, then compare the result with your prediction.

Verification

Prove the happy path

  1. Run the narrowest relevant command or request and require a clean exit/status.
  2. Inspect the boundary-specific evidence: terminal output, Network panel, database row/query plan, test report, container health, or deployment logs.
  3. Repeat the behavior once after the change so a one-off cached or stale result cannot masquerade as success.
Break it on purpose

Build debugging memory

  1. Adding 'use client' too high in the tree
  2. Change one assumption in the next example—identity, input, configuration, ordering, connectivity, or state—and predict the exact symptom before running it.
SymptomInvestigation path
Server/client mismatch

Locate the first browser-only API or stateful hook and move the client boundary to the smallest component that needs it.

Route renders unexpected data

Verify route params, fetch location, cache behavior, and the exact server response before changing JSX.

Closed-reference challenge

Can you transfer the idea?

Without copying the final source, create a second small scenario that applies “Create the TaskFlow Next.js App” to a different TaskFlow resource or input. Write the acceptance criteria first, implement it, and provide the evidence that each criterion is satisfied.

Explain-back

Answer these without reopening the solution

  1. What problem does Create the TaskFlow Next.js App solve in TaskFlow, and what would be observably wrong without it?
  2. Which part of the next boundary owns the decision, and which neighboring layer must not own it?
  3. What evidence proves the happy path instead of merely suggesting it worked?
  4. Name one realistic failure or abuse case and the first place you would inspect.
  5. If requirements doubled tomorrow, which part of this design should stay stable and which part is allowed to change?
Lesson studio

Turn the reading into skill

01

Do it

Generate the web app in the monorepo and verify the development server from the correct workspace.

Use the smallest change that demonstrates this lesson. Stop after it works and capture evidence.
02

Break it safely

Adding 'use client' too high in the tree

Predict the symptom before causing the failure. Then locate the earliest boundary where reality diverges from expectation.
03

Explain it back

Why does this responsibility live here, what input does it trust, what output proves success, and what would go wrong if another layer owned it?

If your explanation is vague, repeat the boundary trace before moving on.
Exit ticket

Before marking complete

Close the reference. Reproduce the core idea from memory or explain the exact request/data flow aloud. Then check your diff or notes for accidental shortcuts that bypass validation, authorization, error handling, or verification earned in earlier phases.

App Router Mental Model →