Full-Stack TypeScript with Next.js Roadmap

Build and ship typed full-stack apps with TypeScript, React, Next.js and well-designed APIs.

10 milestones · ~167 hours total

1. 1

   Modern JavaScript and TypeScript basics

   ~25h

   ES modules, async patterns, types, interfaces, generics, narrowing and strict mode.

   Practice this →
2. 2

   React with TypeScript

   ~25h

   Typed props and hooks, state management, forms and component composition.

   Practice this →
3. 3

   Next.js App Router

   ~20h

   File-based routing, layouts, server and client components, loading and error states.

   Practice this →
4. 4

   Data fetching and rendering strategies

   ~14h

   Static, dynamic and streamed rendering, caching, Server Actions and when to use each.

   Practice this →
5. 5

   Designing REST APIs

   ~15h

   Route handlers, status codes, pagination, validation with Zod and consistent error responses.

   Practice this →
6. 6

   Databases with Prisma or Drizzle

   ~18h

   Schema design, migrations, relations, transactions and avoiding N+1 queries on PostgreSQL.

   Practice this →
7. 7

   Authentication and authorization

   ~14h

   Sessions vs JWT, Auth.js, password hashing, role checks and protecting routes and actions.

   Practice this →
8. 8

   Testing a TypeScript app

   ~14h

   Unit tests with Vitest, component tests with Testing Library and end-to-end tests with Playwright.

   Practice this →
9. 9

   Performance and accessibility

   ~10h

   Image and font optimisation, bundle size, Core Web Vitals, keyboard navigation and ARIA basics.

   Practice this →
10. 10

    Deploy and operate

    ~12h

    Environment variables, CI checks, deployment on Vercel or a VPS with Docker, and basic logging and error tracking.

    Practice this →