Next.js 13 教學 – Routing (Parallel Routes)
在這次的Next.js教學中,我們將學習如何使用Next.js來設置routing,特別是parallel routes。
首先,在我們的Next.js應用程序中,我們需要安裝相關的套件。請執行以下命令:
npm install next react react-dom
安裝完成後,我們可以開始建立我們的routing。在我們的pages資料夾中,我們可以建立多個檔案,每個檔案代表一個不同的route。例如,我們可以建立一個叫做about.js的檔案,用來處理about頁面的routing。
接下來,我們需要在每個檔案中使用Next.js的內建功能來導出我們的組件。例如:
import React from 'react';
const AboutPage = () => {
return (
About Page
This is the about page content
);
};
export default AboutPage;
當我們建立了多個不同的route檔案後,我們可以在我們的應用程序中訪問它們。這樣,我們就可以使用parallel routes來處理不同的頁面。
最後,我們還需要在我們的應用程序中設置一些其他的routing相關的功能,例如導航和路由參數。這可能需要一些額外的設定,但是通過使用Next.js的內建功能,我們可以輕鬆地處理這些功能。
這就是使用Next.js 13設置routing(包括parallel routes)的基本步驟。希望這個教學對您有所幫助!
感謝