App Router

Next.js跟react不一樣，提供了兩種Router，本課程採用App Router，只要在app底下，就可以根據資料夾名稱，開啟page.js。

• Next Routing (吳濟聰老師進階web程式設計課程教材)

利用useRouter跳轉頁面

如果，登入成功要跳轉到首頁。在next.js裡，提供了跳轉(client side routing)功能。先import需要的useRouter。

import { useRouter } from 'next/navigation';

<aside> 📢

注意，如果使用pages router，使用的useRouter是不一樣的。

</aside>

import {useRouter} from "next/router";

利用useRouter取得router

export default function 登入() {
  **const router = useRouter();**

利用push()，跳轉頁面

function login(){
    if (userID == "test" && password =="password"){
      **router.push("/Teacherstatus");**
    }
    else {
      alert("登入失敗");
    }
  }

• next/router

Dynamic Routes

寫PHP時，可以傳參數，例如，/TeacherIntro.php?tid=053792。在Next.js裡，也可以用同樣的方法取得參數，而且，也提供了dynamic routes，假如，我們在TeacherIntro裡，想利用老師的職員編號去取得老師的個人資料，例如「/TeacherIntro/053792」，這樣的好處是一般的搜尋引擎會將「/TeacherIntro/053792」視為一個獨立頁面。

首先，我們先在「/app/TeacherIntro/」裡，新增一個[tid]資料夾，在資料夾下新增一個page.jsx，利用useRouter()取得router，從router.query就可以取得職員編號了:

import { useRouter } from 'next/router'
export default function TeacherIntro(){
  const router = useRouter()
  const { tid } = router.query

  return <p>Teacher id: {tid}</p>

}

如果文件是以職員編號為id，可以直接取得文件 (存取資料庫的部分，請參考Firebase):

const docRef = doc(db, "teacher", tid);