CSS preprocessor z dodatkowymi funkcjami

Zarządzanie zasobami statycznymi w katalogu public w Next.js 16

Kurs Next.js · Moduł 3: Stylowanie i optymalizacja wizualna

W Metropolis Quantum, każda dzielnica ma swoją centralną bazę zasobów - miejsce, gdzie przechowywane są elementy dostępne dla wszystkich mieszkańców: mapy, broszury informacyjne, elementy identyfikacji wizualnej czy interaktywne holoekrany z planami miasta. Te zasoby są niezmienne i dostępne publicznie, zapewniając spójność i ciągłość doświadczenia w całym mieście.

W aplikacjach Next.js, rolę tej centralnej bazy pełni katalog public. To właśnie tutaj umieszczamy wszystkie zasoby statyczne, które powinny być dostępne bez przetwarzania przez system budowania Next.js. W tym rozdziale przyjrzymy się, jak efektywnie zarządzać tymi zasobami, by nasza aplikacja była zarówno wydajna, jak i dobrze zorganizowana.

Czym jest katalog public w Next.js 16?

Katalog public to specjalny folder w aplikacji Next.js, który spełnia następujące funkcje:

Udostępnia pliki statyczne bezpośrednio - pliki umieszczone w public są serwowane z głównego katalogu domeny
Nie przetwarza zawartości - pliki nie przechodzą przez system budowania (w przeciwieństwie do zasobów importowanych bezpośrednio w komponentach)
Zapewnia niezmienne URL-e - nazwy plików nie ulegają zmianie przez proces budowania (nie są dodawane hashe do nazw)

Katalog ten jest idealny do przechowywania takich zasobów jak:

Obrazy logo i ikony
Pliki favicon i manifest.json
Pliki robots.txt i sitemap.xml
Czcionki
Dokumenty (PDF, DOCX)
Zasoby multimedialne (filmy, dźwięki)
Dane statyczne (JSON, CSV)

Struktura katalogu public

Dobrze zorganizowany katalog public ułatwia zarządzanie zasobami. Oto przykładowa struktura:

1public/
2├── favicon.ico                  # Ikona strony
3├── favicon-16x16.png            # Alternatywne rozmiary favicon
4├── favicon-32x32.png
5├── apple-touch-icon.png         # Ikona dla urządzeń Apple
6├── manifest.json                # Manifest PWA
7├── robots.txt                   # Instrukcje dla botów
8├── sitemap.xml                  # Mapa strony dla wyszukiwarek
9├── fonts/                       # Katalog z czcionkami
10│   ├── QuantumSans-Regular.woff2
11│   └── QuantumSans-Bold.woff2
12├── images/                      # Katalog z obrazami
13│   ├── logo.png
14│   ├── hero-banner.jpg
15│   ├── icons/                   # Podkatalog z ikonami
16│   │   ├── arrow-right.svg
17│   │   └── search.svg
18│   └── backgrounds/             # Podkatalog z tłami
19│       ├── quantum-pattern.svg
20│       └── districts/           # Dalsze podkatalogi dla organizacji
21│           ├── downtown.jpg
22│           └── quantum-district.jpg
23├── videos/                      # Katalog z filmami
24│   └── intro.mp4
25└── data/                        # Katalog z danymi statycznymi
26    ├── districts.json
27    └── services.json

Dostęp do zasobów z katalogu public

Dostęp do zasobów z katalogu public jest prosty i intuicyjny. Pamiętaj, że:

Ścieżki są względem głównego katalogu domeny
Musisz poprzedzać nazwy plików ukośnikiem (/)

W komponentach React

1// Przykład użycia obrazu z katalogu public
2export default function Logo() {
3  return (
4    <img
5      src="/images/logo.png"
6      alt="Metropolis Quantum Logo"
7      width={200}
8      height={50}
9    />
10  );
11}

W CSS

1/* W pliku CSS */
2.hero-section {
3  background-image: url('/images/backgrounds/quantum-pattern.svg');
4  background-repeat: repeat;
5}

W metadanych

