Topic

Install and run Next.js

Definition

Next.js is a React framework that supplies an application build system, file-based routing, server rendering, and production runtime conventions.

In simpler words

Next gives a React app a known structure and the commands needed to develop, build, and deploy it.

Start by running the web application that already exists in this workspace instead of creating a second app.

After this you can

Start the web app from the monorepo root
Find the App Router entry point
Distinguish a development server from a production build

Run the existing web application

This repository is a pnpm workspace. The Next application lives in apps/web, so workspace-aware commands run the correct package and keep its dependencies consistent with the rest of the repository.

Development mode watches source files and serves rapid feedback. It is useful for learning, but it does not prove that the optimized production build will succeed.

Start and build the web app

pnpm dev:web
pnpm --filter @repo/web build

Use the root scripts or a package filter; both target the existing web application.

Mistake: creating another Next app

# Wrong — creates an unrelated app inside the workspace
npx create-next-app apps/web-next

# Right — run the app that already exists
pnpm dev:web

A second app duplicates configuration, routes, and package ownership.

Know what the commands prove

Definition

Development starts an editable server, while a production build validates compilation and produces the deployable application output.

In simpler words

“It opens in my browser” proves less than “the production build completed.”

Read apps/web/package.json before inventing a command; package scripts are the project contract.

Keep environment values out of source control and restart the dev server after changing values that Next reads at startup.

Live playground

Next installation playground

Identify the command that runs the existing web app.

Run pnpm --filter @repo/web dev — do not create a second app.

next-installation

Keep in mind

Run commands from the workspace root so pnpm resolves the intended package.
Treat a successful production build as a required checkpoint before deployment.
Use the existing apps/web app rather than scaffolding a duplicate.