getting-started/installation

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Turbopack is default bundler

Turbopack is now the default bundler for Next.js. To use Webpack instead, run `next dev --webpack` or `next build --webpack`.

Public folder for static assets

Create an optional `public` folder at the root of your project to store static assets such as images and fonts. Files inside `public` can be referenced by code starting from the base URL `/`. For example, `public/profile.png` can be referenced as `/profile.png`.

Static asset image reference example

Example using the Image component with a static asset from the public folder in `app/page.tsx`: ```tsx import Image from 'next/image' export default function Page() { return <Image src="/profile.png" alt="Profile" width={100} height={100} /> } ```

create-next-app quick start command

To quickly create a new Next.js app with recommended defaults, run `pnpm create next-app@latest my-app --yes` (for pnpm). Equivalent commands exist for npm, yarn, and bun. The `--yes` flag skips prompts and enables TypeScript, Tailwind CSS, ESLint, App Router, and Turbopack by default, with import alias `@/*`, and includes AGENTS.md to guide coding agents.

Minimum Node.js version requirement

The minimum required Node.js version for Next.js is 20.9.

Supported browsers in Next.js

Next.js supports modern browsers with zero configuration: Chrome 111+, Edge 111+, Firefox 111+, and Safari 16.4+.

create-next-app interactive prompts

When running `create-next-app` without `--yes`, you are prompted: What is your project named? Would you like to use recommended Next.js defaults (TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md)? If you choose to customize, you are asked about TypeScript, linter choice (ESLint/Biome/None), React Compiler, Tailwind CSS, src/ directory, App Router, and import alias configuration, and whether to include AGENTS.md.

Manual Next.js installation packages

To manually install Next.js, run `pnpm i next@latest react@latest react-dom@latest` (for pnpm). Equivalent commands exist for npm, yarn, and bun. The App Router uses React canary releases built-in that include stable React 19 changes, but you should still declare react and react-dom in package.json for tooling and ecosystem compatibility.

Package.json scripts for Next.js development

Standard Next.js scripts in package.json are: `dev`: `next dev` (starts development server using Turbopack), `build`: `next build` (builds for production), `start`: `next start` (starts production server), `lint`: `eslint` (runs ESLint), `lint:fix`: `eslint --fix` (fixes linting issues).

Cache Components requirement for revalidation page

This revalidation documentation covers revalidation with Cache Components, enabled by setting cacheComponents: true in next.config.ts file. If not using Cache Components, refer to the Caching and Revalidating (Previous Model) guide.

Getting Started prerequisites

Before starting with Next.js and the App Router, you should be comfortable with HTML, CSS, JavaScript, and React.

React Foundations course

If you are new to React or need a refresher, the React Foundations course is recommended for learning React basics before getting started with Next.js.

Next.js Foundations course

The Next.js Foundations course (also called dashboard-app course) teaches Next.js by having you build an application as you learn.

Give your agent this brain