App Router foundations
Create an App Router project
Generate a current TypeScript project with the recommended defaults, run it locally, and identify the development and production commands.
8 minute lesson
Start with the official generator. Its defaults change as the framework evolves, so using the current command is safer than copying an old starter repository.
Current Next.js requires Node.js 20.9 or newer. Check node --version before generating the project so a framework error is not mistaken for an application error.
The recommended defaults enable TypeScript, Tailwind CSS, ESLint, the App Router, Turbopack, and the @/* import alias. Record the choices and installed Next.js version in the project README. Commands and defaults from an older tutorial may describe a different caching or rendering model.
The development server optimizes for fast feedback and recompiles routes on demand. next build analyzes and prepares the production application; next start serves that output. A page working in development is therefore useful feedback, not proof that the production build succeeds.
npx create-next-app@latest field-notes --yes
cd field-notes
npm run dev
# later:
npm run build
npm start
Create the project, open http://localhost:3000, and inspect the terminal request log. Stop the development server, run a production build, and serve it once before changing any code. Save the version and generator choices so later framework-specific behavior can be traced.
Lesson completed