1// app/layout.tsx
2import { Metadata } from 'next';
3
4export const metadata: Metadata = {
5  title: 'Metropolis Quantum',
6  description: 'Oficjalny portal miasta przyszłości',
7  icons: {
8    icon: [
9      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
10      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
11    ],
12    apple: [
13      { url: '/apple-touch-icon.png' },
14    ],
15  },
16};
17
18export default function RootLayout({
19  children,
20}: {
21  children: React.ReactNode;
22}) {
23  return (
24    <html lang="pl">
25      <body>{children}</body>
26    </html>
27  );
28}

Komponent Image a katalog public

Mimo że Next.js dostarcza zoptymalizowany komponent Image z pakietu next/image, czasem potrzebujemy użyć obrazów bezpośrednio z katalogu public. Komponent Image można używać z obrazami z katalogu public, zachowując korzyści z optymalizacji:

1import Image from 'next/image';
2
3export default function HeroBanner() {
4  return (
5    <div className="hero-banner">
6      <Image
7        src="/images/hero-banner.jpg"
8        alt="Witaj w Metropolis Quantum"
9        width={1200}
10        height={600}
11        preload
12      />
13    </div>
14  );
15}

Kiedy używać obrazów z public zamiast importów?

Gdy URL obrazu musi być znany podczas budowy:
- Obrazy w metadanych (Open Graph, Twitter)
- Tła CSS
Gdy obraz jest bardzo duży i rzadko używany:
- Duże grafiki, które pojawiają się tylko w specyficznych kontekstach
Gdy chcesz mieć bezpośredni link do pliku:
- Zasoby do pobrania
- Zasoby współdzielone z innymi aplikacjami

Obsługa różnych typów plików

SVG

Pliki SVG można umieszczać w katalogu public i używać ich jako zwykłych obrazów:

1export default function Icon() {
2  return (
3    <img src="/images/icons/search.svg" alt="Szukaj" width={24} height={24} />
4  );
5}

Alternatywnie, SVG można importować bezpośrednio w kodzie (nie przez katalog public), co pozwala na manipulację ich właściwościami:

1import SearchIcon from '@/public/images/icons/search.svg';
2
3export default function SearchButton() {
4  return (
5    <button className="search-button">
6      <SearchIcon className="icon" width={24} height={24} />
7      Szukaj
8    </button>
9  );
10}

Uwaga: Aby powyższy przykład działał, potrzebujesz dodatkowej konfiguracji, np. za pomocą @svgr/webpack.

Czcionki

Jak widzieliśmy w poprzednim rozdziale, pliki czcionek można przechowywać w katalogu public i używać za pomocą next/font/local:

1import localFont from 'next/font/local';
2
3export const quantumSans = localFont({
4  src: [
5    {
6      path: '../public/fonts/QuantumSans-Regular.woff2',
7      weight: '400',
8      style: 'normal',
9    },
10    {
11      path: '../public/fonts/QuantumSans-Bold.woff2',
12      weight: '700',
13      style: 'normal',
14    },
15  ],
16});

Filmy i audio

Pliki multimedialne również mogą być przechowywane w katalogu public:

1export default function IntroVideo() {
2  return (
3    <video
4      controls
5      width="100%"
6      poster="/images/video-poster.jpg"
7    >
8      <source src="/videos/intro.mp4" type="video/mp4" />
9      Twoja przeglądarka nie obsługuje odtwarzacza wideo.
10    </video>
11  );
12}

Pliki JSON

JSON przechowywane w public można ładować za pomocą fetch:

1// app/districts/page.tsx
2export default async function DistrictsPage() {
3  // Fetch danych z pliku JSON
4  const response = await fetch('http://localhost:3000/data/districts.json');
5  const districts = await response.json();
6
7  return (
8    <div>
9      <h1>Dzielnice Metropolis Quantum</h1>
10      <ul>
11        {districts.map((district) => (
12          <li key={district.id}>{district.name}</li>
13        ))}
14      </ul>
15    </div>
16  );
17}

Wskazówka: W rzeczywistych aplikacjach lepszym rozwiązaniem jest często importowanie danych JSON bezpośrednio w kodzie (np. import districts from '@/data/districts.json') lub przechowywanie ich w bazie danych.

Organizacja i najlepsze praktyki

