Spis Treści

1. Scss
   • 1.1. Instalacja Scss
   • 1.2. Organizacja plików
   • 1.3. Przykład użycia w komponencie
   • 1.4. Schemat pisania Scss
2. Tailwind CSS
   • 2.1. Instalacja
   • 2.2. Konfiguracja
   • 2.3. Pisanie stylów z Tailwind CSS
3. StyleX
   • 3.1. Instalacja
   • 3.2. Konfiguracja
   • 3.3. Tworzenie stylów
4. Podsumowanie
   • 4.1. Często zadawane pytania

Sprawdź poprzedni wpis: Optymalizacje w Next.js - Jak przyspieszyć swoją stronę?

Jeśli interesuje Cię, jak nadać Twojej stronie w Next.js unikalny i przyciągający wzrok wygląd, to świetnie trafiłeś! W tym wpisie przedstawię Ci nie tylko praktyczne podejścia do stylowania, ale też pokażę, jak wykorzystać pełen potencjał SCSS, Tailwind CSS i StyleX. Przygotuj się na porcję solidnych wskazówek, które sprawią, że Twoje projekty będą nie tylko piękne, ale i funkcjonalne. Dowiesz się, jak te narzędzia mogą całkowicie zmienić Twoje podejście do stylizacji i pomóc Ci osiągnąć efekt "wow"! Zapraszam do lektury pełnej inspiracji i kreatywnych rozwiązań.

Scss

Wykorzystanie scss w aplikacjach Next.js to nie tylko kwestia estetyki, ale także efektywności i organizacji kodu. Preprocesor Scss, ze swoimi zaawansowanymi funkcjonalnościami takimi jak zmienne, mieszanki czy zagnieżdżanie, pozwala na tworzenie bardziej zorganizowanego i łatwego do utrzymania kodu CSS. Scss otwiera nowe możliwości w projektowaniu responsywnych i dynamicznych interfejsów użytkownika.

Instalacja Scss

Aby rozpocząć pracę z SCSS w Next.js, musimy najpierw zainstalować odpowiednie zależności. W tym celu użyjemy pnpm do zainstalowania sass. Po zainstalowaniu możemy bezpośrednio zacząć używać plików .scss lub .sass w naszym projekcie.

pnpm add -D sass

Organizacja plików

Organizacja plików stylów w projekcie Next.js jest kluczowa dla utrzymania porządku i efektywności pracy. W tym kontekście, warto stosować pewne praktyki, które pomagają w zarządzaniu stylami, szczególnie w większych projektach.

Folder styles w src:

variables.scss: Ten plik służy jako centralne miejsce na zmienne globalne, takie jak kolory, typografia, breakpointy itd. Przechowywanie tych wartości w jednym miejscu ułatwia zarządzanie nimi i zapewnia spójność w całym projekcie

$breakpoints: (
	"ultra-mini": 350px,
	"mini": 400px,
	"ultra-smaller": 575px,
	"smaller": 768px,
	"small": 1024px,
	"mini-large": 1150px,
	"large": 1300px,
) !default; 
 
//colors
$white: #fff;
$gray: #f4f4f4;
$gray-2: #9699a3;
$gray-3: #e4e6eb;

global.scss: W tym pliku można umieścić globalne style, które będą stosowane w całej aplikacji, na przykład resetowanie stylów czy globalne reguły.

Przechowywanie stylów związanych z komponentami:

Rozdzielenie stylów komponentu na dwa pliki, base.module.scss i rwd.module.scss, w projektach Next.js, jest praktyką, która pomaga w utrzymaniu czystości i modularności kodu. Pozwala na lepsze zarządzanie stylami, szczególnie w kontekście responsywności. Oto szczegółowe wyjaśnienie tego podejścia:

1. base.module.scss

Podstawowy styl komponentu: Ten plik zawiera główne style dla danego komponentu. Obejmuje to układ (layout), typografię, kolory, marginesy, paddingi i inne podstawowe cechy wizualne.Jeśli tworzysz komponent Button, base.module.scss będzie zawierać styl dla wyglądu przycisku, takie jak jego rozmiar, kolor tła, kolor tekstu, border itp.

Organizacja i czystość kodu: Dzięki umieszczeniu podstawowych stylów w osobnym pliku, kod staje się bardziej czytelny i łatwiejszy w utrzymaniu. Zmiany dotyczące wyglądu podstawowego komponentu są ograniczone tylko do tego pliku.

Importowanie zmiennych: W base.module.scss można importować zmienne z _variables.scss, co pozwala na wykorzystanie globalnych wartości, takich jak kolory, rozmiary fontów itd.

