Pengenalan kepada Next.js: Membina Aplikasi Pertama Anda

Next.js ialah rangka kerja React yang popular yang membolehkan pembangun mencipta aplikasi yang diberikan pelayan yang pantas. Ia menyediakan ciri hebat di luar kotak, seperti penjanaan tapak statik (SSG), pemaparan sisi pelayan (SSR) dan laluan API. Dalam panduan ini, kami akan melalui proses membina aplikasi Next.js pertama anda, memfokuskan pada konsep utama dan contoh praktikal.

1. Menyediakan Projek Next.js Anda

Untuk bermula dengan Next.js, anda perlu memasang Node.js pada mesin anda. Setelah anda menyediakan Node.js, anda boleh mencipta aplikasi Next.js baharu menggunakan arahan berikut:

npx create-next-app my-next-app

Arahan ini mencipta direktori baharu yang dipanggil my-next-app dengan semua fail dan kebergantungan yang diperlukan untuk memulakan aplikasi Next.js.

2. Menavigasi Struktur Projek

Selepas mencipta projek anda, navigasi ke direktori projek:

cd my-next-app

Di dalam direktori my-next-app, anda akan menemui struktur yang serupa dengan ini:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

Direktori halaman ialah tempat anda akan membuat halaman aplikasi anda, manakala awam adalah untuk aset statik.

3. Mencipta Halaman Pertama Anda

Next.js menggunakan sistem penghalaan berasaskan fail. Untuk membuat halaman baharu, cuma tambah fail JavaScript baharu di dalam direktori halaman. Sebagai contoh, buat fail bernama about.js:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

Dalam contoh ini, kami mencipta halaman Perihal yang ringkas dan menggunakan komponen Pautan untuk menavigasi kembali ke halaman utama.

4. Mengubah suai Halaman Utama

Buka fail index.js dalam direktori halaman. Fail ini mewakili halaman utama permohonan anda. Anda boleh mengubah suainya seperti berikut:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

Di sini, kami menambahkan beberapa penggayaan ringkas dan pautan ke halaman Perihal.

5. Menambah Gaya pada Aplikasi Anda

Next.js menyokong modul CSS di luar kotak. Untuk menggayakan komponen anda, anda boleh mencipta modul CSS dalam direktori gaya. Contohnya, buat fail bernama Home.module.css:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Seterusnya, import modul CSS ini ke halaman index.js anda seperti yang ditunjukkan dalam bahagian sebelumnya.

6. Mengambil Data dengan Next.js

Next.js memudahkan untuk mengambil data menggunakan getStaticProps untuk penjanaan tapak statik atau getServerSideProps untuk pemaparan sebelah pelayan. Contohnya, untuk mengambil data pada halaman utama, anda boleh mengubah suai index.js seperti ini:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Dalam kod ini, kami mengambil senarai siaran daripada API awam dan memaparkannya di halaman utama.

7. Mencipta Laluan API

Next.js membolehkan anda mencipta laluan API dalam direktori halaman/api. Laluan ini boleh digunakan untuk membina kefungsian bahagian belakang anda. Contohnya, buat fail bernama hello.js dalam direktori pages/api:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Anda boleh mengakses laluan API ini dengan menavigasi ke http://localhost:3000/api/hello.

8. Menggunakan Aplikasi Next.js Anda

Setelah aplikasi anda sedia, anda boleh menggunakan aplikasi itu dengan mudah. Vercel ialah platform pengehosan yang disyorkan untuk aplikasi Next.js. Anda boleh menggunakan apl anda dengan mengikut langkah berikut:

1. Buat akaun Vercel jika anda tidak mempunyai akaun.

2. Pasang Vercel CLI secara global:
   

   npx create-next-app my-next-app
   

3. Jalankan arahan berikut dalam direktori projek anda:
   

   cd my-next-app
   

4. Ikuti gesaan untuk menggunakan aplikasi anda.

9. Menambah Penghalaan Dinamik

Next.js menyokong penghalaan dinamik menggunakan kurungan. Contohnya, jika anda ingin mencipta halaman catatan blog dinamik, anda boleh mencipta fail bernama [id].js dalam direktori halaman/siaran:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