1. Struktura katalogów

Utrzymuj logiczną strukturę katalogów, która odzwierciedla przeznaczenie zasobów:

1public/
2├── branding/       # Elementy związane z marką
3├── icons/          # Ikony systemowe
4├── images/         # Zdjęcia i grafiki
5├── videos/         # Pliki wideo
6├── fonts/          # Czcionki
7└── data/           # Dane statyczne (JSON, CSV)

2. Konwencje nazewnictwa

Stosuj spójne konwencje nazewnictwa:

Używaj kebab-case (hero-banner.jpg) zamiast spacji (hero banner.jpg)
Dodawaj sufiksy z rozmiarami dla różnych wariantów (logo-sm.png, logo-lg.png)
Używaj prefiksów dla grupowania (icon-home.svg, icon-user.svg)

3. Optymalizacja zasobów

Przed umieszczeniem zasobów w katalogu public, optymalizuj je:

Obrazy: Kompresuj za pomocą narzędzi jak TinyPNG, ImageOptim
SVG: Minimalizuj za pomocą SVGO
Wideo: Kompresuj do właściwych formatów i rozmiarów
Czcionki: Używaj WOFF2 jako preferowanego formatu

4. Cachowanie

Next.js 16 dodaje do plików z katalogu public nagłówek Cache-Control: public, max-age=0, bo takie pliki mogą się zmienić bez zmiany nazwy. Długie, niezmienne cachowanie dostają tylko pliki z /_next/static, które mają w nazwie skrót zawartości. Jeśli wiesz, że Twoje zasoby się nie zmieniają, ustaw własne nagłówki w pliku next.config.js:

1// next.config.js
2module.exports = {
3  async headers() {
4    return [
5      {
6        source: '/fonts/:path*',
7        headers: [
8          {
9            key: 'Cache-Control',
10            value: 'public, max-age=31536000, immutable',
11          },
12        ],
13      },
14      {
15        source: '/images/:path*',
16        headers: [
17          {
18            key: 'Cache-Control',
19            value: 'public, max-age=86400, stale-while-revalidate=31536000',
20          },
21        ],
22      },
23    ];
24  },
25};

Problemy i rozwiązania

Problem 1: Zbyt duży rozmiar katalogu public

Jeśli katalog public staje się zbyt duży, może to wpłynąć na czas deploymentu i zarządzanie zasobami.

Rozwiązanie:

Przenieś rzadko używane, duże zasoby do usług CDN (Content Delivery Network)
Stosuj strategie lazy loading dla zasobów
Optymalizuj wszystkie zasoby przed dodaniem ich do katalogu

Problem 2: Problemy z URL obrazów

Rozwiązanie:

Zawsze używaj ukośników na początku ścieżek (/images/logo.png, nie images/logo.png)
Unikaj spacji i znaków specjalnych w nazwach plików
Sprawdzaj wielkość liter w nazwach plików (systemy Linux są case-sensitive)

Problem 3: Niespójność w zarządzaniu zasobami

Rozwiązanie:

Stwórz i stosuj konwencje nazewnictwa dla całego zespołu
Dokumentuj strukturę katalogu public
Rozważ utworzenie komponentów abstrakcyjnych dla często używanych zasobów

Praktyczne przykłady

Przykład 1: System ikon z katalogu public

1// components/Icon.tsx
2type IconName = 'home' | 'search' | 'user' | 'settings' | 'menu';
3
4interface IconProps {
5  name: IconName;
6  size?: 'sm' | 'md' | 'lg';
7  color?: string;
8  className?: string;
9}
10
11const sizeMap = {
12  sm: { width: 16, height: 16 },
13  md: { width: 24, height: 24 },
14  lg: { width: 32, height: 32 },
15};
16
17export function Icon({
18  name,
19  size = 'md',
20  color = 'currentColor',
21  className = '',
22}: IconProps) {
23  const dimensions = sizeMap[size];
24
25  return (
26    <img
27      src={`/icons/${name}.svg`}
28      alt={`${name} icon`}
29      className={`icon icon-${name} ${className}`}
30      {...dimensions}
31      style={{ filter: `${color !== 'currentColor' ? `color(${color})` : ''}` }}
32    />
33  );
34}

