ship.dev / dashboard

LIVE

75%done

Total runtime14:02:47

Lessons completed6/8

Current streak4 days 🔥

✓01 — Project Init & App Router

0:47

✓02 — Layouts & Nested Routes

1:12

✓03 — Server Components Deep Dive

2:08

✓04 — Streaming & Suspense

1:54

✓05 — Data Fetching Patterns

2:31

✓06 — Edge Middleware & Auth

2:19

+2 more modules...

app/blog/[slug]/page.tsxRSC refactor
- export default function Page() {
-   const [data, setData] = useState(null)
-   useEffect(() => fetchData(), [])
-   return <div>{data?.title}</div>
+ export default async function Page() {
+   const data = await db.post.findFirst()
+   return <div>{data.title}</div>
  }

47 lessons · 14 hours · real codebases

Stop reading
docs. Start
shipping Next_

Fourteen concentrated hours. Every lesson filmed inside a real codebase shipping real features — server components, streaming, edge middleware — not toy demos.

lessons

14h

runtime

toy demos

Mid-level React devsJunior startup devsFreelancers

Server ComponentsStreamingEdge MiddlewareISR CachingApp RouterParallel RoutesIntercepting RoutesServer ActionsVercel DeployObservabilityServer ComponentsStreamingEdge MiddlewareISR CachingApp RouterParallel RoutesIntercepting RoutesServer ActionsVercel DeployObservability

Curriculum

47 lessons.
Zero filler.

Each module ships a real, named feature. You know exactly what you'll be able to build when the lesson ends.

01Foundation5 lessons · 47 min

Project Init & App Router

From npx create-next-app to a working multi-route application in under 20 minutes. File-based routing, the app/ directory, and why pages/ is dead.

app/layout.tsx
// Root layout — runs on every route
export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

▶You ship: A multi-page Next.js app with shared layout

Lesson preview for Project Init & App Router — code editor showing Foundation implementation

47 min

02Server Components8 lessons · 2h 08min

RSC Data Patterns

Async components that fetch directly from your database. No useEffect, no loading spinners, no client bundle bloat. The mental model shift that changes everything.

app/posts/page.tsx
// No useState. No useEffect. No API route.
export default async function PostsPage() {
  const posts = await db.post.findMany({
    orderBy: { createdAt: "desc" },
    take: 10,
  })
  return <PostList posts={posts} />
}

▶You ship: A server-rendered data feed, zero client JS

Lesson preview for RSC Data Patterns — code editor showing Server Components implementation

2h 08min

03Streaming6 lessons · 1h 54min

Streaming & Suspense Boundaries

Ship the shell instantly, stream the data. Suspense boundaries that make slow DB queries invisible to users. Progressive hydration without the complexity.

app/dashboard/page.tsx
import { Suspense } from "react";
export default function Dashboard() {
  return (
    <Suspense fallback={<MetricsSkeleton />}>
      <SlowMetrics />
    </Suspense>
  )
}

▶You ship: A dashboard that loads shell in <100ms

Lesson preview for Streaming & Suspense Boundaries — code editor showing Streaming implementation

1h 54min

04Edge Middleware7 lessons · 2h 19min

Auth Middleware at the Edge

Protect routes before they render. JWT validation, geo-blocking, A/B testing — all running at the CDN edge with sub-millisecond latency worldwide.

middleware.ts
export function middleware(req: NextRequest) {
  const token = req.cookies.get("session")
  // if (!token) redirect to /login
  if (!token) {
    return NextResponse.redirect(
      new URL("/login", req.url)
    )
  }
}

▶You ship: Auth-protected routes running at the edge

Lesson preview for Auth Middleware at the Edge — code editor showing Edge Middleware implementation

2h 19min

What you'll ship

Real features.
Real codebases.

01–02

Multi-route app with shared layout

App Router, nested routes, parallel route groups

Server-rendered data feed, 0kb client JS

Async server components querying Postgres directly

Dashboard that shells in <100ms

Suspense streaming, skeleton states, progressive hydration

Auth-protected routes at the edge

JWT middleware, sub-millisecond validation worldwide

ISR-cached blog with on-demand revalidation

Incremental static regen, webhook-triggered cache busting

07–08

Full deploy pipeline with monitoring

Vercel, OpenTelemetry, error tracking, performance budgets

terminal — zsh

█

Free to start

You've seen enough
code to trust it.

Module 01 is free. No account required until you decide to continue. See exactly how the course is taught before you commit to anything.

2,847

developers enrolled

4.9/5

avg. rating

< 5min

to first lesson

Full curriculum

Every module.
Every lesson.

curriculum.json — 47 lessons · 14h 02m total
01Project Init & App Router
5 lessons47m
02Layouts, Templates & Route Groups
6 lessons1h 12m
03Server Components Deep Dive
8 lessons2h 08m
04Streaming & Suspense Boundaries
6 lessons1h 54m
05Data Fetching Patterns
7 lessons2h 31m
06Edge Middleware & Auth
7 lessons2h 19m
07ISR & Cache Strategies
5 lessons1h 43m
08Deploy, Monitor & Ship
3 lessons1h 24m

Download Full Curriculum

Get the complete 47-lesson breakdown as a PDF — module descriptions, lesson durations, and what you'll ship after each section.

No spam. One email with the PDF. Unsubscribe any time.

“I was the dev at my agency who kept saying 'we'll figure out App Router eventually.' Three days after finishing Ship, I migrated our biggest client to RSC. We shipped features in half the time.”

Marcus Kowalski

Frontend Lead @ Vertex Studio, Chicago

Stop readingdocs. Startshipping Next_

47 lessons.Zero filler.