2. rwd.module.scss

Stylowanie responsywne: Plik rwd.module.scss w kontekście projektów Next.js służy do aktualizacji i dostosowywania stylów komponentów w zależności od rozmiaru ekranu urządzenia. Jest to kluczowe dla tworzenia responsywnych aplikacji, które wyglądają dobrze i są funkcjonalne na różnych typach urządzeń.Dostosowujemy tutaj układu, rozmiaru, ukrywanie lub wyświetlanie elementów itd., na różnych urządzeniach (telefony, tablety, laptopy, duże ekrany).

Modułowość i separacja: Dzięki temu podejściu, łatwiej jest zarządzać i utrzymywać style, ponieważ zmiany responsywne są izolowane od podstawowych stylów komponentu.

Importowanie zmiennych: W tym pliku wykorzystuje się zapytania media, często korzystając z breakpointów zdefiniowanych w _variables.scss, aby dostosować styl komponentu do różnych rozmiarów ekranów.

Przykład: Załóżmy, że masz komponent Button, który w base.module.scss ma określony domyślny rozmiar. W rwd.module.scss możesz zdefiniować, że na ekranach komputerów stacjonarnych przycisk powinien być większy.

Przykład użycia w komponencie

import Link from "next/link";
import type { CategoryProps } from "./types";
 
import styles from "./rwd.module.scss";
const { wrapper, wrapperTitle } = styles;
 
export const Category = ({ title, pageUrl }: CategoryProps) => {
	return (
		<li className={wrapper}>
			<Link href={`/blog/${pageUrl}`} className={wrapperTitle}>
				{title}
			</Link>
		</li>
	);
};

Schemat pisania Scss

Schemat, który został przedstawiony na załączonym obrazku, przedstawia strukturę organizacji CSS. Układ ten może być szczególnie przydatny w preprocesorach takich jak SCSS, ponieważ pozwala na lepszą organizację i łatwiejsze zarządzanie stylami.Stosowanie takiego schematu ma kilka znaczących zalet:

1. Łatwość utrzymania:
   • Ułatwia wprowadzanie i przeglądanie zmian w stylach, ponieważ podobne właściwości są zebrane w jednym miejscu.
2. Czytelność:
   • Kod staje się bardziej czytelny dla deweloperów, którzy mogą szybko zorientować się w strukturze stylów bez konieczności przeszukiwania całego pliku.
3. Spójność:
   • Ułatwia zachowanie spójności w stylach przez całą aplikację, ponieważ deweloperzy mogą łatwiej stosować i ponownie używać podobnych wzorców.

Tailwind CSS

Integracja Tailwind CSS z Next.js stanowi potężne połączenie, umożliwiające tworzenie responsywnych i estetycznie zaawansowanych aplikacji internetowych. Tailwind CSS, będący ramą CSS o podejściu utility-first, zapewnia elastyczność i szybkość w projektowaniu interfejsów użytkownika. Z kolei Next.js, jako framework bazujący na React, oferuje efektywny routing i serwerowe renderowanie komponentów. Połączenie tych dwóch technologii pozwala na tworzenie wydajnych, szybkich i pięknych aplikacji internetowych.

Instalacja

W katalogu projektu wykonaj następujące polecenia:

pnpm add -D tailwindcss postcss autoprefixernpx tailwindcss init -p

To zainstaluje Tailwind CSS wraz z potrzebnymi zależnościami.

Konfiguracja

W pliku tailwind.config.js, skonfiguruj ścieżki do wszystkich plików HTML, JS, JSX, TS, i TSX, gdzie będziesz używać Tailwind:

module.exports = {
	content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 
	// inne
};

W pliku głównym CSS (zazwyczaj globals.css) zaimportuj stylowanie Tailwind:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities'

Pisanie stylów z Tailwind CSS

Tailwind CSS to framework CSS oparty na klasach utility, co oznacza, że stylizacja elementów odbywa się poprzez dodawanie klas bezpośrednio w kodzie HTML, JSX lub TSX. Oto jak to robić:

1. Zrozumienie klas utility: Tailwind używa klas utility do wszystkiego, od marginesów i paddingów, po kolory i fonty. Na przykład, klasa text-center służy do centrowania tekstu, a bg-blue-500 nadaje elementowi niebieskie tło.
2. Stosowanie klas w komponentach: Aby zastosować styl, wystarczy dodać odpowiednie klasy do elementów. Na przykład:

<button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">  Kliknij mnie</button>