Użycie:

1import { Icon } from '@/components/Icon';
2
3export default function Navbar() {
4  return (
5    <nav className="navbar">
6      <Icon name="home" size="sm" />
7      <Icon name="search" color="#3a86ff" />
8      <Icon name="user" className="user-icon" />
9    </nav>
10  );
11}

Przykład 2: System dynamicznego ładowania zdjęć z katalogu public

1// components/DistrictImage.tsx
2import Image from 'next/image';
3
4interface DistrictImageProps {
5  districtId: string;
6  alt: string;
7  className?: string;
8}
9
10export function DistrictImage({ districtId, alt, className = '' }: DistrictImageProps) {
11  return (
12    <div className={`district-image-container ${className}`}>
13      <Image
14        src={`/images/backgrounds/districts/${districtId}.jpg`}
15        alt={alt}
16        fill
17        className="district-image"
18        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
19      />
20    </div>
21  );
22}

Użycie:

1import { DistrictImage } from '@/components/DistrictImage';
2
3export default function DistrictCard({ district }) {
4  return (
5    <div className="district-card">
6      <DistrictImage
7        districtId={district.id}
8        alt={`Dzielnica ${district.name}`}
9      />
10      <h3>{district.name}</h3>
11      <p>{district.description}</p>
12    </div>
13  );
14}

Przykład 3: Konfiguracja SEO z zasobami z public

1// app/districts/[id]/page.tsx
2import { Metadata } from 'next';
3
4interface Props {
5  params: Promise<{ id: string }>;
6}
7
8export async function generateMetadata({ params }: Props): Promise<Metadata> {
9  const districtId = (await params).id;
10  const district = await fetchDistrictData(districtId);
11
12  return {
13    title: `${district.name} | Metropolis Quantum`,
14    description: district.description,
15    openGraph: {
16      images: [{
17        url: `/images/backgrounds/districts/${districtId}.jpg`,
18        width: 1200,
19        height: 630,
20        alt: district.name,
21      }],
22      type: 'website',
23    },
24    twitter: {
25      card: 'summary_large_image',
26      images: [`/images/backgrounds/districts/${districtId}.jpg`],
27    },
28  };
29}
30
31export default async function DistrictPage({ params }: Props) {
32  const district = await fetchDistrictData((await params).id);
33
34  return (
35    <div className="district-page">
36      <h1>{district.name}</h1>
37      {/* Reszta zawartości strony */}
38    </div>
39  );
40}
41
42// Funkcja pobierająca dane dzielnicy
43async function fetchDistrictData(id: string) {
44  // W rzeczywistej aplikacji: pobieranie danych z API lub bazy
45  const response = await fetch(`http://localhost:3000/data/districts/${id}.json`);
46  return response.json();
47}

Integracja z CDN

Dla większych aplikacji warto rozważyć przeniesienie zasobów z katalogu public do zewnętrznego CDN (Content Delivery Network), co zapewni szybsze ładowanie na całym świecie.

Konfiguracja ścieżki bazowej w Next.js

1// next.config.js
2module.exports = {
3  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://cdn.twojadomena.com' : '',
4};

Komponent do zarządzania ścieżkami zasobów

1// utils/assetPath.ts
2export function getAssetPath(path: string): string {
3  const cdnUrl = process.env.NEXT_PUBLIC_CDN_URL || '';
4  return `${cdnUrl}${path}`;
5}

Użycie:

1import { getAssetPath } from '@/utils/assetPath';
2
3export default function Logo() {
4  return (
5    <img
6      src={getAssetPath('/images/logo.png')}
7      alt="Metropolis Quantum Logo"
8      width={200}
9      height={50}
10    />
11  );
12}

Zaawansowane techniki

1. Dynamiczne importy zasobów

Możesz dynamicznie importować zasoby z katalogu public podczas budowy:

1// utils/getDistrictData.ts
2import fs from 'fs';
3import path from 'path';
4
5export function getDistrictData() {
6  const filePath = path.join(process.cwd(), 'public', 'data', 'districts.json');
7  const fileContents = fs.readFileSync(filePath, 'utf8');
8  return JSON.parse(fileContents);
9}

