Next.js Hordhac: Xulashada Ugu Wanaagsan ee Dhisidda Codsiyada Webka Casriga ah

Hordhac

Dunida horumarinta hore ee si degdeg ah u koraysa, Next.js waa qaab caan ah, kaas oo bixiya qalab awood leh iyo dabacsanaan si loogu dhiso codsiyo Web oo casri ah oo waxqabad sare leh. Haddii aad tahay bilow, ama aad rabto inaad ku darto Next.js mashaariicdaada hadda, maqaalkaan wuxuu ku siin doonaa hage dhamaystiran oo ku saabsan Next.js, si aad u fahanto fikradaha aasaasiga ah iyo habka loo isticmaalo.

Waa maxay Next.js?

Next.js waa qaab React ah, oo loogu talagalay in uu caawiyo horumariyeyaasha inay si degdeg ah u dhisaan codsiyo diyaar u ah wax soo saar. Waxay bixisaa dhowr sifooyin awood leh, sida:

Sawir-gacmeedka dhinaca server-ka (SSR) iyo abuurista joogtada ah (SSG): Taageerada sawir-gacmeedka bogagga dhinaca server-ka, kor u qaadida xawaaraha rarista iyo waxqabadka SEO.
Jidka: Jidka nidaamka faylka oo ku dhex jira, fududeynta maamulka bogagga iyo API-yada.
Jidka API: Si fudud loogu dhisi karo API isla mashruuc, iyada oo aan loo baahnayn server dheeri ah.
Hagaajinta waxqabadka: Kala qaybsanaanta koodhka si otomaatig ah, yareynta waqtiga rarista ee bilowga ah.

Rakibida Next.js

Rakibida Next.js aad bay u fududahay, kaliya hubi in deegaankaaga horumarinta uu ku rakiban yahay Node.js. Waxaad si degdeg ah u abuuri kartaa mashruuc cusub adigoo isticmaalaya amarkan:

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

Kadib markaad ordo amarkan, waxaad arki doontaa codsi cusub oo Next.js ah oo ka bilaabmaya http://localhost:3000.

Qaab-dhismeedka Mashruuca

Kadib markaad abuurto codsiga Next.js, waxaad arki doontaa qaab-dhismeed faylalka ah oo caadi ah:

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

pages/: Directory-ga bogagga, fayl kasta oo .js ah wuxuu si otomaatig ah ugu dhigmaa jid.
public/: Directory-ga faylasha joogtada ah, fayl kasta oo ku jira directory-kan si toos ah ayaa loo heli karaa.
styles/: Directory-ga faylasha CSS, waxaa loo isticmaali karaa qaababka guud ama kuwa gaarka ah.

Abuurista Bogagga iyo Jidada

Bogagga Next.js waxay ku saleysan yihiin maamulka jidka nidaamka faylka. Ku abuur fayl pages/ directory-ga, tusaale ahaan about.js, nuxurka hoos ku qoran:

export default function About() {
  return 

# Nagu Saabsan

;
}

Tani waxay si otomaatig ah u abuuri doontaa jid /about si loo galo boggan.

Abuurista Joogtada ah iyo Sawir-gacmeedka Dhinaca Server-ka

Next.js waxay taageertaa abuurista joogtada ah (Static Generation) iyo sawir-gacmeedka dhinaca server-ka (Server-side Rendering) iyadoo ku xiran istaraatiijiyadda helitaanka xogta. Aan eegno sida loo hirgeliyo:

Abuurista Joogtada ah (Static Generation)

Marka la dhisayo mashruuca, haddii aad rabto inaad horay u abuurto nuxurka, waxaad isticmaali kartaa getStaticProps. Tusaale ahaan:

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

Sawir-gacmeedka Dhinaca Server-ka (Server-side Rendering)

Haddii aad rabto inaad xogta hesho mar kasta oo la codsado, waxaad isticmaali kartaa 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};
}

Ku darista CSS iyo Qaababka

Next.js waxay bixisaa siyaabo kala duwan oo lagu daro qaababka CSS, habka ugu fududna waa in la abuuro faylasha CSS ee ku jira directory-ga styles/, oo lagu daro bogagga loo baahan yahay:

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

export default function Home() {
  return 

# Ku Soo Dhawoow Next.js!

;
}

Sidoo kale, waxaad isticmaali kartaa maktabadaha CSS-in-JS, sida styled-components ama Emotion, si aad u maareyso qaababka.

Jidka API

Waxaad ku abuuri kartaa jidka API directory-ga pages/api/. Tusaale ahaan, abuur fayl hello.js:

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

Jidada API waxay maareyn kartaa codsiyada iyo jawaabaha, waxayna bixisaa awoodda maaraynta xogta firfircoon ee hore.

Daabacaadda Codsiga Next.js

Habka ugu fudud ee daabacaadda waa in la isticmaalo Vercel, oo ah madal bilaash ah oo ay abuurtay kooxda horumarinta Next.js. Kaliya koodkaaga ku riix GitHub, ka dibna ku xidh Vercel akoonkaaga GitHub, si otomaatig ah loo dhiso oo loo daabaco.

Gunaanad

Next.js waa qaab ideal ah oo lagu dhiso codsiyada Webka casriga ah, sifooyinkiisa awoodda leh iyo dabacsanaanta ayaa u oggolaanaya horumariyeyaasha inay diiradda saaraan dhismaha iyo hagaajinta codsiga. Iyada oo ay maqaalkaan ku saabsan, waxaan rajeynayaa inaad heshay faham aasaasi ah oo ku saabsan isticmaalka Next.js. Waxaan rajeynayaa inaad si buuxda uga faa'iidaysato faa'iidooyinka Next.js mashaariicdaada mustaqbalka, si aad u dhisto codsiyo Web oo waxtar leh.

Haddii aad su'aalo qabtid ama aad u baahan tahay ilaha waxbarasho ee dheeraadka ah, fadlan si xor ah u eeg dokumentiga rasmiga ah ee Next.js.