A Tutorial on Next.js 13 – Routing (Parallel Routes) (Next.js Tutorial)

Posted by

Next.js 13 教學 – Routing (Parallel Routes)

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)的基本步驟。希望這個教學對您有所幫助!

0 0 votes
Article Rating
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@tommy55123
6 months ago

感謝