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.

Open official example (opens in new tab)

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.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. How do you start a modern Next app?

Concept

Run next dev in an empty folder to generate the app scaffoldAdd the next package to package.json and it auto-creates the app/ treeClone the Next.js repo and build it from source for each projectUse create-next-app (or equivalent) with the App Router defaults you choose

2. What does Next add on top of React?

Syntax

A global state manager that replaces useState and ContextA component library of prebuilt buttons, modals, and formsA new templating language that replaces JSXFramework features: routing, rendering strategies, tooling, deployment shape

3. Node version concern?

Practical

Use a supported Node LTS matching Next’s requirementsAny Node version works as long as npm is installedMatch your Node version to your React version, not to NextNode is only needed for deploys since Next runs in the browser

4. TypeScript option?

Logic

You must run tsc --init manually before create-next-app workscreate-next-app can scaffold TS — recommended for this courseTypeScript only works in the Pages Router, not the App RouterTS can only be added later by renaming files, never scaffolded

5. Where does the app run locally?

Concept

next dev on the configured port (often 3000)next start on port 3000 during developmentnext build serves the app live as you editThe static export in out/ serves the app during development

6. Package manager lockfiles?

Practical

Add the lockfile to .gitignore so machines resolve fresh versionsCommit the lockfile your team uses for reproducible installsRegenerate the lockfile on every deploy to pull latest patchesKeep both npm and pnpm lockfiles so either tool works

7. App Router vs Pages?

Syntax

New apps typically start with App Router unless you choose PagesApp Router and Pages Router cannot coexist in one projectThe Pages Router is required to use Server ComponentsApp Router only supports static sites, so dynamic apps need Pages

8. Environment files?

Logic

All variables in .env files are exposed to the browser by defaultPrefix every variable with NEXT_PUBLIC_ so the server can read itPut secrets in next.config env so they stay server-onlyUse .env* for Next public/server env — never commit secrets

9. Why not install Next inside apps/api?

Concept

Keep Next (web) and Nest (api) as separate apps in the monorepoNext and Nest both bind port 3000, so they cannot share a packageNest already bundles Next, so adding it again causes a version clashNext must be a devDependency, and apps/api only has runtime deps

10. First sanity check after install?

Practical

Run the dev server and open the hello routeRun next build to confirm the production bundle compiles firstOpen the static export in out/ to confirm the pages renderedRun next lint to confirm the scaffold has no runtime errors

11. What does this command do?

Conceptintermediate

npx create-next-app@latest my-app

Adds Next.js to the app in the current directoryScaffolds a new Next app with the App Router defaults you selectUpgrades the my-app project’s Next.js version in placeGlobally installs the create-next-app CLI for later use

12. Which script serves the production build?

Syntaxintermediate

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

start — it runs next start after a buildbuild — next build compiles and then serves the outputdev — next dev serves the compiled production outputYou need dev, build, and start running together to serve

13. Why is adding Next to apps/api a mistake in this monorepo?

Practicaladvanced

// apps/api/package.json
"dependencies": { "next": "..." }

Next (web) and Nest (api) are separate apps; Next belongs in apps/webNext and Nest export conflicting decorators that break compilationapps/api has no React, so Next would fail to build thereNest’s main.ts would be overwritten by Next’s entry point

14. Which variable is safe to read in the browser?

Logicintermediate

// .env.local
NEXT_PUBLIC_API_URL=http://localhost:3001
DATABASE_URL=postgres://...

NEXT_PUBLIC_API_URL — only NEXT_PUBLIC_ vars reach the clientDATABASE_URL — variables without NEXT_PUBLIC_ are the client-safe onesBoth — .env.local variables are always bundled into the clientNEXT_PUBLIC_API_URL, but only inside Server Components

15. What is wrong with importing this into a Next page?

Conceptadvanced

import { Controller } from '@nestjs/common';
// placed inside app/page.tsx

It only works if you add the "use server" directive to the page@nestjs/common must be imported through next/dynamic insteadNest decorators run fine but just bloat the client bundleNest server framework code doesn’t belong in a Next route component

Checking your session…