Initializing Systems...
System 1 · Next.js
Enter the Next.js dimension. Master file-based routing, Server Components, data fetching, and the App Router — your new command bridge.
Next.js vs. React — The Upgrade
Next.js is React plus a production-grade framework: routing, rendering strategies, image optimization, and API routes — all wired in.
File-Based Routing
The file system is the router. Every page.tsx in app/ becomes a URL. Learn folder conventions, route groups, and parallel routes.
Layouts & Loading States
Build nested layouts, loading.tsx skeletons, and error.tsx boundaries — the three pillars of robust Next.js page architecture.
App Router Debrief
Routing fundamentals locked in. Next: Server Intelligence.
Server vs. Client Components
The most important Next.js mental model: Server Components run only on the server (no bundle cost, direct DB access); Client Components run in the browser (interactivity, hooks).
Data Fetching in Server Components
Fetch data directly in Server Components using async/await — no useEffect, no loading state, no API round trip from the client.
Server Actions — Direct Commands
Server Actions let you call server-side code directly from client components — the end of hand-written form API routes.
Server Intelligence Debrief
Server Component fundamentals secured. Next: rendering strategies.
Static Generation — Light Speed
Static pages are pre-built at deploy time and served from a CDN — the fastest possible delivery. Learn when static works and how generateStaticParams unlocks dynamic static routes.
Dynamic Rendering & Revalidation
Force server-rendering with force-dynamic, or use ISR with revalidate to regenerate stale pages without a full redeploy.
Streaming & Suspense Strike
Stream slow data with Suspense boundaries. Show instant page shells while expensive data loads in the background — progressive enhancement at the framework level.
Rendering Hyperlanes Debrief
Rendering strategies mastered. Next: Image & Metadata Ops.
next/image — Visual Optimization
next/image automatically optimizes, resizes, converts to WebP, and lazy-loads images — never serve a 4MB PNG for a 200px thumbnail again.
Metadata API — Mission Dossiers
Generate SEO-optimized metadata including Open Graph, Twitter cards, and structured data using Next.js Metadata API.
SEO & Performance Strike
Score 100 on Lighthouse: implement robots.txt, sitemap.xml via Next.js file conventions, and measure Core Web Vitals.
Sirius Gateway — Final Debrief
System 1 complete. You're ready for Rigel Platform — intermediate Next.js.
Create a statically generated blog with MDX posts, dynamic routing, metadata API, and image optimization.