如何在 Next.js 中進行應用程式路由 14

Next.js 14 繼續增強其強大的框架，為開發人員提供建立 React 應用程式的強大功能。任何 Web 應用程式的關鍵方面之一都是路由，而 Next.js 使其變得異常簡單和高效。在這篇文章中，我們將探討如何在 Next.js 14 中設定和使用應用程式路由。

Next.js 路由簡介

Next.js 使用基於檔案的路由系統，這表示頁面目錄的結構決定了應用程式的路由。頁面目錄中的每個檔案都成為一條路線。

基本路由

要建立基本路線，您只需將新檔案新增至pages目錄即可。例如，如果您在pages目錄中建立名為about.js的文件，它將自動在/about中可用。

範例：

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

動態路由

Next.js 也支援使用括號 ([]) 的動態路由。這允許您使用動態參數建立路線。

範例：

// pages/product/[id].js
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Product {id}</h1>
    </div>
  );
}

在此範例中，pages/product 目錄中名為 [id].js 的檔案建立了一個動態路由，可以透過 /product/1、/product/2 等存取該路由。

嵌套路由

可以透過在頁面目錄中新增資料夾來建立嵌套路由。每個資料夾代表 URL 路徑的一部分。

範例：

// pages/blog/index.js
export default function Blog() {
  return (
    <div>
      <h1>Blog Home</h1>
    </div>
  );
}

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
    </div>
  );
}

在此設定中，/blog 路由將渲染index.js，/blog/[slug] 將渲染[slug].js。

API 路由

Next.js 還支援 API 路由，讓您在應用程式中建立後端端點。這些都放在pages/api目錄下。

範例：

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

此檔案在 /api/hello 處建立一個 API 端點，該端點以 JSON 訊息回應。

自訂路由器

Next.js 14 允許使用 next/router 套件進行更多自訂和進階路由策略。您可以以程式設計方式在頁面之間導航並處理更複雜的路由場景。

範例：

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const navigateToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About Page</button>
    </div>
  );
}

結論

Next.js 14 以其強大而靈活的路由系統繼續簡化和增強開發人員體驗。無論您需要靜態、動態還是巢狀路由，Next.js 都可以輕鬆設定和管理應用程式的導航。

我希望這篇文章可以幫助您開始使用 Next.js 14 中的路由。如果您有任何問題或建議，請隨時在下面發表評論！

編碼愉快！

---

以上是如何在 Next.js 中進行應用程式路由 14的詳細內容。更多資訊請關注PHP中文網其他相關文章！