El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Generació de llocs estàtics (SSG) amb Next.js

Següent ►
►

Introducció

Next.js és un framework de React que permet la creació d'aplicacions web amb renderització del costat del servidor (SSR) i generació de llocs estàtics (SSG). En aquest tema, ens centrarem en la generació de llocs estàtics amb Next.js, una tècnica que permet pre-renderitzar pàgines en el moment de la construcció, millorant així el rendiment i l'optimització per a motors de cerca (SEO).

Què és la Generació de Llocs Estàtics (SSG)?

La generació de llocs estàtics (SSG) és una tècnica on les pàgines es generen en el moment de la construcció (build time) i es serveixen com a fitxers HTML estàtics. Això contrasta amb la renderització del costat del servidor (SSR), on les pàgines es generen en el moment de la sol·licitud (request time).

Avantatges de SSG

  • Rendiment: Les pàgines estàtiques es carreguen més ràpidament perquè no necessiten ser generades en cada sol·licitud.
  • SEO: Les pàgines pre-renderitzades són més fàcils d'indexar pels motors de cerca.
  • Escalabilitat: Els llocs estàtics poden ser servits des de xarxes de distribució de contingut (CDN), millorant la disponibilitat i la velocitat.

Configuració de Next.js per a SSG

Instal·lació de Next.js

Primer, necessitem instal·lar Next.js i React en el nostre projecte. Pots fer-ho amb npm o yarn:

npx create-next-app my-static-site
cd my-static-site

Estructura del projecte

Un projecte Next.js típic té la següent estructura:

my-static-site/
├── pages/
│   ├── index.js
│   └── [dynamic].js
├── public/
├── styles/
├── .gitignore
├── package.json
└── README.md

Creació de pàgines estàtiques

Per crear una pàgina estàtica, simplement crea un fitxer JavaScript dins de la carpeta pages. Per exemple, pages/index.js:

// pages/index.js
import React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Benvingut a la meva pàgina estàtica!</h1>
      <p>Aquesta pàgina ha estat generada en el moment de la construcció.</p>
    </div>
  );
};

export default HomePage;

Utilització de getStaticProps

Per obtenir dades en el moment de la construcció, utilitzem la funció getStaticProps. Aquesta funció s'executa en el servidor durant la construcció i les dades retornades es passen com a props al component.

// pages/index.js
import React from 'react';

export async function getStaticProps() {
  // Aquí pots fer crides a APIs, llegir fitxers, etc.
  const data = { message: 'Hola, món!' };

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

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Benvingut a la meva pàgina estàtica!</h1>
      <p>{data.message}</p>
    </div>
  );
};

export default HomePage;

Pàgines dinàmiques amb getStaticPaths

Per crear pàgines dinàmiques estàtiques, utilitzem getStaticPaths juntament amb getStaticProps. getStaticPaths defineix quines pàgines dinàmiques han de ser generades en el moment de la construcció.

// pages/[id].js
import React from 'react';

export async function getStaticPaths() {
  // Aquí pots obtenir les rutes dinàmiques des d'una API, base de dades, etc.
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
  ];

  return {
    paths,
    fallback: false, // Si és false, qualsevol ruta no retornada per getStaticPaths donarà un 404
  };
}

export async function getStaticProps({ params }) {
  // Aquí pots obtenir les dades per a cada pàgina dinàmica
  const data = { id: params.id, message: `Hola, món ${params.id}!` };

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

const DynamicPage = ({ data }) => {
  return (
    <div>
      <h1>Pàgina dinàmica {data.id}</h1>
      <p>{data.message}</p>
    </div>
  );
};

export default DynamicPage;

Exercicis Pràctics

Exercici 1: Crear una pàgina estàtica

  1. Crea una nova pàgina a pages/about.js.
  2. Utilitza getStaticProps per passar dades a la pàgina.
  3. Mostra les dades a la pàgina.

Solució

// pages/about.js
import React from 'react';

export async function getStaticProps() {
  const data = { title: 'Sobre nosaltres', content: 'Aquesta és la pàgina sobre nosaltres.' };

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

const AboutPage = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
};

export default AboutPage;

Exercici 2: Crear pàgines dinàmiques

  1. Crea una nova pàgina a pages/posts/[id].js.
  2. Utilitza getStaticPaths per definir les rutes dinàmiques.
  3. Utilitza getStaticProps per obtenir dades per a cada pàgina dinàmica.
  4. Mostra les dades a la pàgina.

Solució

// pages/posts/[id].js
import React from 'react';

export async function getStaticPaths() {
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
  ];

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const data = { id: params.id, title: `Post ${params.id}`, content: `Aquest és el contingut del post ${params.id}.` };

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

const PostPage = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
};

export default PostPage;

Conclusió

La generació de llocs estàtics amb Next.js és una tècnica poderosa per millorar el rendiment i el SEO de les aplicacions web. Utilitzant getStaticProps i getStaticPaths, podem crear pàgines estàtiques i dinàmiques que es generen en el moment de la construcció, oferint una experiència d'usuari ràpida i eficient. En el proper tema, explorarem com utilitzar TypeScript amb React per millorar la robustesa i mantenibilitat del nostre codi.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats