Next.js algusjuhend: parim valik kaasaegsete veebirakenduste loomiseks

Sissejuhatus

Tänapäeva kiiresti arenevas front-end arenduse valdkonnas on Next.js silmapaistev raamistik, mis pakub arendajatele võimsaid tööriistu ja paindlikkust kõrge jõudlusega, kaasaegsete veebirakenduste loomiseks. Olenemata sellest, kas oled algaja või soovid olemasolevates projektides Next.js-i rakendada, pakub see artikkel sulle põhjalikku algusjuhendit, et aidata sul mõista Next.js-i põhikontseptsioone ja kasutusviise.

Mis on Next.js?

Next.js on Reacti raamistik, mis on loodud selleks, et aidata arendajatel kiiresti luua tootmiskõlbulikke rakendusi. See pakub mitmeid võimsaid funktsioone, nagu:

Serveripoolne renderdamine (SSR) ja staatiline genereerimine (SSG): toetab lehtede eelrenderdamist serveris, et parandada laadimiskiirus ja SEO jõudlust.
Reiting: sisseehitatud failisüsteemi reiting, mis lihtsustab lehtede ja API reitingute haldamist.
API reiting: võimaldab samas projektis hõlpsasti luua API-sid, ilma et oleks vaja täiendavat serverit.
Jõudluse optimeerimine: automaatne koodide jagamine, et vähendada alglaadimise aega.

Next.js-i installimine

Next.js-i installimine on väga lihtne, piisab, kui veenduda, et sinu arenduskeskkonnas on installitud Node.js. Uue projekti kiireks loomiseks saad kasutada järgmist käsku:

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

Ülaltoodud käskude käivitamisel näed, et http://localhost:3000 aadressil on käivitatud uus Next.js rakendus.

Projekti struktuur

Pärast Next.js rakenduse loomist näed vaikimisi kataloogistruktuuri:

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

pages/: lehtede kataloog, iga .js fail vastab automaatselt ühele reitingule.
public/: staatiliste failide kataloog, kõik selle katalooge paigutatud failid on otse ligipääsetavad.
styles/: CSS failide kataloog, mida saab kasutada globaalsete või konkreetsete komponentide stiilide jaoks.

Lehtede ja reitingute loomine

Next.js-i lehed põhinevad failisüsteemil reitingute haldamiseks. pages/ kataloogis loo fail, näiteks about.js, mille sisu on järgmine:

export default function About() {
  return 

# Meist

;
}

See loob automaatselt /about reitingu, et sellele lehele juurde pääseda.

Staatiline genereerimine ja serveripoolne renderdamine

Next.js toetab staatilist genereerimist (Static Generation) ja serveripoolset renderdamist (Server-side Rendering) andmete hankimise strateegiate põhjal. Vaata, kuidas seda rakendada:

Staatiline genereerimine (Static Generation)

Kui soovid projekti ehitamisel eelnevalt genereerida sisu, saad kasutada getStaticProps funktsiooni. Näiteks:

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

Serveripoolne renderdamine (Server-side Rendering)

Kui soovid iga päringu korral andmeid hankida, saad kasutada 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 ja stiilide lisamine

Next.js pakub mitmeid viise CSS stiilide lisamiseks, kõige lihtsam viis on luua styles/ kataloogis CSS fail ja importida see vajalikesse lehtedesse:

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

export default function Home() {
  return 

# Tere tulemast Next.js-i!

;
}

Samuti saad kasutada CSS-in-JS raamatukogusid, nagu styled-components või Emotion, stiilide haldamiseks.

API reitingud

Sa saad luua API reitingud pages/api/ kataloogis. Näiteks loo hello.js fail:

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

API reitingud saavad käsitleda päringuid ja vastuseid, pakkudes front-endile dünaamilise andmetöötluse võimalusi.

Next.js rakenduse juurutamine

Lihtsaim juurutamisviis on kasutada Verceli, mis on Next.js-i arendustiimi loodud tasuta majutusteenus. Piisab, kui lükata kood GitHubi ja seejärel ühendada Vercel oma GitHubi kontoga, et automaatselt ehitada ja juurutada.

Kokkuvõte

Next.js on ideaalne raamistik kaasaegsete veebirakenduste loomiseks, mille võimsad funktsioonid ja paindlikkus võimaldavad arendajatel keskenduda rakenduste ehitamisele ja optimeerimisele. Selle artikli tutvustuse kaudu usun, et sul on nüüd Next.js-i põhikasutuse kohta esialgne arusaam. Loodan, et saad tulevastes projektides täielikult ära kasutada Next.js-i eeliseid, et luua tõhusamaid veebirakendusi.

Kui sul on küsimusi või vajad täiendavaid õppematerjale, vaata julgelt Next.js-i ametlikku dokumentatsiooni.