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。

Pages and Layouts

目前預設的/app/layout.tsx

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

我們加個內容:

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>**<h1>輔仁大學資訊管理學系</h1>**{children}</body>
    </html>
  )
}

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

Untitled

未來就可以把選單放在layout.tsx裡，所有頁面都會有選單了~

Link

如果要可以切換畫面，可以利用html來新增連結

/app/layout.tsx

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <h1>輔仁大學資訊管理學系</h1>
        **<ul>
          <li><a href="/">主頁面</a></li>
          <li><a href="product">產品管理</a></li>
        </ul>**
        {children}
      </body>
    </html>
  )
}