Next.js pradžios vadovas: geriausias pasirinkimas modernių žiniatinklio programų kūrimui

Įžanga

Šiandieniniame sparčiai besivystančiame priekinio kūrimo srityje, Next.js yra labai pastebimas karkasas, kuris kūrėjams suteikia galingus įrankius ir lankstumą kuriant aukštos kokybės, modernias žiniatinklio programas. Nesvarbu, ar esate pradedantysis, ar kūrėjas, norintis įtraukti Next.js į esamą projektą, šis straipsnis suteiks jums išsamų pradžios vadovą, padedantį suprasti pagrindinius Next.js konceptus ir naudojimo metodus.

Kas yra Next.js?

Next.js yra React karkasas, skirtas padėti kūrėjams greitai kurti gamybai paruoštas programas. Jis siūlo daugybę galingų funkcijų, tokių kaip:

• Serverio pusės renderinimas (SSR) ir statinis generavimas (SSG): palaiko puslapių išankstinį renderinimą serveryje, didinantį įkėlimo greitį ir SEO našumą.
• Maršrutizavimas: įmontuotas failų sistemos maršrutizavimas, supaprastinantis puslapių ir API maršrutų valdymą.
• API maršrutai: lengvai kurkite API tame pačiame projekte, nereikia papildomo serverio.
• Našumo optimizavimas: automatinis kodo dalijimas, sumažinantis pradinio įkėlimo laiką.

Next.js diegimas

Next.js diegimas yra labai paprastas, tereikia užtikrinti, kad jūsų kūrimo aplinkoje būtų įdiegtas Node.js. Galite greitai sukurti naują projektą naudodami šią komandą:

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

Paleidus aukščiau pateiktą komandą, pamatysite, kad http://localhost:3000 adresu buvo paleista nauja Next.js programa.

Projekto struktūra

Sukūrus Next.js programą, pamatysite numatytą katalogų struktūrą:

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

• pages/: katalogas, kuriame saugomi puslapiai, kiekvienas .js failas automatiškai atitinka vieną maršrutą.
• public/: statinių failų katalogas, bet kuris šiame kataloge esantis failas gali būti tiesiogiai pasiekiamas.
• styles/: katalogas, kuriame saugomi CSS failai, gali būti naudojamas globaliems arba specifiniams komponentų stiliams.

Puslapių ir maršrutų kūrimas

Next.js puslapiai remiasi failų sistema maršrutų valdymui. Sukurkite failą pages/ kataloge, pavyzdžiui, about.js, su šiuo turiniu:

export default function About() {
  return 

# Apie mus

;
}

Tai automatiškai sukurs /about maršrutą, kad pasiektumėte šį puslapį.

Statinis generavimas ir serverio pusės renderinimas

Next.js remiasi duomenų gavimo strategijomis, palaikančiomis statinį generavimą (Static Generation) ir serverio pusės renderinimą (Server-side Rendering). Pažvelkime, kaip tai įgyvendinti:

Statinis generavimas (Static Generation)

Norint išankstinio turinio generavimo projekto kūrimo metu, galite naudoti getStaticProps. Pavyzdžiui:

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

Serverio pusės renderinimas (Server-side Rendering)

Jei norite gauti duomenis kiekvieną kartą, kai atliekamas užklausimas, galite naudoti 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 ir stilių pridėjimas

Next.js siūlo įvairius būdus, kaip pridėti CSS stilius, paprasčiausias būdas yra sukurti CSS failus styles/ kataloge ir importuoti juos reikiamuose puslapiuose:

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

export default function Home() {
  return 

# Sveiki atvykę į Next.js!

;
}

Be to, galite naudoti CSS-in-JS bibliotekas, tokias kaip styled-components arba Emotion, kad tvarkytumėte stilius.

API maršrutai

Galite sukurti API maršrutus pages/api/ kataloge. Pavyzdžiui, sukurkite hello.js failą:

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

API maršrutai gali apdoroti užklausas ir atsakymus, suteikdami galimybę dinamiškai apdoroti duomenis priekinėje pusėje.

Next.js programos diegimas

Pats paprasčiausias diegimo būdas yra naudoti Vercel, tai nemokama talpinimo platforma, sukurta Next.js kūrimo komandos. Tiesiog įkelkite kodą į GitHub, tada prijunkite GitHub paskyrą prie Vercel, ir jis automatiškai sukurs ir diegs.

Santrauka

Next.js yra idealus karkasas modernių žiniatinklio programų kūrimui, jo galingos funkcijos ir lankstumas leidžia kūrėjams sutelkti dėmesį į programos kūrimą ir optimizavimą. Tikimės, kad šio straipsnio dėka turite pradinį supratimą apie pagrindinius Next.js naudojimo būdus. Tikimės, kad ateityje galėsite pilnai išnaudoti Next.js privalumus, kurdami efektyvesnes žiniatinklio programas.

Jei turite klausimų ar reikia papildomų mokymosi išteklių, drąsiai kreipkitės į Next.js oficialią dokumentaciją.