3. Responsywność: Tailwind zawiera responsywne warianty większości klas, które można aktywować za pomocą prefiksów takich jak md:, lg:, itp. Na przykład, md:bg-red-500 zmieni tło na czerwone tylko na średnich i większych ekranach.
4. Dostosowywanie: Można dostosować konfigurację Tailwind, aby dodać własne kolory, rozmiary, itp. Może to zrobić przez edycję pliku tailwind.config.js.

StyleX

StyleX to innowacyjny system stylizacji, który łączy wygodę korzystania z bibliotek CSS-in-JS z wydajnością i skalowalnością statycznego CSS. Został starannie zaprojektowany, aby sprostać wymaganiom dużych aplikacji, reużywalnych bibliotek komponentów oraz kodu opartego na statycznym typowaniu.

Podstawowe cechy StyleX:

1. Ekspresywność i determinizm: StyleX wspiera bogaty podzbiór CSS, unikając skomplikowanych selektorów i zapewniając brak konfliktów specyficzności w generowanym CSS.
2. Optymalizacja i organizacja: Transformuje i optymalizuje style do "atomowych" nazw klas CSS, co eliminuje potrzebę zarządzania oddzielnymi klasami pomocniczymi.
3. Łączenie stylów: Umożliwia scalanie stylów przez granice plików i komponentów, idealne dla bibliotek komponentów umożliwiających personalizację.
4. Bezpieczeństwo typów: StyleX jest w pełni typowany, oferując narzędzia do precyzyjnego kontrolowania akceptowalnych właściwości i wartości w komponentach.
5. Zalety StyleX:
6. Szybkość: StyleX zapewnia wysoką wydajność zarówno podczas kompilacji, jak i w czasie działania aplikacji.
7. Skalowalność: Doskonale sprawdza się w dużych kodach źródłowych, minimalizując rozmiar wiązek CSS.
8. Przewidywalność: Automatycznie zarządza specyficznością selektorów CSS, zapewniając niezawodność stosowania stylów.

Jak działa StyleX?

StyleX to zestaw narzędzi obejmujących plugin do Babel, niewielką bibliotekę runtime, plugin ESLint oraz integracje z bundlerami i frameworkami. Kluczowym elementem jest plugin Babel, który znajduje, ekstrahuje i przekształca style w atomowe nazwy klas w czasie kompilacji.

Instalacja

Do naszej aplikacji NextJS potrzebujemy dodać kilka zależności, aby uruchomić StyleX:

pnpm add @stylexjs/stylex @stylexjs/open-props @stylexjs/babel-plugin @stylexjs/nextjs-plugin

1. @stylexjs/open-props: Zapakowane CSS (np. kolory, czcionki) używane z StyleX, ułatwiające tworzenie spójnego designu.
2. @stylexjs/babel-plugin: Plugin do Babel umożliwiający integrację StyleX z konfiguracją Babel w projekcie.
3. @stylexjs/nextjs-plugin: Wtyczka do Next.js wspierająca StyleX, umożliwiająca łatwą integrację z niestandardową konfiguracją Babel w Next.js.

Konfiguracja

Utwórz nowy plik .babelrc.js w katalogu głównym aplikacji NextJS z poniższą konfiguracją:

module.exports = {
	presets: ["next/babel"],
	plugins: [
		[
			"@stylexjs/babel-plugin",
			{
				dev: process.env.NODE_ENV === "development",
				runtimeInjection: false,
				genConditionalClasses: true,
				treeshakeCompensation: true,
				unstable_moduleResolution: { type: "commonJS", rootDir: __dirname },
			},
		],
	],
};

Skonfiguruj plik next.config.js do używania StyleX poprzez plugin @stylexjs/nextjs-plugin:

/** @type {import('next').NextConfig} */ const stylexPlugin = require("@stylexjs/nextjs-plugin");
const nextConfig = { pageExtensions: ["js", "jsx", "ts", "tsx"] };
module.exports = stylexPlugin({ rootDir: __dirname })(nextConfig);

Tworzenie stylów

Po instalacji StyleX, możesz zacząć tworzyć style dla swoich komponentów. StyleX wykorzystuje podejście podobne do CSS-in-JS, co pozwala na definiowanie styli bezpośrednio w komponentach.

Przykładowe style:

import stylex from "@stylexjs/stylex";
const styles = stylex.create({
	button: {
		backgroundColor: "blue",
		color: "white",
		padding: "10px 15px",
		borderRadius: "5px",
		":hover": { backgroundColor: "darkblue" },
	},
});
export const Button = () => {
	return <button className={stylex(styles.button)}>Click Me</button>;
};

