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. Oficjalna dokumentacja Reacta (react.dev) wymienia go jako pierwszy z polecanych frameworków do nowych aplikacji.

Dlaczego Next.js?

• Szybkość - renderowanie po stronie serwera (SSR)
• Wygoda - routing, API routes i stylowanie gotowe od razu
• SEO - świetne dla wyszukiwarek
• Hot Reload (w dokumentacji: Fast Refresh) - zmiany widoczne natychmiast
• Używany przez - m.in. Nike, OpenAI i Sonos (galeria nextjs.org/showcase)

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:

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

Krok 3: Skopiuj komendę

AI poda Ci komendę podobną do:

npx create-next-app@latest krakens-call

Czasem AI dopisze flagi, np. --typescript --tailwind --app. Taka komenda też zadziała: instalator nie zada wtedy żadnych pytań i dla pozostałych opcji użyje zalecanych ustawień.

Krok 4: Uruchom w terminalu

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

Krok 5: Odpowiedz na pytania instalatora

Instalator zapyta najpierw, czy użyć zalecanych ustawień:

Would you like to use the recommended Next.js defaults?
  Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md
  No, customize settings - Choose your own preferences

Wybierz Yes, use recommended defaults (strzałkami i klawiszem Enter). Dostaniesz dokładnie to, czego potrzebujemy: TypeScript, ESLint, Tailwind CSS i App Router (najważniejsze!), a do tego plik AGENTS.md z instrukcjami dla asystentów AI.

Jeśli wybierzesz No, customize settings, instalator zapyta o każdą opcję osobno. Odpowiadaj wtedy tak:

• TypeScript: Yes
• linter: ESLint
• React Compiler: No
• Tailwind CSS: Yes
• folder src/: No
• App Router: Yes (najważniejsze!)
• alias importów: No
• AGENTS.md: Yes

Krok 6: Poczekaj (~1-2 minuty)

npm pobierze wszystkie pakiety. Zobaczysz:

Creating a new Next.js app in /path/to/krakens-call.

Installing packages. This might take a couple of minutes.

Success! Created krakens-call at /path/to/krakens-call

Otwieranie projektu w Cursorze

Metoda 1: Przez terminal

cd krakens-call
cursor .

(cursor . otwiera Cursor w bieżącym folderze. Jeśli terminal nie zna komendy cursor, otwórz w Cursorze paletę poleceń Cmd/Ctrl + Shift + P, wpisz „install cursor” i uruchom polecenie, które instaluje komendę cursor. Komenda code . otwiera Visual Studio Code, nie Cursor.)

Metoda 2: Przez Cursor

1. File → Open Folder
2. Wybierz folder krakens-call
3. Kliknij "Open"

Struktura projektu Next.js 16

Gdy otworzysz projekt, zobaczysz tę strukturę:

krakens-call/
├── app/                  ← Główny folder aplikacji (App Router)
│   ├── favicon.ico      ← Ikona strony
│   ├── globals.css      ← Globalne style CSS (tu jest @import "tailwindcss")
│   ├── layout.tsx       ← Layout (wrapper) dla wszystkich stron
│   └── page.tsx         ← Strona główna (/)
├── public/              ← Statyczne pliki (obrazki, fonty)
├── node_modules/        ← Zainstalowane pakiety (nie commituj!)
├── AGENTS.md            ← Instrukcje dla asystentów AI (CLAUDE.md odsyła do niego)
├── eslint.config.mjs    ← Konfiguracja ESLint
├── next.config.ts       ← Konfiguracja Next.js
├── package.json         ← Zależności i skrypty
├── postcss.config.mjs   ← Podłącza Tailwind CSS
├── tsconfig.json        ← Konfiguracja TypeScript
└── .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. postcss.config.mjs - Tailwind CSS

Podłącza Tailwind do projektu. W Tailwind 4 nie ma już pliku tailwind.config.ts: kolory i fonty ustawiasz w app/globals.css.

Uruchamianie projektu

Czas zobaczyć projekt w akcji!

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

npm install

Krok 2: Uruchom development server

npm run dev

Zobaczysz:

▲ Next.js 16.3.8 (Turbopack)
- Local:         http://localhost:3000
- Network:       http://192.168.1.10:3000

✓ 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! W dokumentacji Next.js ta funkcja nazywa się Fast Refresh.

Spróbuj:

1. Otwórz app/page.tsx w Cursorze
2. Znajdź tekst "To get started, edit the page.tsx file."
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:

Używamy App Router - Next.js poleca go w nowych projektach od wersji 13.4.

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!

// Next.js 16 App Router - Podstawowa struktura strony

export default function Home() {
  return (
    <main className="min-h-screen p-24">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-4xl font-bold mb-8">
          Witaj w Next.js 16!
        </h1>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="border border-gray-300 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold mb-4">
              App Router
            </h2>
            <p className="text-gray-600">
              To jest strona w folderze app/. Każdy plik page.tsx to osobna strona.
            </p>
          </div>

          <div className="border border-gray-300 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold mb-4">
              Server Components
            </h2>
            <p className="text-gray-600">
              Domyślnie wszystkie komponenty w App Router są Server Components.
            </p>
          </div>

          <div className="border border-gray-300 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold mb-4">
              TypeScript
            </h2>
            <p className="text-gray-600">
              Next.js ma wbudowane wsparcie dla TypeScript out-of-the-box.
            </p>
          </div>

          <div className="border border-gray-300 p-6 rounded-lg">
            <h2 className="text-2xl font-semibold mb-4">
              Tailwind CSS
            </h2>
            <p className="text-gray-600">
              Stylowanie przez utility classes bezpośrednio w JSX.
            </p>
          </div>
        </div>
      </div>
    </main>
  );
}