37  37. Web Frameworks and Meta-Frameworks

You could build any website by writing HTML, CSS and JavaScript files by hand, like the three-file site in HTML, CSS, JavaScript, and Browser Developer Tools. Real apps have dozens of screens and constantly changing data, so developers - and AI coding tools - build them with frameworks. This page explains the main kinds, decodes the files you will find in a JavaScript project (package.json, node_modules…), and helps you choose.

37.1 What a framework is

A framework is a ready-made foundation, plus a set of conventions, for building a certain kind of app. You fill in the parts specific to your app; the framework handles the repetitive plumbing (moving between pages, updating the screen when data changes, talking to the server). It is like building a house from a well-tested kit instead of cutting every board yourself.

Frameworks give you less code to write, a standard project layout that other developers recognize, and built-in solutions to common problems. Whatever framework you use, the browser still receives HTML, CSS and JavaScript in the end: the framework’s tools generate them for you.

37.2 Front-end frameworks

These run in the browser and build the user interface:

• React (created at Meta): builds pages out of reusable components; the most widely used of the four.
• Vue: known for being approachable and quick to learn.
• Angular (from Google): a complete, opinionated framework, common in large companies.
• Svelte: compiles your components into small, efficient plain JavaScript.

A component is a reusable piece of interface - a button, an event card, a navigation bar. Here is a tiny React component:

function EventCard({ title, date }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{date}</p>
    </div>
  );
}

You write it once and use it for every event: <EventCard title="Resume workshop" date="Oct 20" />. It looks like HTML, but it is JavaScript (a syntax called JSX); a build tool converts it into plain JavaScript before it reaches the browser.

37.3 Meta-frameworks: full stack in one project

A meta-framework builds on a front-end framework (or, in Astro’s case, works with several) and adds the server side: page routing based on your folders, rendering pages on the server, API endpoints, and tools to build and deploy - front end and back end in one project.

Meta-framework	Built on	Notes
Next.js	React	Made by Vercel; the one used in this book’s tutorial
Nuxt	Vue
SvelteKit	Svelte
Astro	(any)	For content-driven sites such as blogs, docs and marketing pages; sends no JavaScript by default, and can use React, Vue or Svelte components

React’s own documentation recommends starting a new React app with a framework such as Next.js or React Router rather than plain React.

37.4 Where is the page built? CSR, SSR, SSG

The main thing that distinguishes these approaches is where and when the HTML for a page gets made:

Approach	HTML is made…	Analogy	Good for
CSR - client-side rendering	in the browser, by JavaScript, after the page loads	flat-pack furniture you assemble at home	app-like screens behind a login, such as dashboards
SSR - server-side rendering	on the server, for every request	a dish cooked when you order it	pages that differ per user or change constantly, and must load fast
SSG - static site generation	once, ahead of time, when the site is built	brochures printed in advance	blogs, documentation, marketing pages

Meta-frameworks let you mix them page by page: SSG for the “About” page, SSR for search results, CSR for an interactive dashboard. You can see the difference with View Source: with CSR it shows an almost empty page, with SSR or SSG it shows the full content. Search engines and link previews work most reliably when the content is already in the HTML (SSR or SSG).

Deeper dive: Hydration

With SSR, the browser first receives finished HTML, so the page appears quickly. But the buttons don’t work until the page’s JavaScript has loaded and attached itself to that HTML. This “waking up” step is called hydration. If you click a button in the first moment and nothing happens, hydration may not have finished yet.

37.5 Node.js, npm, and packages

• Node.js is a program that runs JavaScript outside the browser. It is used for back-end code, and for the developer tools that build front-end projects - so you need it even for a “front-end” React project. (Deno and Bun are newer alternatives.) Installation is covered in Install Node.js and npm.
• A package is reusable code that someone published, like pandas in Python or ggplot2 in R. npm (Node Package Manager) is the command-line tool, installed with Node.js, that downloads packages from the online npm registry.