Dynamiczne stylowanieStyleX umożliwia także dynamiczne zmiany stylów na podstawie właściwości komponentu lub stanu. Możesz zdefiniować funkcję, która zwraca odpowiedni zestaw stylów.

export const Button = ({ primary }: ButtonProps) => {
	const dynamicStyle = stylex(styles.button, { backgroundColor: primary ? "navy" : "gray" });
	return <button className={dynamicStyle}>Click Me</button>;
};

Podsumowanie

Podsumowując, wiesz już, że Next.js oferuje trzy główne sposoby stylowania: SCSS, Tailwind CSS i StyleX. SCSS daje Ci kontrolę i zaawansowane możliwości w zarządzaniu CSS. Tailwind CSS natomiast przynosi szybkość i prostotę dzięki klasom utility, świetnie nadając się do szybkich i efektywnych projektów. StyleX to hybrydowy sposób, który łączy zalety CSS-in-JS z wydajnością statycznego CSS, idealny dla skomplikowanych aplikacji. Te metody stylowania to klucz do tworzenia wyjątkowych i funkcjonalnych interfejsów w Twoich projektach Next.js.

To już ostatni wpis z serii wprowadzającej do Next.JS. Jeśli trafiłeś tutaj przypadkowo chciałbym gorąco zachęcić cię do przejścia przez tą ścieżkę od samego początku zaczynając od Wprowadzenie do Next.js 13 i jego nowości. Mam nadzieję, że moje poradniki pokazały ci jak świetnym frameworkiem jest Next.js i dlaczego to właśnie on zrewolucjonizuje rynek e-commerce.

Często zadawane pytania

1. Jakie są zalety używania SCSS w Next.js? SCSS zapewnia zaawansowane funkcje, takie jak zmienne, mieszanki, zagnieżdżanie, co ułatwia tworzenie zorganizowanego i łatwego do utrzymania kodu CSS. Pozwala to na efektywniejsze projektowanie responsywnych interfejsów użytkownika.
2. Czy do pracy z SCSS w Next.js potrzebuję dodatkowych zależności? Tak, aby używać SCSS w Next.js, musisz zainstalować sass za pomocą polecenia pnpm add -D sass.
3. Jak mogę zorganizować pliki SCSS w projekcie Next.js? Zaleca się utworzenie folderu styles w /src, z plikami takimi jak _variables.scss dla zmiennych globalnych i global.scss dla globalnych stylów. Warto aby każdy komponent miał pliki base.module.scss i rwd.module.scss pomaga w utrzymaniu czystości i modularności kodu.
4. Czym różni się StyleX od innych systemów stylizacji? StyleX łączy wygodę korzystania z CSS-in-JS z wydajnością statycznego CSS. Jest idealny dla dużych aplikacji i bibliotek komponentów, oferując ekspresywność, optymalizację, skalowalność oraz bezpieczeństwo typów.
5. Co to jest Tailwind CSS i jak można go zintegrować z Next.js? Tailwind CSS to framework CSS o podejściu utility-first, który umożliwia szybkie projektowanie interfejsów użytkownika. Można go zintegrować z Next.js poprzez instalację pnpm add -D tailwindcss postcss autoprefixer i konfigurację pliku tailwind.config.js.
6. Jak mogę zainstalować i skonfigurować StyleX w projekcie Next.js? Aby uruchomić StyleX musimy dodać kilka zależnośći pnpm add @stylexjs/stylex @stylexjs/open-props @stylexjs/babel-plugin @stylexjs/nextjs-plugin. Konfiguracja obejmuje modyfikacje plików .babelrc.js i next.config.js w katalogu głównym aplikacji.
7. Czy StyleX umożliwia dynamiczne stylowanie? Tak, StyleX umożliwia dynamiczne zmiany stylów na podstawie właściwości komponentu lub stanu, co daje dużą elastyczność w projektowaniu interfejsu użytkownika.
8. Jakie są główne korzyści z używania Tailwind CSS w Next.js? Tailwind CSS oferuje szybkość i elastyczność w projektowaniu interfejsów użytkownika dzięki klasom utility. Umożliwia łatwe tworzenie responsywnych aplikacji i jest dobrze zintegrowany z Next.js.
9. Czy StyleX jest odpowiedni dla każdego projektu? StyleX jest szczególnie przydatny w dużych aplikacjach i projektach z wielokrotnie używanymi komponentami. Może być jednak nadmiernie skomplikowany dla mniejszych projektów, gdzie prostsze rozwiązania mogą być bardziej odpowiednie.