Tworzenie projektu Next.js z Cursorem

Czas stworzyć pierwszy projekt Next.js! Użyjemy Cursora i AI żeby przyspieszyć proces.

Czym jest Next.js? ⚡

Next.js to framework React do budowania aplikacji webowych. Jest najpopularniejszym wyborem w 2024 roku.

Dlaczego Next.js?

• 🚀 Fast - Server-Side Rendering (SSR)
• 🎨 Easy - Routing, API routes, styling out-of-the-box
• 📱 SEO - Świetne dla wyszukiwarek
• 🔥 Hot Reload - Zmiany widoczne natychmiast
• 💎 Używany przez - Netflix, TikTok, Twitch, Uber

Używanie AI do setup'u projektu

Zamiast google'ować "jak stworzyć projekt Next.js", zapytamy AI w Cursorze!

Krok 1: Otwórz AI Chat

W Cursorze naciśnij: Cmd/Ctrl + L

Krok 2: Zapytaj AI

Wpisz dokładnie ten prompt:

1Jak stworzyć nowy projekt Next.js 14 z TypeScript i Tailwind CSS? Podaj mi dokładną komendę npx.

Krok 3: Skopiuj komendę

AI poda Ci komendę podobną do:

1npx create-next-app@latest my-app --typescript --tailwind --app --eslint

Krok 4: Uruchom w terminalu

1. Otwórz terminal (Cmd/Ctrl + `)
2. Upewnij się że jesteś w folderze gdzie chcesz stworzyć projekt
3. Wklej komendę i naciśnij Enter

Krok 5: Odpowiedz na pytania setup'u

Instalator zapyta o kilka rzeczy:

1✔ What is your project named? › krakens-call
2✔ Would you like to use TypeScript? › Yes
3✔ Would you like to use ESLint? › Yes
4✔ Would you like to use Tailwind CSS? › Yes
5✔ Would you like to use `src/` directory? › No
6✔ Would you like to use App Router? › Yes
7✔ Would you like to customize the default import alias? › No

Twoje odpowiedzi:

• Project name:

  krakens-call

  (lub dowolna nazwa)
• TypeScript: Yes ✅
• ESLint: Yes ✅
• Tailwind CSS: Yes ✅
• src/ directory: No ❌
• App Router: Yes ✅ (najważniejsze!)
• Import alias: No ❌

Krok 6: Poczekaj (~1-2 minuty)

npm pobierze wszystkie pakiety. Zobaczysz:

1Creating a new Next.js app in /path/to/krakens-call...
2
3Installing packages. This might take a couple of minutes...
4
5Success! Created krakens-call at /path/to/krakens-call

Otwieranie projektu w Cursorze

Metoda 1: Przez terminal

1cd krakens-call
2code .

(

code .

otwiera Cursor w bieżącym folderze)

Metoda 2: Przez Cursor

1. File → Open Folder
2. Wybierz folder

   krakens-call

3. Kliknij "Open"

Struktura projektu Next.js 14

Gdy otworzysz projekt, zobaczysz tę strukturę:

1krakens-call/
2├── app/                  ← Główny folder aplikacji (App Router)
3│   ├── layout.tsx       ← Layout (wrapper) dla wszystkich stron
4│   ├── page.tsx         ← Strona główna (/)
5│   └── globals.css      ← Globalne style CSS
6├── public/              ← Statyczne pliki (obrazki, fonts)
7├── node_modules/        ← Zainstalowane pakiety (nie commituj!)
8├── package.json         ← Zależności i skrypty
9├── tsconfig.json        ← Konfiguracja TypeScript
10├── tailwind.config.ts   ← Konfiguracja Tailwind CSS
11├── next.config.js       ← Konfiguracja Next.js
12└── .gitignore           ← Pliki ignorowane przez Git

Najważniejsze pliki:

1.

app/page.tsx

- Strona główna

To strona główna Twojej aplikacji (

/

). Każdy plik

page.tsx

w folderze

app/

to osobna strona.

2.

app/layout.tsx

- Główny layout

To wrapper dla wszystkich stron - rzeczy wspólne (np. header, footer).

3.

app/globals.css

- Globalne style

Style CSS stosowane do całej aplikacji.

4.

package.json

- Zależności

Lista wszystkich bibliotek + skrypty npm.

5.

tailwind.config.ts

- Tailwind CSS

Konfiguracja Tailwind (kolory, fonty, breakpointy).

Uruchamianie projektu

Czas zobaczyć projekt w akcji!

Krok 1: Zainstaluj zależności (jeśli nie zrobione)

1npm install

Krok 2: Uruchom development server

1npm run dev

Zobaczysz:

1▲ Next.js 14.0.0
2- Local:        http://localhost:3000
3- Environments: .env.local
4
5✓ Ready in 2.5s

Krok 3: Otwórz w przeglądarce

Idź na: http://localhost:3000

Zobaczysz domyślną stronę Next.js! 🎉

Hot Reload - Magia Next.js ✨

Hot Reload oznacza, że zmiany w kodzie są widoczne natychmiast w przeglądarce, bez odświeżania!

Spróbuj:

1. Otwórz

   app/page.tsx

   w Cursorze
2. Znajdź tekst "Get started by editing"
3. Zmień na "Ahoj, Piraci!"
4. Zapisz plik (Cmd/Ctrl + S)
5. Patrz na przeglądarkę - zmiana pojawi się automatycznie!

To znaczy, że możesz kodować i od razu widzieć efekty. Super wygodne!

App Router vs Pages Router

Next.js ma dwie wersje routingu:

| Feature | Pages Router | App Router | |---------|--------------|------------| | Folder |

pages/

|

app/

| | Wersja Next | 12 i niższe | 13+ | | Status | Legacy | Nowy standard ✅ | | Server Components | ❌ | ✅ | | Layouts | Trudne | Łatwe |

Używamy App Router - to nowy standard od Next.js 13/14.

Podsumowanie 🎓

✅ Next.js - framework React do budowania aplikacji ✅ npx create-next-app - tworzy nowy projekt ✅ App Router - folder

app/

z routing ✅ page.tsx - pojedyncza strona ✅ layout.tsx - wspólny layout ✅ npm run dev - uruchamia development server ✅ Hot Reload - zmiany widoczne natychmiast ✅ localhost:3000 - adres lokalny aplikacji

W następnym ćwiczeniu nauczysz się Tailwind CSS i stworzymy landing page!

Do zobaczenia! 🚀