Panduan Permulaan Next.js: Pilihan Terbaik untuk Membangun Aplikasi Web Moden

Pengenalan

Dalam bidang pembangunan frontend yang berkembang pesat hari ini, Next.js adalah satu rangka kerja yang mendapat perhatian, yang menyediakan alat dan fleksibiliti yang kuat untuk pembangun dalam membina aplikasi Web moden yang berprestasi tinggi. Sama ada anda seorang pemula, atau seorang pembangun yang ingin memperkenalkan Next.js dalam projek sedia ada, artikel ini akan memberikan anda panduan permulaan yang komprehensif, membantu anda memahami konsep asas dan cara penggunaan Next.js.

Apa itu Next.js?

Next.js adalah rangka kerja React yang direka untuk membantu pembangun membina aplikasi yang siap untuk pengeluaran dengan cepat. Ia menawarkan banyak ciri yang kuat, seperti:

• Penyampaian sisi pelayan (SSR) dan penjanaan statik (SSG): Menyokong pra-penyampaian halaman di pelayan, meningkatkan kelajuan muat dan prestasi SEO.
• Penghalaan: Penghalaan sistem fail terbina dalam, memudahkan pengurusan halaman dan penghalaan API.
• Penghalaan API: Membolehkan anda membina API dengan mudah dalam projek yang sama tanpa pelayan tambahan.
• Pengoptimuman prestasi: Pemecahan kod automatik, mengurangkan masa muat awal.

Memasang Next.js

Memasang Next.js sangat mudah, hanya pastikan persekitaran pembangunan anda mempunyai Node.js yang dipasang. Anda boleh menggunakan arahan berikut untuk dengan cepat mencipta projek baru:

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

Setelah menjalankan arahan di atas, anda akan melihat aplikasi Next.js baru yang dimulakan di http://localhost:3000.

Struktur Projek

Setelah mencipta aplikasi Next.js, anda akan melihat struktur direktori lalai:

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

• pages/: Direktori untuk menyimpan halaman, setiap fail .js akan secara automatik sepadan dengan satu penghalaan.
• public/: Direktori untuk fail statik, sebarang fail yang diletakkan dalam direktori ini boleh diakses secara langsung.
• styles/: Direktori untuk menyimpan fail CSS, boleh digunakan untuk gaya global atau gaya komponen tertentu.

Mencipta Halaman dan Penghalaan

Halaman Next.js diuruskan berdasarkan sistem fail. Dalam direktori pages/, cipta satu fail, contohnya about.js, dengan kandungan berikut:

export default function About() {
  return 

# Tentang Kami

;
}

Ini akan secara automatik mencipta penghalaan /about untuk mengakses halaman ini.

Penjanaan Statik dan Penyampaian Sisi Pelayan

Next.js menyokong penjanaan statik (Static Generation) dan penyampaian sisi pelayan (Server-side Rendering) berdasarkan strategi pengambilan data. Mari kita lihat bagaimana untuk melaksanakannya:

Penjanaan Statik (Static Generation)

Semasa membina projek, jika anda ingin pra-penjanaan kandungan, anda boleh menggunakan getStaticProps. Contohnya:

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

Penyampaian Sisi Pelayan (Server-side Rendering)

Jika anda ingin mendapatkan data pada setiap permintaan, anda boleh menggunakan 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};
}

Menambah CSS dan Gaya

Next.js menyediakan pelbagai cara untuk menambah gaya CSS, cara yang paling mudah adalah dengan mencipta fail CSS dalam direktori styles/ dan mengimportnya dalam halaman yang diperlukan:

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

export default function Home() {
  return 

# Selamat Datang ke Next.js!

;
}

Selain itu, anda juga boleh menggunakan perpustakaan CSS-in-JS, seperti styled-components atau Emotion, untuk mengendalikan gaya.

Penghalaan API

Anda boleh mencipta penghalaan API dalam direktori pages/api/. Contohnya, cipta satu fail hello.js:

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

Penghalaan API boleh mengendalikan permintaan dan respons, memberikan keupayaan pemprosesan data dinamik untuk frontend.

Menghantar Aplikasi Next.js

Cara paling mudah untuk menghantar adalah dengan menggunakan Vercel, platform hosting percuma yang dicipta oleh pasukan pembangunan Next.js. Hanya perlu menghantar kod ke GitHub, kemudian sambungkan akaun GitHub anda melalui Vercel, dan ia akan secara automatik membina dan menghantar.

Kesimpulan

Next.js adalah rangka kerja ideal untuk membina aplikasi Web moden, dengan ciri dan fleksibiliti yang kuat membolehkan pembangun memberi tumpuan kepada pembinaan dan pengoptimuman aplikasi. Melalui pengenalan dalam artikel ini, saya percaya anda telah mendapat pemahaman awal tentang cara asas penggunaan Next.js. Semoga anda dapat memanfaatkan kelebihan Next.js dalam projek akan datang, membina aplikasi Web yang lebih berkesan.

Jika ada sebarang pertanyaan atau memerlukan sumber pembelajaran lanjut, sila rujuk kepada dokumentasi rasmi Next.js.