Podstawy Next.js

Next.js to jeden z najpopularniejszych frameworków do budowania aplikacji webowych opartych na React. Jest to narzędzie, które ułatwia tworzenie skalowalnych aplikacji, oferując wiele funkcji “out of the box”, takich jak renderowanie po stronie serwera (SSR), generowanie statyczne (SSG), wbudowany routing czy API Routes. W tym artykule omówię podstawy Next.js i przedstawię Ci najważniejsze koncepcje, które pozwolą Ci zacząć pracę z tym frameworkiem.

1. Wprowadzenie do Next.js

Co to jest Next.js?

Next.js to framework open-source stworzony przez firmę Vercel, który rozszerza możliwości biblioteki React, dodając zaawansowane mechanizmy renderowania, optymalizacji i routingu. Umożliwia łatwe tworzenie aplikacji, które mogą renderować strony zarówno po stronie serwera (SSR), jak i generować statyczne strony (SSG). Dzięki temu Next.js łączy wydajność statycznych stron z dynamicznymi aplikacjami, które wymagają interaktywności i dostępu do danych w czasie rzeczywistym.

Zalety korzystania z Next.js

  1. SSR (Server-Side Rendering)
    Next.js oferuje renderowanie po stronie serwera, co oznacza, że aplikacja renderuje stronę na serwerze przed wysłaniem jej do klienta. To pozwala na szybszy czas ładowania strony i lepszą optymalizację SEO, ponieważ treść jest dostępna od razu po załadowaniu strony w przeglądarce.

  2. SSG (Static Site Generation)
    Z kolei generowanie statyczne pozwala na tworzenie stron, które są w pełni generowane podczas budowania aplikacji, a nie w czasie żądania. To sprawia, że strony ładują się błyskawicznie, a SEO jest zoptymalizowane.

  3. API Routes
    Next.js pozwala na łatwe tworzenie backendowych API w tym samym projekcie, w ramach tzw. API Routes. Dzięki temu możesz tworzyć funkcje backendowe (np. kontaktowy formularz, logowanie) bez konieczności uruchamiania oddzielnego serwera.

  4. Dynamiczne ładowanie
    Next.js wspiera dynamiczne ładowanie komponentów i stron, dzięki czemu aplikacja jest bardziej wydajna. Kiedy użytkownik wchodzi na stronę, tylko niezbędne zasoby są ładowane, co przyspiesza ładowanie aplikacji.

Różnice między React a Next.js

React to biblioteka do budowania interfejsów użytkownika, podczas gdy Next.js jest frameworkiem opartym na React, który dodaje dodatkowe funkcje. Oto kilka kluczowych różnic:

  • Renderowanie: React domyślnie renderuje aplikację po stronie klienta, natomiast Next.js oferuje różne metody renderowania – SSR, SSG, oraz statyczne generowanie stron.
  • Routing: W React routing musisz konfigurować samodzielnie (np. za pomocą React Router), natomiast w Next.js jest wbudowany system routingu oparty na strukturze folderów.
  • Optymalizacja: Next.js automatycznie optymalizuje aplikację pod względem wydajności (np. poprzez automatyczne dzielenie kodu, ładowanie komponentów na żądanie, optymalizację obrazów).

Architektura aplikacji w Next.js

Aplikacja w Next.js jest podzielona na kilka głównych części:

  • Pages: Katalog pages zawiera wszystkie strony Twojej aplikacji. Next.js automatycznie mapuje pliki w tym folderze na odpowiednie URL.
  • Components: Katalog z komponentami, które są używane w różnych częściach aplikacji.
  • Public: Folder, w którym przechowujesz zasoby statyczne, takie jak obrazy, czcionki czy inne pliki, które mają być dostępne publicznie.
  • API: Folder, w którym możesz tworzyć funkcje API, które będą działać po stronie serwera.

2. Instalacja i konfiguracja

Instalacja Next.js za pomocą create-next-app

Zacznijmy od instalacji projektu Next.js. Aby to zrobić, musisz mieć zainstalowanego Node.js i npm (lub yarn).

  1. Otwórz terminal i wykonaj poniższe polecenie, aby stworzyć nowy projekt Next.js:
				
					npx create-next-app@latest moja-aplikacja
  1. Po zakończeniu procesu instalacji przejdź do folderu projektu:
				
					cd moja-aplikacja
  1. Uruchom aplikację:
				
					npm run dev

Aplikacja powinna być dostępna pod adresem http://localhost:3000.

Struktura katalogów i plików w projekcie Next.js

Po utworzeniu projektu zauważysz, że struktura folderów jest dosyć prosta:

				
					moja-aplikacja/
├── pages/
│   ├── index.js
│   └── _app.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── next.config.js
  • pages/index.js: Strona główna Twojej aplikacji.
  • public/: Zawiera pliki, które są dostępne publicznie, takie jak obrazy.
  • styles/: Folder z plikami CSS.
  • package.json: Plik konfiguracyjny projektu.
  • next.config.js: Plik konfiguracyjny dla Next.js, jeśli chcesz dostosować ustawienia frameworka.

