跳至主要内容

App Router vs. Pages Router

App RouterPages Router
Layout可並用，甚至巢狀 [註1]很難並用
_document.ts不需要 import，直接使用原始的 HTML tag [註2]需要 import 一堆東西來 handle customize specific contents， 例如 GA4、facebook pixel
global styles可放在任何 component file必須放在 _app.ts

補充​

  • App Router 與 Pages Router 是可以共用的，但要注意
    1. App Router 優先度更高
    2. Path name 不可相同 （build time 會 error）

註解​

app/layout.js -> shared for the entire application
app/dashboard/layout.js -> shared for dashboard
// New: App Router ✨
// The root layout is shared for the entire application
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}