Projekt létrehozása (create-next-app)

2. Projekt létrehozása (create-next-app)

Új projekt indítása

npx create-next-app@latest my-app

Az installer interaktívan megkérdezi a konfigurációs opciókat:

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes
Would you like your code inside a `src/` directory? › No
Would you like to use App Router? › Yes
Would you like to use Turbopack for `next dev`? › Yes
Would you like to customize the import alias? › No

Ajánlott beállítások magyarázata:

• TypeScript – Erősen ajánlott. A Next.js teljes TypeScript támogatással rendelkezik, a kódbázis sokkal karbantarthatóbb lesz tőle.
• Tailwind CSS – A Next.js "official" CSS megoldása, nulla konfiguráció szükséges.
• App Router – Ez a modern architektúra. Ne válaszd a Pages Routert (legacy).
• Turbopack – Next.js 16-ban ez az alapértelmezett bundler, sokkal gyorsabb a Webpack-nél.

Fejlesztői szerver indítása

cd my-app
npm run dev

Az alkalmazás elérhető: http://localhost:3000

Elérhető scriptek

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

• dev – fejlesztői mód, hot reload-dal
• build – production build generálás
• start – production build futtatása
• lint – ESLint ellenőrzés

Meglévő projekt frissítése

# Automatikus frissítés codemods-szal
npx @next/codemod@canary upgrade latest

# Manuális frissítés
npm install next@latest react@latest react-dom@latest

📝 Összefoglaló – 2. fejezet

• A create-next-app beállítja a teljes projektkörnyezetet TypeScript-tel, Tailwinddel és Turbopack-kel
• App Router kötelező a modern fejlesztéshez – Pages Router csak legacy projektekhez
• A npm run dev elindítja a fejlesztői szervert Turbopack-kel, ami drámaian gyorsabb az előző verzióknál