Pierwsza aplikacja w Next.js

Zacznijmy od stworzenia prostego komponentu w pliku pages/index.js:

				
					import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Witaj w Next.js!</h1>
      <p>To jest Twoja pierwsza aplikacja Next.js.</p>
    </div>
  );
}

export default Home;

Po zapisaniu zmian, aplikacja automatycznie zaktualizuje się w przeglądarce. Możesz teraz zobaczyć stronę powitalną na http://localhost:3000.

3. Routing i nawigacja

Wbudowany system routingu w Next.js

Next.js posiada wbudowany system routingu, który opiera się na strukturze folderów w katalogu pages. Każdy plik .js w tym folderze odpowiada jednej stronie w aplikacji.

Na przykład, jeśli dodasz plik about.js w folderze pages, nowa strona będzie dostępna pod adresem http://localhost:3000/about.

Dynamiczne ścieżki URL i parametry routingu

Next.js umożliwia tworzenie dynamicznych ścieżek. Wystarczy stworzyć plik o nazwie z nawiasami kwadratowymi, np. pages/[id].js. Taki plik będzie odpowiadał za dynamiczne ścieżki URL.

				
					// pages/[id].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query; // id pochodzi z URL

  return <p>Post o ID: {id}</p>;
}

export default Post;

Jeśli teraz przejdziesz do http://localhost:3000/123, zobaczysz tekst: „Post o ID: 123”.

Linki i nawigacja między stronami za pomocą komponentu Link

Next.js oferuje komponent Link, który umożliwia łatwą nawigację między stronami bez przeładowania aplikacji.

				
					import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>Strona główna</h1>
      <Link href="/about">
        <a>Przejdź do strony 'About'</a>
      </Link>
    </div>
  );
}

export default Home;

Programowa nawigacja (metoda useRouter)

Za pomocą hooka useRouter możesz programowo nawigować między stronami. Przykład:

				
					import { useRouter } from 'next/router';

const Home = () => {
  const router = useRouter();

  const goToAbout = () => {
    router.push('/about');
  }

  return (
    <div>
      <button onClick={goToAbout}>Przejdź do strony 'About'</button>
    </div>
  );
}

export default Home;

4. Strony statyczne i generowanie statyczne (SSG)

Co to jest Static Site Generation (SSG)?

SSG to technika, która pozwala na generowanie statycznych stron w czasie budowania aplikacji. Strony są renderowane raz, a potem przechowywane na serwerze, dzięki czemu ładowanie strony jest bardzo szybkie.

getStaticProps – metoda do generowania statycznych stron

W Next.js możesz użyć metody getStaticProps, aby wygenerować dane podczas budowania aplikacji.

				
					// pages/index.js
export async function getStaticProps() {
  return {
    props: {
      message: "Witaj w statycznej aplikacji Next.js!",
    },
  };
}

const Home = ({ message }) => {
  return <h1>{message}</h1>;
}

export default Home;

Optymalizacja SEO przy pomocy SSG

Strony generowane statycznie mają ogromne zalety w zakresie SEO, ponieważ cała treść jest dostępna od razu po załadowaniu strony. Search Engine Optimization (SEO) korzysta z tego, że wszystkie dane są już widoczne dla robotów wyszukiwarek.

Generowanie statycznych stron w Next.js

Dzięki getStaticProps, możesz tworzyć strony statyczne, które są szybkie, wydajne i łatwe do indeksowania przez wyszukiwarki.

5. Strony renderowane po stronie serwera (SSR)

Co to jest Server Side Rendering (SSR)?

SSR to technika, w której strona jest renderowana na serwerze przy każdym żądaniu. Oznacza to, że użytkownik zawsze otrzymuje najnowsze dane.

getServerSideProps – renderowanie strony na serwerze

Next.js pozwala na renderowanie stron na serwerze przy każdym żądaniu za pomocą getServerSideProps.

				
					// pages/index.js
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
  };
}

const Home = ({ data }) => {
  return (
    <div>
      <h1>Dane z serwera:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre></div> );
}  export default Home;

Różnice i zastosowanie SSR w Next.js

SSR jest idealne, gdy dane na stronie muszą być aktualne przy każdym żądaniu. Przykłady to strony, które wyświetlają dynamiczne dane, jak wyniki sportowe, dane z aplikacji social media czy ceny akcji.

Kiedy używać SSR, a kiedy SSG?

  • SSG: Używaj, gdy dane są stałe lub zmieniają się rzadko, na przykład na stronach blogów, dokumentacji, portfoliach.
  • SSR: Używaj, gdy dane zmieniają się dynamicznie lub wymagają częstych aktualizacji, na przykład na stronach z wynikami wyszukiwania, dashboardach czy profilach użytkowników.

Next.js to potężne narzędzie do budowania nowoczesnych aplikacji webowych. W tym artykule omówiłem jego podstawy, instalację, routing, a także różne techniki renderowania stron. W kolejnych artykułach możesz zgłębić bardziej zaawansowane funkcje Next.js i dowiedzieć się, jak jeszcze bardziej zoptymalizować swoje aplikacje.

Kategorie