2. Generowanie zasobów podczas budowy

Możesz generować zasoby statyczne podczas budowy aplikacji:

1// scripts/generate-sitemap.js
2const fs = require('fs');
3const path = require('path');
4
5// Funkcja generująca sitemap.xml
6function generateSitemap(routes) {
7  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
8  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
9    ${routes.map(route => `
10      <url>
11        <loc>https://metropolisquantum.pl${route}</loc>
12        <lastmod>${new Date().toISOString()}</lastmod>
13      </url>
14    `).join('')}
15  </urlset>
16  `;
17
18  fs.writeFileSync(
19    path.join(process.cwd(), 'public', 'sitemap.xml'),
20    sitemap
21  );
22}
23
24// Lista tras aplikacji
25const routes = [
26  '/',
27  '/districts',
28  '/about',
29  '/contact',
30  // inne trasy
31];
32
33generateSitemap(routes);

Następnie możesz dodać ten skrypt do procesu budowania w package.json:

1{
2  "scripts": {
3    "build": "node scripts/generate-sitemap.js && next build"
4  }
5}

Bezpieczeństwo i uwagi dotyczące zasobów publicznych

1. Unikaj przechowywania poufnych informacji

Katalog public jest dostępny publicznie, więc nigdy nie należy przechowywać w nim:

Kluczy API
Poufnych danych
Plików konfiguracyjnych z wrażliwymi informacjami

2. Ochrona przed hotlinkiem

Możesz chronić swoje zasoby przed hotlinkingiem (używaniem ich na innych stronach) za pomocą nagłówków HTTP:

1// next.config.js
2module.exports = {
3  async headers() {
4    return [
5      {
6        source: '/images/:path*',
7        headers: [
8          {
9            key: 'Referrer-Policy',
10            value: 'same-origin',
11          },
12        ],
13      },
14    ];
15  },
16};

3. Content Security Policy (CSP)

Warto skonfigurować CSP, aby chronić swoją aplikację:

1// next.config.js
2module.exports = {
3  async headers() {
4    return [
5      {
6        source: '/:path*',
7        headers: [
8          {
9            key: 'Content-Security-Policy',
10            value: "default-src 'self'; img-src 'self' https://cdn.twojadomena.com; font-src 'self' https://fonts.gstatic.com",
11          },
12        ],
13      },
14    ];
15  },
16};

Podsumowanie

Katalog public w Next.js 16 jest potężnym narzędziem do zarządzania zasobami statycznymi w aplikacji. Odpowiednia organizacja, konwencje nazewnictwa i optymalizacja zasobów mogą znacząco poprawić wydajność i utrzymywalność projektu.

Kluczowe punkty:

Struktura i organizacja - utrzymuj logiczną strukturę katalogów i spójne konwencje nazewnictwa
Optymalizacja - kompresuj i optymalizuj zasoby przed umieszczeniem ich w katalogu
Abstrakcja - twórz komponenty abstrakcyjne do zarządzania dostępem do zasobów
Bezpieczeństwo - pamiętaj, że zawartość katalogu public jest dostępna publicznie
Skalowanie - dla większych aplikacji rozważ użycie CDN

Podobnie jak w centralnej bazie zasobów Metropolis Quantum, dobrze zarządzany katalog public zapewnia sprawny dostęp do wszystkich niezbędnych elementów, utrzymując porządek i wydajność całego systemu.

W następnym rozdziale przyjrzymy się ikonom, favicon i metadanym wizualnym, które są kluczowymi elementami tożsamości wizualnej Twojej aplikacji Next.js 16.

Kod do tej lekcji: app/page.tsx

1// CSS Performance Optimization - Cyberpunk Edition
2'use client';
3
4export default function PerformanceDemo() {
5  return (
6    <div style={{
7      minHeight: '100vh',
8      background: 'linear-gradient(135deg, #0f0f23, #1a1a2e)',
9      color: '#ffffff',
10      padding: '3rem 2rem'
11    }}>
12      <h1 style={{
13        fontSize: '3rem',
14        textAlign: 'center',
15        background: 'linear-gradient(45deg, #64ffda, #7c4dff)',
16        WebkitBackgroundClip: 'text',
17        WebkitTextFillColor: 'transparent',
18        marginBottom: '3rem'
19      }}>
20        CSS Performance Optimization
21      </h1>
22
23      {/* Will-change for animated elements */}
24      <section style={{
25        maxWidth: '1200px',
26        margin: '0 auto 3rem',
27        background: 'rgba(255,255,255,0.05)',
28        padding: '2rem',
29        borderRadius: '1rem',
30        border: '1px solid rgba(100,255,218,0.2)'
31      }}>
32        <h2 style={{color: '#64ffda', marginBottom: '1.5rem'}}>1. will-change Property</h2>
33        <div style={{
34          width: '200px',
35          height: '200px',
36          background: 'linear-gradient(135deg, #64ffda, #7c4dff)',
37          borderRadius: '1rem',
38          willChange: 'transform',
39          animation: 'float 3s ease-in-out infinite'
40        }}></div>
41        <p style={{color: '#b0bec5', marginTop: '1rem'}}>
42          Ten element używa <code style={{background: 'rgba(0,0,0,0.5)', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', color: '#64ffda'}}>will-change: transform</code> dla lepszej wydajności animacji
43        </p>
44      </section>
45
46      {/* Transform zamiast left/top */}
47      <section style={{
48        maxWidth: '1200px',
49        margin: '0 auto 3rem',
50        background: 'rgba(255,255,255,0.05)',
51        padding: '2rem',
52        borderRadius: '1rem',
53        border: '1px solid rgba(100,255,218,0.2)'
54      }}>
55        <h2 style={{color: '#64ffda', marginBottom: '1.5rem'}}>2. Transform vs Position</h2>
56        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '2rem'}}>
57          <div>
58            <h3 style={{color: '#7c4dff', marginBottom: '1rem'}}>Wolne (position)</h3>
59            <div style={{
60              position: 'relative',
61              width: '150px',
62              height: '150px',
63              background: '#ff0080',
64              borderRadius: '0.75rem'
65            }}>
66              <div style={{fontSize: '0.875rem', padding: '1rem', color: '#fff'}}>
67                Uses position: relative; top/left
68              </div>
69            </div>
70          </div>
71
72          <div>
73            <h3 style={{color: '#7c4dff', marginBottom: '1rem'}}>Szybkie (transform)</h3>
74            <div style={{
75              width: '150px',
76              height: '150px',
77              background: '#00ff7f',
78              borderRadius: '0.75rem',
79              transform: 'translateZ(0)'
80            }}>
81              <div style={{fontSize: '0.875rem', padding: '1rem', color: '#0f0f23', fontWeight: 600}}>
82                Uses transform: translate()
83              </div>
84            </div>
85          </div>
86        </div>
87      </section>
88
89      {/* Contain property */}
90      <section style={{
91        maxWidth: '1200px',
92        margin: '0 auto 3rem',
93        background: 'rgba(255,255,255,0.05)',
94        padding: '2rem',
95        borderRadius: '1rem',
96        border: '1px solid rgba(100,255,218,0.2)'
97      }}>
98        <h2 style={{color: '#64ffda', marginBottom: '1.5rem'}}>3. CSS Containment</h2>
99        <div style={{
100          contain: 'layout style paint',
101          background: 'rgba(124,77,255,0.2)',
102          padding: '1.5rem',
103          borderRadius: '0.75rem',
104          border: '1px solid rgba(124,77,255,0.5)'
105        }}>
106          <p style={{color: '#b0bec5', lineHeight: 1.6}}>
107            Ten kontener używa <code style={{background: 'rgba(0,0,0,0.5)', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', color: '#7c4dff'}}>contain: layout style paint</code>
108            <br/><br/>
109            Isolates layout changes to this container only, improving rendering performance.
110          </p>
111        </div>
112      </section>
113
114      {/* Content-visibility */}
115      <section style={{
116        maxWidth: '1200px',
117        margin: '0 auto 3rem',
118        background: 'rgba(255,255,255,0.05)',
119        padding: '2rem',
120        borderRadius: '1rem',
121        border: '1px solid rgba(100,255,218,0.2)'
122      }}>
123        <h2 style={{color: '#64ffda', marginBottom: '1.5rem'}}>4. content-visibility</h2>
124        {[1, 2, 3, 4, 5].map(i => (
125          <div key={i} style={{
126            contentVisibility: 'auto',
127            containIntrinsicSize: '0 200px',
128            marginBottom: '1.5rem',
129            background: 'rgba(100,255,218,0.1)',
130            padding: '1.5rem',
131            borderRadius: '0.75rem',
132            border: '1px solid rgba(100,255,218,0.3)'
133          }}>
134            <h3 style={{color: '#64ffda', marginBottom: '0.75rem'}}>Section {i}</h3>
135            <p style={{color: '#b0bec5', lineHeight: 1.6}}>
136              This section uses content-visibility: auto. The browser renders it only when in the viewport,
137              which significantly improves performance with large content lists.
138            </p>
139          </div>
140        ))}
141      </section>
142
143      {/* Critical CSS */}
144      <section style={{
145        maxWidth: '1200px',
146        margin: '0 auto 3rem',
147        background: 'rgba(255,255,255,0.05)',
148        padding: '2rem',
149        borderRadius: '1rem',
150        border: '1px solid rgba(100,255,218,0.2)'
151      }}>
152        <h2 style={{color: '#64ffda', marginBottom: '1.5rem'}}>5. Critical CSS Best Practices</h2>
153        <ul style={{color: '#b0bec5', lineHeight: 2, paddingLeft: '1.5rem'}}>
154          <li>Inline krytyczne style w &lt;head&gt;</li>
155          <li>Lazy-load non-critical CSS</li>
156          <li>Use CSS-in-JS for components</li>
157          <li>Minifikuj i kompresuj CSS</li>
158          <li>Remove unused styles (PurgeCSS)</li>
159          <li>Use CDN for faster delivery</li>
160        </ul>
161      </section>
162
163      <style jsx global>{`
164        @keyframes float {
165          0%, 100% { transform: translateY(0); }
166          50% { transform: translateY(-20px); }
167        }
168      `}</style>
169    </div>
170  );
171}

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. CSS Custom Properties (variables) definiuje się używając:
2. SASS/SCSS to:

To 2 z 3 pytań do tej lekcji. Pozostałe rozwiążesz w grze.

Zadania praktyczne w grze

Edytor kodu
Utwórz CSS z uwzględnieniem accessibility: focus styles, prefers-reduced-motion, high contrast
Klikanie w kolejności
Ułóż deklarację CSS Grid template:
Układanie w pionie
Ułóż etapy optymalizacji obrazów przez komponent next/image w prawidłowej kolejności:

Czym jest katalog public w Next.js 16?

Struktura katalogu public

Dostęp do zasobów z katalogu public

W komponentach React

W CSS

W metadanych

Komponent Image a katalog public

Kiedy używać obrazów z public zamiast importów?

Obsługa różnych typów plików

SVG

Czcionki

Filmy i audio

Pliki JSON

Organizacja i najlepsze praktyki

1. Struktura katalogów

2. Konwencje nazewnictwa

3. Optymalizacja zasobów

4. Cachowanie

Problemy i rozwiązania

Problem 1: Zbyt duży rozmiar katalogu public

Problem 2: Problemy z URL obrazów

Problem 3: Niespójność w zarządzaniu zasobami

Praktyczne przykłady

Przykład 1: System ikon z katalogu public

Przykład 2: System dynamicznego ładowania zdjęć z katalogu public

Przykład 3: Konfiguracja SEO z zasobami z public

Integracja z CDN

Konfiguracja ścieżki bazowej w Next.js

Komponent do zarządzania ścieżkami zasobów

Zaawansowane techniki

1. Dynamiczne importy zasobów

2. Generowanie zasobów podczas budowy

Bezpieczeństwo i uwagi dotyczące zasobów publicznych

1. Unikaj przechowywania poufnych informacji

2. Ochrona przed hotlinkiem

3. Content Security Policy (CSP)

Podsumowanie

Sprawdź się

Zadania praktyczne w grze

Przydatne artykuły