探索進階 React：釋放 Next.js 的力量-js教程-PHP中文網

探索進階 React：釋放 Next.js 的力量

PHPz

發布： 2024-08-16 12:31:40

原創

931 人瀏覽過

在不斷發展的網路開發世界中，保持領先地位至關重要。 Next.js 是一個強大的 React 框架，它徹底改變了我們建立現代 Web 應用程式的方式。讓我們透過實際範例深入探討 Next.js 的特殊之處以及它如何增強您的開發流程。

什麼是 Next.js？

Next.js 是 Vercel 開發的 React 框架，旨在使伺服器端渲染和靜態網站產生變得輕而易舉。它透過旨在提高性能和 SEO 的強大功能增強了 React。

為什麼選擇 Next.js？

Exploring Advanced React: Unlocking the Power of Next.js

Next.js 提供了幾個引人注目的功能：

伺服器端渲染 (SSR)
靜態站點產生 (SSG)
API 路由

讓我們透過範例深入探討這些功能。

Next.js 的核心特性

1. 基於檔案的路由

Next.js 使用直覺的基於檔案的路由系統。頁面在頁面目錄中創建，檔案名稱直接映射到路由。

範例：

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

登入後複製

此檔案會自動在 /about 建立一條路線。

2. 服務端渲染（SSR）

SSR是使用getServerSideProps函數實現的。

範例：

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

登入後複製

此頁面將根據每個請求獲取數據，確保內容新鮮。

3. 靜態站點生成（SSG）

對於靜態內容，請使用 getStaticProps。

範例：

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

登入後複製

此頁面將在建置時生成，並且可以設定為按指定的時間間隔重新生成。

4. API 路由

在 Next.js 應用程式中建立 API 端點。

範例：

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

登入後複製

這會在 /api/user 處建立一個傳回使用者資料的 API 端點。

使用 Vercel 進行部署

使用 Vercel 部署非常簡單：

將您的 GitHub 儲存庫連接到 Vercel。
配置您的專案設定。
只需單擊一下即可部署。

Vercel 會自動設定 CI/CD，讓更新就像推送到儲存庫一樣簡單。

Next.js 開發的最佳實踐

1.盡量使用靜態產生

對於可以預先渲染的頁面，請務必選擇 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.最佳化影像

使用 next/image 元件進行自動影像最佳化：

   import Image from 'next/image'

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

登入後複製

3.高效管理CSS

利用 CSS 模組實現元件範圍內的樣式：

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

登入後複製