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