Next.js內建routing，讓我們不需要額外採用React Router。對初學者而言，是最基本的差別。在Next.js 13以後，Next.js的內建routing開始提供App Router，跟過去的routing方式不太一樣。

過去的Routing稱為Pages Router，在/src/pages檔案夾下的檔案，都可以透過檔名直接開啟，其他檔案夾裡的檔案就無法開啟。好處就是將可直接開啟的元件獨立在pages下，缺點是pages與其他的元件被分離，互相的對應關係很難從檔案夾結構看出來。

新的App Router，則是採用不太一樣的方式，在/app (可省略/src/)下，只有page.tsx(page.jsx或page.js)可以被直接呼叫，呼叫的方式是以檔案夾的名稱來呼叫。所以，如果要有多個可公開呼叫的頁面，就在/app下產生多個檔案夾。

Defining Routes

Layout

這樣的設計有不少好處，其中一個好處是可以有特定功能的檔案，例如，在app router下，可以利用layout.tsx (layout.js或layout.jsx)，來設定layout，這樣的話，layout的設定就會套用到這個檔案夾裡的所有頁面。

Pages and Layouts

目前預設的/app/layout.tsx

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

我們在<body>中加個內容:


    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        **<h1>輔仁大學資訊管理學系</h1>**
        {children}
      </body>
    </html>

就可以發現在/app下，所有頁面都會有這個內容

因為是在最上層，所以，product裡也適用

未來就可以把每一頁的需要內容，例如:選單，放在layout.tsx裡，所有頁面都會有選單了~

Link

接下來，要完成一個選單，我們需要可以利用html來新增連結

/app/layout.tsx