Next.js leiðbeiningar: Besti kosturinn til að byggja nútíma vefumsóknir

Inngangur

Í hröðum heimi forritunar á vefnum er Next.js rammi sem vekur mikla athygli, þar sem hann veitir forriturum öfluga verkfæri og sveigjanleika til að byggja háþróaðar, nútíma vefumsóknir. Hvort sem þú ert byrjandi eða forritari sem vill innleiða Next.js í núverandi verkefni, mun þessi grein veita þér heildstæða leiðbeiningu til að hjálpa þér að skilja grunnhugmyndir og notkun Next.js.

Hvað er Next.js?

Next.js er rammi fyrir React, hannaður til að hjálpa forriturum að byggja framleiðsluhæfar umsóknir fljótt. Hann býður upp á marga öfluga eiginleika, svo sem:

Þjónustuhlið útfærsla (SSR) og stöðug útfærsla (SSG): Styður að forsníða síður á þjóninum, sem eykur hleðsluhraða og SEO frammistöðu.
Leiðir: Innbyggð skráakerfisleið, sem einfaldar stjórn á síðum og API leiðum.
API leiðir: Auðvelt að byggja API í sama verkefni án þess að þurfa auka þjón.
Frammistöðubætur: Sjálfvirk kóðaskipting, sem minnkar upphafs hleðslutíma.

Uppsetning Next.js

Uppsetning Next.js er mjög einföld, aðeins þarf að tryggja að Node.js sé uppsett í þróunarumhverfi þínu. Þú getur fljótt búið til nýtt verkefni með eftirfarandi skipun:

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

Eftir að þú hefur keyrt ofangreindar skipanir, munt þú sjá nýja Next.js umsókn sem er ræst á http://localhost:3000.

Verkefnaskipulag

Eftir að þú hefur búið til Next.js umsóknina, munt þú sjá sjálfgefna skráarskipulag:

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

pages/: Skrá þar sem síður eru geymdar, hver .js skrá mun sjálfkrafa samsvara leið.
public/: Skrá fyrir stöðufaila, öll skrár sem eru settar í þessa skrá eru aðgengilegar beint.
styles/: Skrá fyrir CSS skrár, hægt að nota fyrir alheims eða sérstakar stíla.

Búa til síður og leiðir

Síður Next.js eru byggðar á skráakerfi til að stjórna leiðum. Búðu til skrá í pages/ skrá, eins og about.js, með eftirfarandi efni:

export default function About() {
  return 

# Um okkur

;
}

Þetta mun sjálfkrafa búa til /about leið til að aðgang að þessari síðu.

Stöðug útfærsla og þjónustuhlið útfærsla

Next.js styður stöðuga útfærslu (Static Generation) og þjónustuhlið útfærslu (Server-side Rendering) byggt á gögnum. Kíkjum á hvernig á að framkvæma:

Stöðug útfærsla (Static Generation)

Þegar þú vilt forsníða efni við byggingu verkefnisins, geturðu notað getStaticProps. Til dæmis:

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};
}

Þjónustuhlið útfærsla (Server-side Rendering)

Ef þú vilt sækja gögn við hverja beiðni, geturðu notað 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};
}

Bæta CSS og stílum við

Next.js býður upp á marga möguleika til að bæta CSS stílum, einfaldasta leiðin er að búa til CSS skrá í styles/ skrá og innleiða hana í þeim síðum sem þarf:

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

export default function Home() {
  return 

# Velkomin í Next.js!

;
}

Auk þess geturðu einnig notað CSS-in-JS bókasöfn, eins og styled-components eða Emotion, til að vinna með stíl.

API leiðir

Þú getur búið til API leiðir í pages/api/ skrá. Til dæmis, búðu til hello.js skrá:

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

API leiðir geta unnið með beiðnum og svörum, sem veitir framenda möguleika á að vinna með dýnamísk gögn.

Dreifing Next.js umsóknar

Einfaldasta leiðin til að dreifa er að nota Vercel, sem er ókeypis hýsingarpallur sem þróunarteymi Next.js bjó til. Þú þarft bara að ýta kóðanum á GitHub og tengja GitHub reikninginn þinn við Vercel, þá mun sjálfkrafa byggja og dreifa.

Samantekt

Next.js er fullkominn rammi til að byggja nútíma vefumsóknir, þar sem öflugar eiginleikar og sveigjanleiki gera forriturum kleift að einbeita sér að byggingu og úrbótum á umsókninni. Með þessari grein trúi ég að þú hafir fengið fyrstu innsýn í grunnnotkun Next.js. Vona að þú nýtir kosti Next.js í framtíðinni til að byggja árangursríkari vefumsóknir.

Ef þú hefur spurningar eða þarft frekari námsauðlindir, vinsamlegast skoðaðu opinberar leiðbeiningar Next.js.