五個讓你使用 Next.js 14 更輕松的技巧與提示
Next.js 14 是一個強大的 React 框架，它簡化了構建服務器渲染的 React 應用程序的過程。然而，由于其先進的功能和約定，對于開發人員，特別是剛接觸該框架的開發人員來說，可能會產生一些困惑和不明確的地方。在這篇博客中，我們將探討五個技巧和提示，幫助你更輕松地使用 Next.js 14。
提示 1：處理 Next.js 圖片
圖片處理是 Next.js 中一個常見的困惑點。根據你處理的是本地圖片還是遠程圖片，方法會有所不同。
本地圖片
對于本地圖片，你無需指定寬度和高度。Next.js 會自動識別圖片的尺寸。你只需導入圖片并使用 next/image 組件進行渲染。
遠程圖片
對于遠程圖片，你需要提供一個模糊的占位符，并指定寬度和高度以防止布局偏移。你可以使用 placeholder="blur" 屬性，在圖片完全加載之前顯示模糊版本。
為了生成遠程圖片的模糊數據 URL，你可以使用 sharp 和 placeholder 包：
import Image from "next/image";
import getBase64 from "./utils/getBase64";
export default async function MyComponent() {
const blurDataUrl = await getBase64(remoteImageUrl);
return (
<Image
src={remoteImageUrl}
width={600}
height={600}
alt="Remote Image"
placeholder="blur"
blurDataURL={blurDataUrl}
/>
);
}getBase64 實用函數會獲取遠程圖片，將其轉換為 ArrayBuffer，然后使用 placeholder 包生成 base64 表示形式。
提示 2：處理環境變量
在標記環境變量時要小心，next.config.env.NEXT_PUBLIC_* 前綴的變量會暴露在瀏覽器中，并被包含在 JavaScript 包中。如果你有敏感的 API 密鑰或機密信息，確保不要為它們添加 NEXT_PUBLIC_ 前綴，這樣它們只會在 Node.js 環境中可用。
提示 3：理解 Next.js 緩存
Next.js 在開發環境和生產環境中的緩存行為不同。在開發模式下，頁面會默認在每次請求時動態渲染。而在生產模式下，Next.js 會嘗試靜態渲染頁面。
在生產中，你可以使用 revalidate 選項或顯式將頁面標記為動態，以控制緩存。
// 每 5 秒重新驗證
export const revalidate = 5
// 強制動態渲染
export const dynamic = 'force-dynamic'提示 4：在服務器組件中獲取數據
避免僅僅使用 API 路由處理器來獲取服務器組件中的數據。相反，直接在服務器組件中獲取數據。這種方法允許 Next.js 優化緩存并在多個服務器組件之間重用數據。
如果你需要在多個組件之間重用相同的獲取邏輯，可以考慮在 server/ 目錄中創建一個服務器操作。
export async function getJoke() {
const res = await fetch("https://api.example.com/joke");
const data = await res.json();
if (res.ok) {
return { success: true, joke: data.joke };
} else {
return { error: data.error };
}
}
// app/page.jsx
import { getJoke } from "../server/actions";
export default async function Page() {
const { success, joke, error } = await getJoke();
if (success) {
return <div>{joke}</div>;
} else {
throw new Error(error);
}
}提示 5：理解客戶端和服務器組件
在 Next.js 中，頁面默認是服務器組件。你可以在服務器組件中渲染客戶端組件，以增加交互性。
"use client";
import { useState } from "react";
export default function ClientComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}在客戶端組件中渲染的子組件會自動成為客戶端組件，無需再添加 ’use client’ 指令。
當使用提供者（例如主題提供者）時，在布局中使用提供者包裝子組件，子組件仍然會作為服務器組件進行渲染。
// app/layout.jsx
import { ThemeProvider } from "your-theme-library";
export default function RootLayout({ children }) {
return <ThemeProvider>{children}</ThemeProvider>;
}總結
Next.js 14 是一個功能強大且豐富的框架，它簡化了服務器渲染的 React 應用程序的開發。雖然它引入了一些新概念和約定，但按照這篇博客中的提示和技巧操作，可以幫助你順利度過可能遇到的困惑和不明確的地方。
通過理解如何處理圖片、管理環境變量、控制緩存、在服務器組件中獲取數據以及區分客戶端和服務器組件，你將更好地構建強大高效的 Next.js 14 應用程序。
記住，實踐和經驗是掌握任何新技術的關鍵。不要猶豫，探索 Next.js 文檔、加入社區論壇，并通過框架的功能進行實驗，以進一步鞏固你的理解。
