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

Dynamic Routes

首先，我們先在「/app/teacher/」裡，新增一個[tid]資料夾，在資料夾下新增一個page.js，利用params就可以取得職員編號了:

/app/teacher/[tid]/page.js:

export default async function Page({ params }) {
  const { tid } = await params;
  return <div>Teacher id: {tid}</div>;
}

Untitled