Guia d'Introducció a Next.js: La Millor Opció per Construir Aplicacions Web Modernes

Introducció

En l'actualitat, en el ràpid desenvolupament del camp del desenvolupament frontend, Next.js és un marc molt destacat que proporciona als desenvolupadors eines potents i flexibilitat per construir aplicacions web modernes i d'alt rendiment. Tant si ets un principiants com si ets un desenvolupador que vol introduir Next.js en un projecte existent, aquest article et proporcionarà una guia d'introducció completa per ajudar-te a entendre els conceptes bàsics i l'ús de Next.js.

Què és Next.js?

Next.js és un marc de React dissenyat per ajudar els desenvolupadors a construir ràpidament aplicacions preparades per a la producció. Ofereix moltes funcions potents, com ara:

• Renderització del costat del servidor (SSR) i generació estàtica (SSG): suport per a la pre-renderització de pàgines al servidor, millorant la velocitat de càrrega i el rendiment SEO.
• Rutes: rutes de sistema de fitxers integrades que simplifiquen la gestió de rutes de pàgines i API.
• Rutes API: possibilitat de construir API fàcilment dins del mateix projecte, sense necessitat de servidors addicionals.
• Optimització del rendiment: divisió automàtica del codi, reduint el temps de càrrega inicial.

Instal·lar Next.js

Instal·lar Next.js és molt senzill, només has d'assegurar-te que el teu entorn de desenvolupament tingui instal·lat Node.js. Pots crear ràpidament un nou projecte amb la següent comanda:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Després d'executar la comanda anterior, veuràs que s'ha iniciat una nova aplicació Next.js a http://localhost:3000.

Estructura del Projecte

Un cop creat l'aplicació Next.js, veuràs una estructura de directori per defecte:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

• pages/: directori on es guarden les pàgines, cada fitxer .js correspon automàticament a una ruta.
• public/: directori de fitxers estàtics, qualsevol fitxer que es col·loqui en aquest directori es pot accedir directament.
• styles/: directori on es guarden els fitxers CSS, que es poden utilitzar per a estils globals o de components específics.

Crear Pàgines i Rutes

Les pàgines de Next.js es gestionen mitjançant rutes basades en el sistema de fitxers. Crea un fitxer al directori pages/, per exemple about.js, amb el següent contingut:

export default function About() {
  return 

Sobre nosaltres

;
}

Això crearà automàticament una ruta /about per accedir a aquesta pàgina.

Generació Estàtica i Renderització del Costat del Servidor

Next.js admet generació estàtica (Static Generation) i renderització del costat del servidor (Server-side Rendering) segons l'estratègia d'obtenció de dades. Vegem com implementar-ho:

Generació Estàtica (Static Generation)

Si vols pre-generar contingut durant la construcció del projecte, pots utilitzar getStaticProps. Per exemple:

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

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

export default function Page({ data }) {
  return {data.title};
}

Renderització del Costat del Servidor (Server-side Rendering)

Si vols obtenir dades en cada sol·licitud, pots utilitzar getServerSideProps:

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

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

Afegir CSS i Estils

Next.js ofereix diverses maneres d'afegir estils CSS, la manera més senzilla és crear fitxers CSS al directori styles/ i importar-los a les pàgines necessàries:

import styles from './styles/Home.module.css';

export default function Home() {
  return 

Benvingut a Next.js!

;
}

A més, també pots utilitzar biblioteques CSS-in-JS, com styled-components o Emotion, per gestionar els estils.

Rutes API

Pots crear rutes API al directori pages/api/. Per exemple, crea un fitxer hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hola API' });
}

Les rutes API poden gestionar sol·licituds i respostes, proporcionant la capacitat de processar dades dinàmiques per al frontend.

Desplegar l'Aplicació Next.js

La manera més senzilla de desplegar és utilitzant Vercel, que és una plataforma d'allotjament gratuïta creada pel equip de desenvolupament de Next.js. Només has de pujar el codi a GitHub i connectar el compte de GitHub amb Vercel per construir i desplegar automàticament.

Conclusió

Next.js és el marc ideal per construir aplicacions web modernes, les seves funcions potents i flexibilitat permeten als desenvolupadors centrar-se en la construcció i optimització de l'aplicació. A través d'aquesta introducció, esperem que hagis obtingut una comprensió inicial de l'ús bàsic de Next.js. Esperem que puguis aprofitar al màxim les avantatges de Next.js en els teus futurs projectes per construir aplicacions web més eficients.

Si tens preguntes o necessites recursos per aprendre més, no dubtis a consultar la documentació oficial de Next.js.