Kini anda boleh mengakses siaran tertentu dengan menavigasi ke /posts/1, /posts/2, dsb.

10. Melaksanakan Gaya Global

Jika anda ingin menggunakan gaya global pada aplikasi anda, anda boleh berbuat demikian dengan mencipta fail bernama _app.js dalam direktori halaman:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

Seterusnya, buat fail globals.css dalam direktori gaya dan tambahkan gaya global anda:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

11. Menggunakan Pembolehubah Persekitaran

Next.js menyokong pembolehubah persekitaran untuk menyimpan maklumat sensitif. Anda boleh mencipta fail .env.local dalam akar projek anda dan menambah pembolehubah anda:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Anda kemudian boleh mengakses pembolehubah ini dalam aplikasi anda menggunakan process.env:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Tahniah kerana membina aplikasi Next.js pertama anda! Sepanjang perjalanan ini, anda telah mempelajari cara menyediakan projek anda, mencipta halaman dinamik, mengambil data dengan lancar, melaksanakan penghalaan yang mantap dan menggunakan aplikasi anda dengan mudah.

Next.js bukan sekadar rangka kerja; ia adalah alat berkuasa yang boleh meningkatkan pengalaman pembangunan web anda dengan ketara. Ciri terbina dalamnya, seperti penjanaan tapak statik (SSG) dan pemaparan sisi pelayan (SSR), membolehkan anda mencipta aplikasi pantas dan mesra pengguna yang dioptimumkan untuk prestasi dan SEO.

Langkah Seterusnya dalam Perjalanan Next.js Anda

Sekarang anda telah berjaya membina aplikasi Next.js pertama anda, tiba masanya untuk meningkatkan kemahiran anda ke peringkat seterusnya. Dalam siri siaran yang akan datang ini, kami akan menyelidiki lebih mendalam beberapa ciri Next.js yang lebih maju yang boleh meningkatkan aplikasi anda dan menyelaraskan proses pembangunan anda.

Perisian Tengah ialah ciri berkuasa yang membolehkan anda memanjangkan kefungsian aplikasi anda dengan menambahkan logik tersuai sebelum permintaan selesai. Ini bermakna anda boleh memanipulasi objek permintaan dan respons, mengesahkan pengguna atau menguruskan ubah hala dengan lancar.

Seterusnya, kami akan meneroka Penjanaan Tapak Statik (SSG). Teknik ini pra-memaparkan halaman pada masa binaan, membolehkan kelajuan pemuatan yang pantas dan prestasi SEO yang lebih baik. Dengan memahami cara memanfaatkan SSG, anda boleh mencipta aplikasi yang bukan sahaja dinamik tetapi juga sangat cekap.

Akhir sekali, kami akan merangkumi Laluan API, ciri yang membolehkan anda membina fungsi tanpa pelayan terus dalam aplikasi Next.js anda. Ini bermakna anda boleh mengendalikan permintaan dan respons tanpa memerlukan pelayan yang berasingan, menjadikannya lebih mudah untuk membangunkan aplikasi tindanan penuh dengan lebih sedikit overhed.

Ikuti saya semasa kami memulakan perjalanan yang menarik ini ke dalam keupayaan lanjutan Next.js. Dengan alatan ini yang anda boleh gunakan, anda akan dapat membina aplikasi yang mantap dan berprestasi tinggi yang benar-benar menonjol. Nantikan siaran seterusnya kami!

Anda boleh membaca siaran ini juga di:

Pengenalan kepada Next.js: Membina Aplikasi Pertama Anda

Next.js ialah rangka kerja React yang popular yang membolehkan pembangun mencipta aplikasi yang diberikan pelayan yang pantas. Ia menyediakan ciri hebat di luar kotak!

salmaniyad.hashnode.dev

Cari saya di:

SalmanIyad · GitHub

Jurutera Sistem Komputer | Pembangun Web. SalmanIyad mempunyai 31 repositori yang tersedia. Ikut kod mereka di GitHub.

github.com

Atas ialah kandungan terperinci Pengenalan kepada Next.js: Membina Aplikasi Pertama Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!