File based routing

Next.js跟react不一樣，是採用file based routing，只要在pages底下，就可以利用檔案名稱開啟該頁面。

利用useRouter跳轉頁面

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

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」視為一個獨立頁面。

首先，我們先在「/pages/TeacherIntro/」裡，新增一個[tid].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>

}

Untitled

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

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

因為文件並不是以職員編號為id，所以，只能用LDPA_account欄位查詢

      const { tid } = router.query;
      const tRef = collection(db,"teacher");
      const LDAP = tid+"@mail.fju.edu.tw";
      console.log("LDAP",LDAP);
      const tQuery=query(tRef,where("LDPA_account","==",LDAP));

Dynamic Routes