Next.js Ievada ceļvedis: labākā izvēle modernu tīmekļa lietojumprogrammu izstrādei

Ievads

Mūsdienu ātri attīstošajā priekšējā izstrādes jomā Next.js ir ievērojams ietvars, kas izstrādātājiem piedāvā spēcīgus rīkus un elastību, lai izveidotu augstas veiktspējas, modernas tīmekļa lietojumprogrammas. Neatkarīgi no tā, vai esi iesācējs vai izstrādātājs, kurš vēlas ieviest Next.js esošajā projektā, šis raksts sniegs visaptverošu ievada ceļvedi, kas palīdzēs saprast Next.js pamata konceptus un lietošanas metodes.

Kas ir Next.js?

Next.js ir React ietvars, kas paredzēts, lai palīdzētu izstrādātājiem ātri izveidot ražošanai gatavas lietojumprogrammas. Tas piedāvā daudz jaudīgu funkciju, piemēram:

• Servera puses renderēšana (SSR) un statiska ģenerēšana (SSG): atbalsta lapu iepriekšēju renderēšanu serverī, uzlabojot ielādes ātrumu un SEO veiktspēju.
• Maršrutēšana: iebūvēta failu sistēmas maršrutēšana, kas vienkāršo lapu un API maršrutu pārvaldību.
• API maršruti: var viegli izveidot API tajā pašā projektā, nevajadzējot papildu serveri.
• Veiktspējas optimizācija: automātiska koda sadalīšana, samazinot sākotnējās ielādes laiku.

Next.js instalēšana

Next.js instalēšana ir ļoti vienkārša, vienkārši pārliecinies, ka tavā izstrādes vidē ir instalēts Node.js. Vari ātri izveidot jaunu projektu, izmantojot sekojošo komandu:

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

Palaidot iepriekš minētās komandas, tu redzēsi, ka http://localhost:3000 ir palaista jauna Next.js lietojumprogramma.

Projekta struktūra

Izveidojot Next.js lietojumprogrammu, tu redzēsi noklusējuma direktoriju struktūru:

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

• pages/: direktorija, kurā glabājas lapas, katrs .js fails automātiski atbilst vienam maršrutam.
• public/: statisko failu direktorija, jebkuru failu, kas atrodas šajā direktorijā, var tieši piekļūt.
• styles/: direktorija, kurā glabājas CSS faili, ko var izmantot globālām vai konkrētu komponentu stilam.

Lapu un maršrutu izveide

Next.js lapas balstās uz failu sistēmas maršrutēšanas pārvaldību. pages/ direktorijā izveido failu, piemēram, about.js, ar šādu saturu:

export default function About() {
  return 

# Par mums

;
}

Tas automātiski izveidos /about maršrutu, lai piekļūtu šai lapai.

Statiskā ģenerēšana un servera puses renderēšana

Next.js atbalsta statisko ģenerēšanu (Static Generation) un servera puses renderēšanu (Server-side Rendering) atkarībā no datu iegūšanas stratēģijas. Apskatīsim, kā to īstenot:

Statiskā ģenerēšana (Static Generation)

Ja vēlies iepriekš ģenerēt saturu projekta izveides laikā, vari izmantot getStaticProps. Piemēram:

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

Servera puses renderēšana (Server-side Rendering)

Ja vēlies iegūt datus katru reizi, kad tiek veikts pieprasījums, vari izmantot 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};
}

CSS un stilu pievienošana

Next.js piedāvā vairākas iespējas, kā pievienot CSS stilus, visvienkāršākais veids ir izveidot CSS failus styles/ direktorijā un iekļaut tos nepieciešamajās lapās:

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

export default function Home() {
  return 

# Laipni lūdzam Next.js!

;
}

Turklāt vari izmantot CSS-in-JS bibliotēkas, piemēram, styled-components vai Emotion, lai apstrādātu stilus.

API maršruti

Tu vari izveidot API maršrutus pages/api/ direktorijā. Piemēram, izveido failu hello.js:

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

API maršruti var apstrādāt pieprasījumus un atbildes, sniedzot priekšpusei dinamiskas datu apstrādes iespējas.

Next.js lietojumprogrammas izvietošana

Visvienkāršākais izvietošanas veids ir izmantot Vercel, kas ir bezmaksas mitināšanas platforma, ko izveidojusi Next.js izstrādes komanda. Vienkārši nospied kodu uz GitHub, un pēc tam savieno savu GitHub kontu ar Vercel, lai automātiski izveidotu un izvietotu.

Kopsavilkums

Next.js ir ideāls ietvars modernu tīmekļa lietojumprogrammu izstrādei, tā spēcīgās funkcijas un elastība ļauj izstrādātājiem koncentrēties uz lietojumprogrammas izveidi un optimizāciju. Pateicoties šī raksta ievadam, ceru, ka tu esi ieguvis sākotnēju izpratni par Next.js pamata lietojumu. Ceru, ka tu varēsi pilnībā izmantot Next.js priekšrocības nākotnes projektos, izveidojot efektīvākas tīmekļa lietojumprogrammas.

Ja ir jautājumi vai nepieciešami papildu mācību resursi, lūdzu, iepazīsties ar Next.js oficiālo dokumentāciju.