Next.js Panimula: Ang Pinakamahusay na Pagpipilian para sa Pagtatayo ng Modernong Web Application

Panimula

Sa mabilis na umuunlad na larangan ng front-end development ngayon, ang Next.js ay isang kapansin-pansing framework na nagbibigay sa mga developer ng makapangyarihang mga tool at kakayahang bumuo ng mataas na pagganap, modernong Web application. Kung ikaw ay isang baguhan, o isang developer na nais magdagdag ng Next.js sa iyong umiiral na proyekto, ang artikulong ito ay magbibigay sa iyo ng isang komprehensibong panimula, na makakatulong sa iyo na maunawaan ang mga pangunahing konsepto at mga pamamaraan ng paggamit ng Next.js.

Ano ang Next.js?

Ang Next.js ay isang framework ng React na dinisenyo upang tulungan ang mga developer na mabilis na bumuo ng mga production-ready na application. Nagbibigay ito ng maraming makapangyarihang mga tampok, tulad ng:

Server-side rendering (SSR) at static generation (SSG): Sinusuportahan ang pre-rendering ng mga pahina sa server, na nagpapabuti sa bilis ng pag-load at pagganap ng SEO.
Routing: Built-in na file system routing, na nagpapadali sa pamamahala ng mga pahina at API routing.
API routing: Madaling bumuo ng API sa parehong proyekto, nang hindi nangangailangan ng karagdagang server.
Pag-optimize ng pagganap: Awtomatikong code splitting, na nagpapababa sa oras ng paunang pag-load.

Pag-install ng Next.js

Napakadali ng pag-install ng Next.js, kailangan mo lamang tiyakin na naka-install ang Node.js sa iyong development environment. Maaari mong mabilis na lumikha ng isang bagong proyekto gamit ang sumusunod na utos:

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

Pagkatapos patakbuhin ang mga utos sa itaas, makikita mo na nagsimula ang isang bagong Next.js application sa http://localhost:3000.

Estruktura ng Proyekto

Matapos lumikha ng Next.js application, makikita mo ang isang default na directory structure:

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

pages/: Directory para sa mga pahina, bawat .js file ay awtomatikong tumutugma sa isang ruta.
public/: Directory para sa mga static na file, anumang file na inilagay sa directory na ito ay maaaring direktang ma-access.
styles/: Directory para sa mga CSS file, maaaring gamitin para sa global o tiyak na mga estilo ng component.

Paglikha ng Pahina at Ruta

Ang mga pahina ng Next.js ay pinamamahalaan batay sa file system. Lumikha ng isang file sa pages/ directory, halimbawa about.js, na may nilalaman:

export default function About() {
  return 

# Tungkol sa Amin

;
}

Awtomatikong lilikha ito ng isang /about na ruta upang ma-access ang pahinang ito.

Static Generation at Server-side Rendering

Sinusuportahan ng Next.js ang static generation (Static Generation) at server-side rendering (Server-side Rendering) batay sa mga estratehiya sa pagkuha ng data. Tingnan natin kung paano ito ipinatutupad:

Static Generation

Kapag bumubuo ng proyekto, kung nais mong pre-generate ang nilalaman, maaari mong gamitin ang getStaticProps. Halimbawa:

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

Server-side Rendering

Kung nais mong makuha ang data sa bawat request, maaari mong gamitin ang 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};
}

Pagdaragdag ng CSS at Estilo

Nagbibigay ang Next.js ng iba't ibang paraan upang magdagdag ng CSS na estilo, ang pinakasimpleng paraan ay sa pamamagitan ng paglikha ng CSS file sa styles/ directory at pag-import nito sa mga pahinang kinakailangan:

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

export default function Home() {
  return 

# Maligayang Pagdating sa Next.js!

;
}

Bukod dito, maaari mo ring gamitin ang CSS-in-JS na mga library, tulad ng styled-components o Emotion, upang pamahalaan ang mga estilo.

API Routing

Maaari kang lumikha ng mga API route sa pages/api/ directory. Halimbawa, lumikha ng isang hello.js na file:

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

Ang mga API route ay maaaring humawak ng mga request at response, na nagbibigay ng kakayahan para sa dynamic na pagproseso ng data sa front-end.

Pag-deploy ng Next.js Application

Ang pinakamadaling paraan ng pag-deploy ay sa pamamagitan ng Vercel, isang libreng hosting platform na nilikha ng development team ng Next.js. Kailangan mo lamang i-push ang code sa GitHub, at pagkatapos ay kumonekta sa iyong GitHub account sa Vercel, at awtomatikong itatayo at ide-deploy ito.

Buod

Ang Next.js ay isang perpektong framework para sa pagtatayo ng modernong Web application, ang makapangyarihang mga tampok at kakayahan nito ay nagbibigay-daan sa mga developer na tumutok sa pagtatayo at pag-optimize ng application. Sa pamamagitan ng artikulong ito, umaasa akong mayroon kang paunang pag-unawa sa mga pangunahing gamit ng Next.js. Nawa'y magamit mo ang mga benepisyo ng Next.js sa iyong mga hinaharap na proyekto, at makabuo ng mas mahusay na Web application.

Kung mayroon kang mga katanungan o kailangan ng karagdagang mga mapagkukunan para sa pag-aaral, mangyaring tingnan ang opisyal na dokumentasyon ng Next.js.