A JavaScript project folder usually looks like this:

my-app/
├── package.json        <- the project's "shopping list" and commands (commit it)
├── package-lock.json   <- the exact versions that were installed (commit it)
├── node_modules/       <- the downloaded packages themselves (never commit it)
└── app/ or src/        <- your own code

The main part of a new Next.js project’s package.json (your version numbers will differ):

{
  "name": "club-events",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.3.8",
    "react": "19.2.8",
    "react-dom": "19.2.8"
  }
}

dependencies lists the packages the app needs to run; scripts gives names to commands. (A real file also has devDependencies: tools needed only while developing, such as TypeScript and ESLint.) The commands you will use most:

Command	What it does
npm install	Reads package.json and downloads everything into node_modules (run it after cloning a project)
npm install date-fns	Adds a new package (here date-fns) and records it in package.json
npm run dev	Runs the dev script: starts the development server, for example at http://localhost:3000 (stop it with Ctrl+C)
npm run build	Builds the optimized production version
npx create-next-app@latest my-app	npx runs a package’s command without installing it permanently; this one creates a new Next.js project

So the usual routine for a project you just cloned is:

cd my-app
npm install
npm run dev

node_modules should never be committed to Git: it can contain thousands of files and can always be recreated exactly from package.json and package-lock.json with npm install. Make sure it is listed in .gitignore (see .gitignore and Keeping Secrets Out of Git).

Packages are code from strangers

Installing a package runs other people’s code on your computer and in your app. Prefer well-known, actively maintained packages. AI tools occasionally suggest a package name that doesn’t exist - or one that an attacker has registered under a look-alike name - so check any unfamiliar package on npmjs.com before installing it.

TypeScript is JavaScript with types added (for example, declaring that price must be a number), which catches many mistakes before the code runs. Its files end in .ts or .tsx, and it is converted to plain JavaScript before it runs. New Next.js projects use TypeScript by default.

Deeper dive: Other names you will see in project files

• Vite: a fast development server and build tool used by many frameworks (its development server uses port 5173 by default).
• Bundlers such as Turbopack and webpack: tools that combine and shrink your code files for the browser. Next.js uses Turbopack by default.
• Tailwind CSS: a way of styling with many small, ready-made CSS classes written directly in the HTML, such as class="text-xl font-bold".
• ESLint: a “linter” that checks code for common mistakes and style problems.
• pnpm, yarn and bun: alternatives to npm for installing packages.

37.6 Back-end frameworks

If the back end is a separate program, it is usually built with a back-end framework:

• Express (JavaScript on Node.js): minimal and very common for APIs.
• Django (Python): “batteries included” - user accounts, an admin site and database tools built in.
• Flask (Python): small and flexible.
• FastAPI (Python): modern and quick for building APIs.
• Ruby on Rails (Ruby): famous for building complete apps quickly.
• Also common: Laravel (PHP), Spring Boot (Java), ASP.NET Core (C#).

With a meta-framework like Next.js you often don’t need a separate back-end framework, and with a backend-as-a-service such as Supabase (see Hosting and Deployment) you need even less back-end code.

37.7 How to choose

As of Oct 6, 2026 · Official docs: How Claude remembers your project (CLAUDE.md and AGENTS.md)

For most student web apps, a sensible default is a popular meta-framework (such as Next.js) plus a hosted database and login service (such as Supabase) plus a hosting service (such as Vercel or Netlify). Beyond that, weigh:

• Popularity and community: more tutorials, answers and ready-made packages, and more developers who already know it.
• What your team knows: a Python-only team may move faster with Django or FastAPI.
• The kind of site: content (consider Astro or SSG) vs. an interactive app (Next.js, Nuxt, SvelteKit).
• Hosting options and long-term maintenance.

Popularity matters even more with AI. AI models learned from public code and documentation, so they know popular frameworks far better than rare ones. With a niche framework - or a version released after the model’s training - expect more outdated or invented code. Tell the AI exactly which framework and version you use (it’s in package.json) and point it to the current documentation. Frameworks are adapting: new Next.js projects come with an AGENTS.md file of instructions for AI coding agents - it begins “This is NOT the Next.js you know” and tells agents to read the documentation bundled with the installed version before writing code - plus a one-line CLAUDE.md (@AGENTS.md) that makes Claude Code load it (see CLAUDE.md and Memory).

Practice Questions

Easy

Question 1 · Matching

Match each front-end framework with the meta-framework built on it.

Front-end framework		Meta-framework
1. React		A. SvelteKit
2. Vue		B. Next.js
3. Svelte		C. Nuxt

Suggested answer

1 → B, 2 → C, 3 → A.

Question 2 · Multiple choice

What is Node.js?

1. A front-end framework for building components
2. A program that runs JavaScript outside the browser
3. A database for JavaScript apps
4. A hosting company

Suggested answer

b. Node.js runs JavaScript on your computer or a server - for back-end code and for development tools. It is not a framework (a), a database (c) or a hosting company (d).

Question 3 · Short answer

What is a package, and what is npm?

Suggested answer

A package is reusable code that someone published so others can use it (like pandas in Python). npm (Node Package Manager) is the command-line tool, installed with Node.js, that downloads packages from the npm registry and keeps track of which ones a project uses.

Question 4 · True or false

You should commit the node_modules folder to Git so that teammates get the same packages.

Suggested answer

False. node_modules is huge and can be recreated exactly with npm install, using package.json and package-lock.json. Commit those two files and list node_modules/ in .gitignore.

Question 5 · Matching

Match each rendering approach with its description.

Approach		Description
1. CSR		A. HTML is built on the server for every request
2. SSR		B. HTML is built once, ahead of time, when the site is built
3. SSG		C. HTML is built in the browser by JavaScript

Suggested answer

1 → C, 2 → A, 3 → B.

Question 6 · Multiple choice

What is TypeScript?

1. A separate language that browsers run instead of JavaScript
2. JavaScript with types added, converted to plain JavaScript before it runs
3. A tool for styling pages
4. Another name for Node.js

Suggested answer

b. TypeScript adds type information that catches mistakes early, and it is converted to JavaScript before running. Browsers don’t run it directly (a); styling is CSS’s job (c); Node.js is a runtime, not a language (d).

Medium

Question 7 · Write the command

Sam has just cloned a Next.js project into the folder club-events. Write the commands to install its packages and start the development server. Which address should he open in the browser?

Suggested answer

cd club-events
npm install
npm run dev

Then open http://localhost:3000 (Next.js’s default port - the terminal shows the exact address).

Question 8 · Read the config

Using the package.json on this page: what does npm run build actually run? Which three packages does the app depend on?

Suggested answer

npm run build runs the build script, which is next build. The dependencies are next, react and react-dom.

Question 9 · Scenario

Maria clones a project and immediately runs npm run dev. It fails with an error saying that next can’t be found. What did she forget?

Suggested answer

She forgot npm install. A freshly cloned project has no node_modules folder (it isn’t committed to Git), so the next command the dev script needs isn’t there yet. Running npm install first downloads it.

Question 10 · Choose

Which rendering approach (CSR, SSR or SSG) fits best, and why? (a) a company blog; (b) a personal finance dashboard shown after login; (c) a public product-search page that must load fast and show up in search engines.

Suggested answer

1. SSG: the posts change rarely, so build them once ahead of time - fast and cheap. (b) CSR (or SSR): it is private and interactive, and search engines don’t need to see it. (c) SSR: the results depend on the search and change constantly, and the content needs to be in the HTML for speed and search engines.

Question 11 · Short answer

Why does a “front-end” React project still need Node.js installed on your computer?

Suggested answer

The development tools - the development server, the build tool that turns JSX/TypeScript into plain JavaScript, and npm itself - are JavaScript programs that run on your computer, and Node.js is what runs them. The finished site runs in the browser, but building it needs Node.js.

Question 12 · Short answer

What does npx create-next-app@latest my-app do? What does the @latest part mean?

Suggested answer

npx runs the create-next-app tool without permanently installing it, and the tool creates a new folder my-app containing a ready-to-run Next.js project (and installs its packages). @latest asks for the newest published version of the tool.

Hard

Question 13 · Scenario

A startup’s site was built with client-side rendering only. Marketing complains that links shared on social media show no preview text and that the site ranks poorly in search. Explain the likely cause and a fix.

Suggested answer

With CSR, the HTML the server sends is almost empty; the content appears only after JavaScript runs in the browser. Link-preview tools and search engines work most reliably with content that is already in the HTML, so they may see little or nothing. Fix: render the public pages on the server (SSR) or generate them ahead of time (SSG) - easiest with a meta-framework such as Next.js - while keeping CSR for private, interactive screens.

Question 14 · Scenario

Claude Code suggests running npm install react-super-calendar-pro, a package you have never heard of. What should you check before agreeing, and why?

Suggested answer

Look the package up on npmjs.com (and its source repository): does it exist, is it the one you think it is (not a look-alike name), is it widely used, is it actively maintained, and does it come from a trustworthy author? AI tools sometimes suggest packages that don’t exist, and attackers sometimes publish malicious packages under such names. Installing a package runs someone else’s code on your computer and in your app. If in doubt, ask for a well-known alternative.

Question 15 · Long answer

Your team of three business students (one knows some Python, none knows JavaScript well) will build a club events app with AI help. Recommend a framework approach and justify it.

Suggested answer

A reasonable recommendation: Next.js (with TypeScript defaults) plus a backend-as-a-service such as Supabase, hosted on Vercel or Netlify. Reasons: it is extremely popular, so AI tools know it well and there are many tutorials; one project covers front end and back end; it matches the book’s tutorial; and free tiers exist for this kind of setup.

An equally good answer could choose Django or FastAPI because of the team’s Python knowledge, accepting a separate front end or server-rendered pages. Good answers weigh popularity/AI support, team skills, the type of app, and hosting.

Question 16 · Scenario

A teammate deleted the node_modules folder to save disk space and is afraid the project is ruined. Is it? How do you restore it?

Suggested answer

Nothing is lost. node_modules only contains downloaded copies of packages. Running npm install in the project folder downloads them again, using package.json and package-lock.json to get exactly the same versions.

Question 17 · Compare

Compare a front-end framework (such as React) with a meta-framework (such as Next.js). What does the meta-framework add?

Suggested answer

A front-end framework builds the user interface in the browser from components. A meta-framework builds on it and adds the server side: routing based on folders, server-side rendering and static generation, API endpoints (back-end code in the same project), and build/deploy tooling. So with React alone you would need to add other tools for those jobs; with Next.js you get a full-stack project.

Question 18 · Hands-on

If you have Node.js installed, create a Next.js app with npx create-next-app@latest my-first-app --yes, then cd my-first-app and npm run dev. Open the address it prints. Look at package.json and the folders that were created, then ask Claude Code (from inside that folder) to explain the project structure. What files tell an AI agent how to work in this project?

Suggested answer

The --yes option skips the questions and uses the recommended defaults (TypeScript, Tailwind CSS, ESLint, the App Router) - or your saved choices if you have used create-next-app before. After npm run dev, the app is at http://localhost:3000 (unless that port is busy). You should find package.json with dev, build, start and lint scripts, a node_modules folder, an app folder with the pages, a public folder for images and other static files, and configuration files such as tsconfig.json and next.config.ts. The files AGENTS.md and CLAUDE.md hold instructions for AI coding agents: Claude Code reads CLAUDE.md, whose single line @AGENTS.md pulls in AGENTS.md.