Inicjalizacja projektu i dostępne startery

W Metropolii Quantum, inżynierowie często korzystają z predefiniowanych schematów kwantowych, aby przyspieszyć rozwój nowych systemów miejskich. Podobnie w świecie Next.js, możemy wykorzystać różne szablony startowe i konfiguracje, które pozwalają nam szybciej rozpocząć pracę nad nową aplikacją. W tym module poznamy dostępne startery dla Next.js 15 i nauczymy się, jak skutecznie inicjalizować nowe projekty.

Podstawowa inicjalizacja projektu

Jak już wiemy z poprzedniego modułu, najprostszym sposobem rozpoczęcia nowego projektu Next.js jest użycie narzędzia

create-next-app

:

1npx create-next-app@latest my-quantum-project

To polecenie tworzy nowy projekt Next.js z domyślną konfiguracją. Jest to jak uruchomienie podstawowego modułu mieszkalnego w Metropolii Quantum - funkcjonalny, ale możesz chcieć go dostosować do swoich specyficznych potrzeb.

Opcje konfiguracyjne create-next-app

Podczas tworzenia nowego projektu,

create-next-app

zapyta o kilka opcji konfiguracyjnych. Przyjrzyjmy się im bliżej:

1Would you like to use TypeScript? Yes
2Would you like to use ESLint? Yes
3Would you like to use Tailwind CSS? Yes
4Would you like to use src/ directory? Yes
5Would you like to use App Router? (recommended) Yes
6Would you like to customize the default import alias (@/*)? No

TypeScript

TypeScript dodaje statyczne typowanie do JavaScript, co pomaga wychwytywać błędy już podczas pisania kodu. W Metropolii Quantum byłoby to podobne do systemów wczesnego ostrzegania, które wykrywają problemy zanim staną się krytyczne.

1// JavaScript
2function addEnergy(reactor, amount) {
3  return reactor.level + amount;
4}
5
6// TypeScript
7interface Reactor {
8  level: number;
9  maxCapacity: number;
10  status: 'active' | 'inactive' | 'maintenance';
11}
12
13function addEnergy(reactor: Reactor, amount: number): number {
14  if (reactor.status !== 'active') {
15    throw new Error('Reaktor musi być aktywny aby dodać energię');
16  }
17  return reactor.level + amount;
18}

ESLint

ESLint to narzędzie do analizy statycznej kodu, które pomaga utrzymać spójny styl i wykrywać potencjalne problemy. Jest jak automatyczny kontroler jakości w fabrykach Metropolii Quantum.

Tailwind CSS

Tailwind CSS to framework CSS oparty na klasach użytkowych. Zamiast pisać własne style CSS, używasz predefinowanych klas bezpośrednio w HTML. Jest to jak modułowy system konstrukcyjny w Metropolii Quantum - zamiast projektować każdy budynek od podstaw, inżynierowie łączą gotowe moduły.

1// Bez Tailwind
2<button className="login-button">Zaloguj</button>
3
4// Z Tailwind
5<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
6  Zaloguj
7</button>

Katalog src/

Używanie katalogu

src/

to dobra praktyka organizacyjna, która oddziela kod źródłowy od plików konfiguracyjnych. Jest to jak oddzielenie centrum zarządzania od infrastruktury w Metropolii Quantum.

App Router

App Router to nowoczesne podejście do routingu w Next.js, oparte na React Server Components. Jest to kluczowa funkcja Next.js 15, którą zdecydowanie zalecamy używać w nowych projektach.

Alias importu @/*

Alias importu

@/*

pozwala na używanie skrótowej ścieżki do importowania modułów z katalogu głównego projektu. Jest to jak system szybkiego transportu w Metropolii Quantum - skrót, który oszczędza czas.

1// Bez aliasu
2import { Button } from '../../../components/ui/Button';
3
4// Z aliasem @/*
5import { Button } from '@/components/ui/Button';

Oficjalne szablony startowe

Next.js oferuje kilka oficjalnych szablonów startowych, które możesz użyć jako podstawę swojego projektu. Aby z nich skorzystać, użyj flagi

--example

:

1npx create-next-app@latest my-quantum-dashboard --example with-tailwindcss

Oto niektóre z najpopularniejszych oficjalnych szablonów:

1. with-tailwindcss

Szablon z preinstalowanym i skonfigurowanym Tailwind CSS.

1npx create-next-app@latest --example with-tailwindcss my-tailwind-app

2. with-typescript

Szablon z TypeScript już skonfigurowanym.

1npx create-next-app@latest --example with-typescript my-ts-app

3. blog-starter

Szablon bloga z Markdown, gotowy do użycia.

1npx create-next-app@latest --example blog-starter my-blog

4. commerce

Pełny szablon e-commerce, który możesz dostosować do swoich potrzeb.

1npx create-next-app@latest --example commerce my-store

Next.js Templates - zaawansowane startery

Vercel, firma stojąca za Next.js, oferuje też bardziej zaawansowane szablony na stronie vercel.com/templates. Są to gotowe projekty dla konkretnych przypadków użycia. Przypomina to sposób, w jaki architekci Metropolii Quantum mogą wybrać gotowe plany dla różnych typów struktur miejskich.

Niektóre z godnych uwagi szablonów:

Next.js AI Chatbot

Pełny chatbot AI wykorzystujący OpenAI, podobny do ChatGPT.

1npx create-next-app@latest ai-chatbot   --use-pnpm   --example "https://github.com/vercel/ai/tree/main/examples/next-ai-chatbot"

Next.js Dashboard

Kompleksowy dashboard z panelem administracyjnym, uwierzytelnianiem i bazą danych.

1npx create-next-app@latest dashboard   --use-pnpm   --example "https://github.com/vercel/next.js/tree/canary/examples/with-supabase"

Startery społeczności

Oprócz oficjalnych szablonów, społeczność Next.js stworzyła wiele własnych starterów. Są to jak eksperymentalne projekty architektoniczne w Metropolii Quantum - nie są częścią oficjalnej infrastruktury, ale mogą oferować innowacyjne rozwiązania.

T3 Stack

T3 Stack to popularny zestaw narzędzi do budowy aplikacji Next.js z TypeScript, tRPC, Tailwind CSS i Prisma.

1npm create t3-app@latest

Next.js Nextra

Nextra to framework do tworzenia stron statycznych i dokumentacji oparty na Next.js.

1npx create-next-app@latest my-docs-site   --use-pnpm   --example "https://github.com/shuding/nextra-docs-template"

Struktura projektu po inicjalizacji

Po zainicjalizowaniu projektu Next.js 15 z App Router, zobaczysz następującą strukturę plików:

1my-quantum-project/
2├── app/                 # Katalog App Router
3│   ├── favicon.ico      # Ikona strony
4│   ├── globals.css      # Globalne style CSS
5│   ├── layout.tsx       # Główny układ aplikacji
6│   └── page.tsx         # Strona główna
7├── public/              # Statyczne pliki
8│   └── next.svg         # Logo Next.js
9├── .eslintrc.json       # Konfiguracja ESLint
10├── next.config.js       # Konfiguracja Next.js
11├── package.json         # Zależności i skrypty
12├── postcss.config.js    # Konfiguracja PostCSS
13├── tailwind.config.ts   # Konfiguracja Tailwind
14└── tsconfig.json        # Konfiguracja TypeScript

Przyjrzyjmy się niektórym z tych plików bliżej:

app/page.tsx

Jest to główna strona Twojej aplikacji, dostępna pod adresem

/

.

1export default function Home() {
2  return (
3    <main className="flex min-h-screen flex-col items-center justify-between p-24">
4      <h1 className="text-4xl font-bold">Witaj w Metropolii Quantum</h1>
5      <p className="text-xl">Przyszłość zaczyna się tutaj.</p>
6    </main>
7  );
8}

app/layout.tsx

Ten plik definiuje układ, który będzie współdzielony przez wszystkie strony w Twojej aplikacji.

1import './globals.css';
2import type { Metadata } from 'next';
3
4export const metadata: Metadata = {
5  title: 'Metropolia Quantum',
6  description: 'Portal zarządzania systemami miasta przyszłości',
7};
8
9export default function RootLayout({
10  children,
11}: {
12  children: React.ReactNode;
13}) {
14  return (
15    <html lang="pl">
16      <body>{children}</body>
17    </html>
18  );
19}

next.config.js

Ten plik zawiera konfigurację Next.js. Możesz go rozszerzyć o własne ustawienia.

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  // Twoje konfiguracje
4  images: {
5    domains: ['quantum-metropolis.example.com'],
6  },
7};
8
9module.exports = nextConfig;

Modyfikacja istniejącego projektu

Po inicjalizacji projektu, zazwyczaj będziesz chciał dostosować go do swoich potrzeb. Oto kilka typowych zmian:

1. Aktualizacja metadanych

Zaktualizuj plik

app/layout.tsx

, aby zmienić tytuł i opis aplikacji:

1export const metadata: Metadata = {
2  title: 'System Zarządzania Metropolią Quantum',
3  description: 'Zaawansowany interfejs do monitorowania i kontroli systemów miejskich',
4};

2. Dodawanie zależności

Zainstaluj dodatkowe biblioteki, których potrzebujesz:

1npm install axios react-query zustand

3. Konfiguracja struktury folderów

Utwórz foldery dla typowych elementów aplikacji:

1mkdir -p src/app/components/ui
2mkdir -p src/app/lib
3mkdir -p src/app/hooks
4mkdir -p src/app/utils

4. Dostosowanie stylów

Jeśli używasz Tailwind CSS, możesz dostosować jego konfigurację w pliku

tailwind.config.ts

:

1import type { Config } from 'tailwindcss';
2
3const config: Config = {
4  content: [
5    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
6    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
7    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
8  ],
9  theme: {
10    extend: {
11      colors: {
12        quantum: {
13          primary: '#3B82F6',
14          secondary: '#10B981',
15          accent: '#8B5CF6',
16          dark: '#1F2937',
17        },
18      },
19      fontFamily: {
20        sans: ['Inter', 'sans-serif'],
21        mono: ['Fira Code', 'monospace'],
22      },
23    },
24  },
25  plugins: [],
26};
27export default config;

Konfiguracja git i .gitignore

Gdy inicjalizujesz projekt przy użyciu

create-next-app

, git zostanie automatycznie zainicjalizowany, a plik

.gitignore

zostanie utworzony. Jest to jak system kontroli i archiwizacji planów w Metropolii Quantum - pozwala śledzić zmiany i współpracować z innymi inżynierami.

Możesz dodać pierwszy commit do swojego repozytorium:

1git add .
2git commit -m "Inicjalizacja projektu Next.js 15"

Dostosowanie npm scripts

Możesz dostosować skrypty w pliku

package.json

, aby uprościć często wykonywane zadania:

1"scripts": {
2  "dev": "next dev",
3  "build": "next build",
4  "start": "next start",
5  "lint": "next lint",
6  "format": "prettier --write "**/*.{js,ts,tsx,md}"",
7  "update-deps": "npm update"
8}

Podsumowanie

Inicjalizacja projektu Next.js 15 i wybór odpowiedniego startera to fundament sukcesu Twojej aplikacji, podobnie jak solidne fundamenty są kluczowe dla każdego budynku w Metropolii Quantum. W tym module poznaliśmy różne opcje inicjalizacji projektu, od podstawowego

create-next-app

po zaawansowane szablony społeczności.

Wybór właściwego startera zależy od Twoich konkretnych potrzeb. Dla prostszych projektów domyślny szablon

create-next-app

może być wystarczający. Dla bardziej złożonych aplikacji, rozważ użycie jednego z oficjalnych szablonów lub rozwiązań społeczności.

Pamiętaj, że dobrze zorganizowany początek projektu oszczędzi Ci wiele czasu i problemów w przyszłości, podobnie jak dokładne planowanie infrastruktury miejskiej w Metropolii Quantum zapobiega problemom z jej rozbudową.

W następnym module zagłębimy się w strukturę katalogów i plików w Next.js, porównując nowy App Router z tradycyjnym Pages Router.