Next.js 中 layout.tsx, _app.tsx 以及其他特殊檔案用途

嘿，大家好！我是你們的部落格顧問，今天我們來聊聊 Next.js 中一些特別的檔案，像是 layout.tsx 和 _app.tsx。這些檔案可是 Next.js 應用中的重要角色，知道它們的用途和差異能讓你更好地掌握這個框架。準備好了嗎？讓我們開始吧！

_app.tsx：全局設置的魔法師

首先登場的是 _app.tsx。它可是 Next.js 中的全局設置大師，負責控制應用中的所有頁面。

它的作用

  1. 全局佈局：你可以在這裡設定所有頁面共用的佈局。
  2. 全局樣式：統一引入全局的 CSS 樣式。
  3. 狀態管理：在這裡初始化 Redux 或 Context API 等全局狀態管理工具。
  4. 頁面切換動畫：讓頁面切換時有炫酷的動畫效果。

代碼範例

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '../components/Layout'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

在這段代碼中，我們看到 MyApp 函數組件將所有頁面都包裹在 Layout 中，並且引入了全局樣式。

layout.tsx：頁面佈局的能手

接下來是 layout.tsx。它是專門為特定頁面或一組頁面設計的佈局文件。

它的作用

  1. 特定頁面佈局：為某些頁面設置特定的佈局，與其他頁面區分開來。
  2. 局部樣式：應用在特定頁面的樣式和結構。
  3. 內容包裝：對頁面的內容進行包裝和組織。

代碼範例

import React from 'react'

const Layout: React.FC = ({ children }) => {
  return (
    <div>
      <header>
        <h1>My Application</h1>
        <nav>
          <a href="/">Home</a>
          <a href="/about">About</a>
        </nav>
      </header>
      <main>{children}</main>
      <footer>
        <p>© 2024 My Application. All rights reserved.</p>
      </footer>
    </div>
  )
}

export default Layout

這個 Layout 組件包含了頭部、主內容區和頁腳，你可以用它來包裹特定的頁面。

其他特殊檔案

除了 _app.tsx 和 layout.tsx，還有一些特殊檔案在 Next.js 中扮演著重要角色。讓我們來看幾個例子。

_document.tsx

_document.tsx 用於自定義服務端渲染的 HTML 結構。你可以在這裡插入全局的 meta 標籤、連結樣式表等。

_error.tsx

_error.tsx 用於自定義錯誤頁面。當你的應用發生錯誤時，這個頁面將會顯示。

_middleware.ts

_middleware.ts 是一個中介軟體，用於在請求處理之前插入自定義邏輯。例如，你可以在這裡實現身份驗證或日誌記錄功能。

代碼範例：_document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="stylesheet" href="https://example.com/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

在這裡，我們自定義了 Document，在 Head 中插入了一個外部樣式表。

比較表格

讓我們用一個簡單的表格來比較這些特殊檔案的用途和作用。

檔案用途作用範圍常見用法
_app.tsx全局設置和佈局整個應用全局樣式、狀態管理、頁面切換動畫
layout.tsx特定頁面或一組頁面的佈局特定頁面或組頁面頁面佈局、局部樣式、內容包裝
_document.tsx自定義服務端渲染的 HTML 結構整個應用插入 meta 標籤、連結樣式表
_error.tsx自定義錯誤頁面整個應用顯示自定義錯誤訊息
_middleware.ts中介軟體處理請求整個應用或特定路由身份驗證、日誌記錄、自定義請求邏輯

實際應用中的技巧

使用自定義佈局提升用戶體驗

假設你有一個博客應用，有些頁面需要不同的佈局。例如，首頁可能有一個華麗的橫幅，而文章頁面則需要更專注於內容。你可以這樣做：

文章頁面的自定義佈局

// pages/post/[id].tsx
import PostLayout from '../../components/PostLayout'

const PostPage: React.FC = ({ post }) => {
  return (
    <PostLayout>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </PostLayout>
  )
}

export async function getStaticProps({ params }) {
  // 假設這裡從 API 獲取文章數據
  const post = await fetchPost(params.id)
  return {
    props: { post }
  }
}

export async function getStaticPaths() {
  // 假設這裡獲取所有文章的 ID
  const paths = await fetchAllPostIds()
  return {
    paths,
    fallback: false
  }
}

export default PostPage

這樣，我們就可以為文章頁面應用 PostLayout，提供專屬於文章頁面的佈局和樣式。

中介軟體的實際應用

假設你需要在每個請求之前進行身份驗證，你可以這樣實現：

_middleware.ts

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')

  if (!token) {
    return NextResponse.redirect('/login')
  }

  return NextResponse.next()
}

這樣，每當有請求進來時，我們的中介軟體都會檢查是否存在身份驗證 token，如果沒有，就重定向到登錄頁面。

結論

Next.js 是一個功能強大的框架，了解它的特殊檔案如 _app.tsx、layout.tsx 等，可以讓你更靈活地定義全局設置和頁面佈局，提升應用的用戶體驗和開發效率。希望今天的介紹能幫助你更好地掌握這些特別檔案的用途。Happy coding！