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.
Start with the official generator. Its defaults change as the framework evolves, so the current command beats copying an old starter repo from a tutorial.
Current Next.js requires Node.js 20.9 or newer. Run node --version first. If you see v18.x, upgrade Node before blaming your app code for a cryptic framework error.
The recommended defaults turn on TypeScript, Tailwind CSS, ESLint, the App Router, Turbopack, and the @/* import alias. Write the choices and the installed Next.js version in your project README. Commands from an older tutorial may describe a different caching or rendering model than the version you actually installed.
The development server optimizes for fast feedback and recompiles routes on demand. next build analyzes and prepares the production app. next start serves that output. A page working in dev is useful feedback, not proof that production build succeeds.
npx create-next-app@latest field-notes --yes
cd field-notes
npm run dev
# later:
npm run build
npm start
After npm run dev, open http://localhost:3000. You should see the default Next.js welcome page and a line in the terminal like GET / 200. Stop the server with Ctrl+C, run npm run build, then npm start and load the same URL again. If build fails, fix that before you change any application code.
Try this on your own machine: create the project, note the Next.js version from package.json, and save your generator choices in the README so you can trace framework behavior later.
If port 3000 is already taken, the dev server picks another port and prints it in the terminal. Read that line instead of assuming 3000 when something refuses to connect.
Lesson completed