Stylizacja w Next.js

Stylizacja w aplikacjach Next.js jest niezwykle elastyczna, dzięki czemu masz do dyspozycji wiele różnych metod, które pozwalają na nadawanie wyglądu Twoim komponentom i stronach. W tym artykule omówimy różne podejścia do stylizacji w Next.js, takie jak CSS, SASS, CSS-in-JS, a także popularne biblioteki do stylowania, takie jak Styled Components i Emotion. Pokażemy, jak wykorzystać CSS Modules oraz jak skonfigurować style globalne w aplikacji Next.js.

1. Style w Next.js: CSS, SASS, CSS-in-JS

Next.js wspiera różne techniki stylowania, od klasycznego CSS, przez SASS, aż po nowoczesne podejścia oparte na CSS-in-JS. Każde z tych podejść ma swoje zalety i może być użyteczne w różnych scenariuszach.

CSS

Standardowy plik CSS to jedna z najprostszych metod dodawania stylów do aplikacji w Next.js. Możesz używać zwykłych plików .css, a Next.js automatycznie zadba o ich załadowanie i optymalizację.

Przykład:

  1. Stwórz plik CSS, np. styles/global.css, i zaimportuj go do pliku _app.js:
				
					/* styles/global.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}
h1 {
  color: #333;
}
  1. Zaimportuj plik CSS w pliku _app.js, który znajduje się w katalogu pages:
				
					// pages/_app.js
import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Next.js obsłuży załadowanie pliku CSS globalnie, dzięki czemu wszystkie strony aplikacji będą stosowały te same style.

SASS

SASS to preprocesor CSS, który pozwala na używanie zmiennych, zagnieżdżonych selektorów i wielu innych zaawansowanych funkcji. Next.js wspiera SASS „out of the box”, więc wystarczy zainstalować odpowiednią paczkę, aby zacząć korzystać z SASS.

Instalacja SASS:

W terminalu uruchom polecenie, aby zainstalować SASS:

				
					npm install sass

Przykład:

  1. Stwórz plik SASS, np. styles/global.scss:
				
					/* styles/global.scss */
$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

h1 {
  color: $primary-color;
}
  1. Zaimportuj plik SASS w pliku _app.js:
				
					// pages/_app.js
import '../styles/global.scss';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Teraz możesz używać SASS w swojej aplikacji Next.js, korzystając z pełni możliwości preprocesora.

CSS-in-JS

CSS-in-JS to podejście, które pozwala na definiowanie stylów bezpośrednio w plikach JavaScript. Jest to szczególnie popularne w nowoczesnych aplikacjach React, ponieważ umożliwia łatwą manipulację stylami zależnie od stanu komponentu.

Dwa najpopularniejsze rozwiązania CSS-in-JS to Styled Components i Emotion.

2. Wykorzystanie CSS Modules w Next.js

CSS Modules to podejście, które pozwala na izolowanie stylów dla każdego komponentu. Dzięki temu style są lokalne i nie kolidują ze sobą, co pomaga w utrzymaniu porządku w większych aplikacjach. Next.js wspiera CSS Modules domyślnie, co oznacza, że możesz z łatwością tworzyć style dla poszczególnych komponentów.

Jak działa CSS Modules?

W Next.js wystarczy, że stworzysz plik CSS z rozszerzeniem .module.css, a Next.js automatycznie zadba o lokalne scoping (izolowanie stylów).

Przykład:

  1. Stwórz plik CSS dla komponentu, np. styles/Home.module.css:
				
					/* styles/Home.module.css */
.container {
  text-align: center;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 2rem;
}
  1. Zaimportuj te style w komponencie Home:
				
					// pages/index.js
import styles from '../styles/Home.module.css';

const Home = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Witaj w Next.js!</h1>
    </div>
  );
}

export default Home;

