Episode 2 — React Frontend Architecture NextJS / 2.18 — Getting Started with NextJS

2.18 — Quick Revision: Getting Started with Next.js

<< 2.18 Overview

2.18.a — Why Next.js is widely used

  • Productivity: Routing, rendering modes, server primitives, and host integration reduce bespoke glue.
  • Defaults: SEO-friendly server rendering paths; image/font helpers (when adopted).
  • Ecosystem: Large community, hiring pool, third-party examples—but still evaluate fit.

2.18.b — Next vs React (framework vs library)

  • React: UI composition library; you orchestrate data loading, routing, and build tooling—or add your own.
  • Next: Application framework with inversion of control—it calls your page, layout, and route modules.
  • Rule of thumb: React skills transfer; Next skills add conventions and server awareness.

2.18.c — Setting up a project

  • Bootstrap: npx create-next-app@latest with TypeScript + ESLint (+ Tailwind if desired).
  • Env: .env.local for secrets; NEXT_PUBLIC_* only for browser-safe config.
  • Quality gates: lint, typecheck (tsc --noEmit), CI running build.

2.18.d — File-based routing (App Router)

  • app/.../page.tsx: public route segment; mirrors folder path.
  • Groups: (name) omitted from URL.
  • Dynamics: [param], [...many], [[...optional]].
  • Handlers: route.ts for HTTP; middleware.ts runs before route rendering.
  • Special files: loading.tsx, error.tsx, not-found.tsx (per segment) shape UX boundaries.

2.18.e — Layouts

  • layout.tsx: persistent shell; ideal for nav chrome.
  • template.tsx: remounting wrapper for animation/reset patterns.
  • Root layout: must include <html> and <body>.
  • Metadata: export const metadata or async generateMetadata for SEO/social tags.

Ultra cheat sheet

NeedFile / API
Page UIpage.tsx
Shared chromelayout.tsx
Reset on navtemplate.tsx
HTTP endpointroute.ts
Early redirect/authmiddleware.ts
404 boundarynotFound() + not-found.tsx

Self-check: spoken answers

#PromptAnswer you should produce
1Why Next over DIY React?File routing + server rendering primitives + integrated build/deploy story → faster shipping for common web apps.
2Is Next a React replacement?No—Next is the app framework; React remains the UI layer.
3Framework vs library in one line?Libraries are called by your code; frameworks call your modules on their lifecycle (IoC).
4Where does /pricing live?app/pricing/page.tsx (or inside a route group without changing the path).
5Env rule?Secrets never use NEXT_PUBLIC_; browser-exposed config only.
6Layout vs template?Layout persists; template remounts across navigations within its scope.
7Middleware role?Request edge: redirects, auth gating, headers—keep it fast.
8When is plain SPA tooling better?Embeds, no-SEO static microsites, or hard constraints incompatible with Next server model—case-by-case.

<< 2.18 Overview