Meneroka Reaksi Lanjutan: Membuka Kunci Kuasa Next.js

Dalam dunia pembangunan web yang sentiasa berkembang, berada di hadapan adalah penting. Masukkan Next.js, rangka kerja React yang berkuasa yang merevolusikan cara kami membina aplikasi web moden. Mari kita mendalami perkara yang menjadikan Next.js istimewa dan bagaimana ia boleh menyerlahkan proses pembangunan anda, lengkap dengan contoh praktikal.

Apakah Next.js?

Next.js ialah rangka kerja React yang dibangunkan oleh Vercel yang direka untuk memudahkan pemaparan sebelah pelayan dan penjanaan tapak statik. Ia meningkatkan React dengan ciri berkuasa yang bertujuan untuk meningkatkan prestasi dan SEO.

Mengapa Pilih Next.js?

Next.js menawarkan beberapa ciri menarik:

1. Rendering Sebelah Pelayan (SSR)
2. Penjanaan Tapak Statik (SSG)
3. Laluan API

Mari kita terokai ciri ini secara mendalam dengan contoh.

Ciri Teras Next.js

1. Penghalaan Berasaskan Fail

Next.js menggunakan sistem penghalaan berasaskan fail yang intuitif. Halaman dibuat dalam direktori halaman, dengan nama fail dipetakan terus ke laluan.

Contoh:

// pages/about.js
export default function About() {
  return <h1>About Us</h1>
}

Fail ini secara automatik mencipta laluan di /about.

2. Rendering Sebelah Pelayan (SSR)

SSR dilaksanakan menggunakan fungsi getServerSideProps.

Contoh:

// pages/ssr-example.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return { props: { data } }
}

export default function SSRPage({ data }) {
  return <div>Server-side rendered data: {data.title}</div>
}

Halaman ini akan mengambil data pada setiap permintaan, memastikan kandungan baharu.

3. Penjanaan Tapak Statik (SSG)

Untuk kandungan statik, gunakan getStaticProps.

Contoh:

// pages/ssg-example.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data')
  const data = await res.json()

  return {
    props: { data },
    revalidate: 60 // Regenerate page every 60 seconds
  }
}

export default function SSGPage({ data }) {
  return <div>Static data: {data.content}</div>
}

Halaman ini akan dijana pada masa binaan dan boleh ditetapkan untuk menjana semula pada selang waktu tertentu.

4. Laluan API

Buat titik akhir API dalam apl Next.js anda.

Contoh:

// pages/api/user.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe', age: 30 })
}

Ini mencipta titik akhir API di /api/user yang mengembalikan data pengguna.

Penggunaan dengan Vercel

Menggunakan Vercel adalah mudah:

1. Sambungkan repositori GitHub anda ke Vercel.
2. Konfigurasikan tetapan projek anda.
3. Gunakan dengan satu klik.

Vercel menyediakan CI/CD secara automatik, menjadikan kemas kini semudah menolak ke repositori anda.

Amalan Terbaik untuk Pembangunan Next.js

1.Gunakan Penjanaan Statik Apabila Boleh

Untuk halaman yang boleh diprapaparkan, sentiasa pilih SSG:

   export async function getStaticProps() {
     // Fetch data from an API
     const res = await fetch('https://api.example.com/posts')
     const posts = await res.json()

     return {
       props: {
         posts,
       },
     }
   }

2.Optimumkan Imej

Gunakan komponen seterusnya/imej untuk pengoptimuman imej automatik:

   import Image from 'next/image'

   function HomePage() {
     return (
       <Image
         src="/profile.jpg"
         alt="Profile Picture"
         width={500}
         height={500}
       />
     )
   }

3.Urus CSS Dengan Cekap

Gunakan Modul CSS untuk gaya skop komponen:

   // styles/Home.module.css
   .container {
     padding: 0 2rem;
   }

   // pages/index.js
   import styles from '../styles/Home.module.css'

   export default function Home() {
     return <div className={styles.container}>Welcome to Next.js!</div>
   }

Kesimpulan

Next.js memperkasakan pembangun untuk mencipta aplikasi web yang lebih pantas, lebih cekap dan mesra SEO. Dengan memanfaatkan ciri terasnya seperti laluan SSR, SSG dan API, anda boleh membawa pembangunan React anda ke tahap yang lebih tinggi.

Bersedia untuk menyelam? Mulakan perjalanan Next.js anda hari ini dan buka kunci dunia kemungkinan untuk projek pembangunan web anda!

Atas ialah kandungan terperinci Meneroka Reaksi Lanjutan: Membuka Kunci Kuasa Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!