W tym przykładzie styles.container i styles.title odnoszą się do klas CSS, które zostały zdefiniowane w pliku .module.css. Dzięki CSS Modules, klasy CSS będą miały unikalne nazwy, które są generowane automatycznie, co zapobiega konfliktom w globalnych stylach.

Korzyści z używania CSS Modules:

  • Izolacja stylów: Każdy komponent ma swoje style, które nie wpływają na inne komponenty.
  • Prosta składnia: Możesz używać zwykłych plików CSS, ale zyskujesz korzyści wynikające z lokalności klas.
  • Bezpieczeństwo: Style są automatycznie haszowane, więc nie musisz martwić się o kolizje nazw klas.

3. Instalacja i konfiguracja stylów globalnych

Czasem musisz używać globalnych stylów w całej aplikacji (np. dla fundamentów UI, kolorów czy czcionek). Next.js pozwala na łatwe zarządzanie globalnymi stylami.

Jak skonfigurować style globalne?

Najprostszym sposobem jest stworzenie pliku CSS lub SASS i zaimportowanie go w pliku _app.js. Wtedy style będą dostępne w całej aplikacji.

Przykład konfiguracji globalnych stylów:

  1. Stwórz plik styles/globals.css:
				
					/* styles/globals.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

a {
  text-decoration: none;
  color: inherit;
}
  1. Zaimportuj plik w _app.js:
				
					// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Teraz style globalne będą dostępne w całej aplikacji Next.js.

Stylowanie globalnych elementów

Jeśli chcesz stylować elementy, które znajdują się na poziomie całej aplikacji (np. body, html, a), powinieneś używać właśnie globalnych plików CSS. Dzięki temu możesz ustawić wspólne zasady wyglądu aplikacji, np. czcionki, kolory, marginesy.

4. Styled-components i Emotion w Next.js

Styled Components i Emotion to dwie popularne biblioteki do CSS-in-JS, które umożliwiają tworzenie komponentów zagnieżdżonych w stylach. Obie biblioteki pozwalają na łatwe zarządzanie stylami w komponentach React.

Instalacja Styled Components

  1. Zainstaluj Styled Components:
				
					npm install styled-components
  1. Skonfiguruj Styled Components w Next.js:

Next.js automatycznie rozpozna styled-components, ale musisz zainstalować i skonfigurować odpowiedni Babel plugin.

Zainstaluj plugin:

				
					npm install --save @babel/preset-env @babel/preset-react @babel/preset-typescript babel-plugin-styled-components
  1. Stwórz plik babel.config.js w katalogu głównym projektu:
				
					// babel.config.js
module.exports = {
  presets: ['next/babel'],
  plugins: ['styled-components'],
};
  1. Użyj Styled Components w aplikacji:
				
					// pages/index.js
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 3rem;
  color: #3498db;
`;

const Home = () => {
  return <Title>Witaj w Next.js z Styled Components!</Title>;
}

export default Home;

Instalacja i użycie Emotion

  1. Zainstaluj Emotion:
				
					npm install @emotion/react @emotion/styled
  1. Używaj Emotion w komponencie:
				
					// pages/index.js
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const titleStyle = css`
  font-size: 3rem;
  color: #e74c3c;
`;

const Home = () => {
  return <h1 css={titleStyle}>Witaj w Next.js z Emotion!</h1>;
}

export default Home;

Podsumowanie

Next.js oferuje dużą elastyczność w zakresie stylizacji, pozwalając na korzystanie z tradycyjnego CSS, SASS, CSS Modules, a także nowoczesnych rozwiązań CSS-in-JS, takich jak Styled Components i Emotion. Każde z tych podejść ma swoje zastosowanie w zależności od rozmiaru projektu, skali aplikacji oraz preferencji dewelopera. Możesz używać globalnych stylów lub lokalnych modułów CSS, a także nowoczesnych bibliotek do zarządzania stylami w sposób deklaratywny i dynamiczny. Wybór metody zależy od Twoich potrzeb i wymagań projektu.

Kategorie