在Next.Js 14中新增Google字型的三種方法

在 Next.js 專案中新增 Google Web 字型可以優化效能，因為字型會在構建時繫結，本文將向您展示三種管理方法，以便您的 Web 應用程式實現最高效能。

現在，Next.js 帶來了一些令人驚歎的改進/新增功能，使 React 生態系統中的前端工程走上了一條更出色、更注重效能的道路。

Next.js 中還有一個提升效能的功能，那就是 Google 字型的使用方式。

從 Next.js 13 開始，谷歌字型的使用將採用一種不同的方式。這種方法可以提供額外的效能提升，因為（自定義）字型現在會在構建時捆綁到應用程式中。因此，無論何時使用應用程式，都不會請求獲取字型。

在本文中，為了與這種在構建時將 Google 字型新增到 Next.js 應用程式的新方法保持一致，我將展示三種將字型新增到下一個 Next.js 專案的不同方法。

我們將安裝一個使用 Tailwindcss 引導的 Next.js 應用程式。

安裝新的 Next.js 應用（使用 Tailwindcss）

安裝 Next.js 應用程式非常簡單。請參閱 Next.js 文件中的安裝頁面，瞭解詳細的安裝過程。

只需確保在安裝應用程式時使用應用程式路由器即可。安裝完成後即可繼續。

分析 Next.js 佈局檔案中的 Google 字型使用情況

應用程式的入口點是新安裝的 Next.js 中的 layout.js 檔案。因此，正如下面的截圖所示，谷歌字型可以匯入到該檔案中，並應用到包裹應用程式剩餘部分的任何可用元素或元件中。

自定義字型是用字型包裝應用程式其餘部分之前的一個過程。如上截圖中第 4 行所示，在最終使用字型之前，我們對字型進行了簡單的自定義。

在 Next.js 中使用 Google 字型與我們一直使用的常規方法一樣靈活（甚至可能更靈活）。你可以使用多種字型、設定字型權重，還可以進行其他自定義操作，這些我們將在本文的後面部分介紹。

讓我們看看使用這種新的構建時間字型使用方法將 Google 字型新增到 Next.js 的三種不同方法。

方法 1：通過 CSS（變數和選擇器）在 Next.Js 14 中使用 Google 字型

第一種方法需要使用 CSS 變數和你選擇的任何 CSS 選擇器。

簡單回顧一下變數和選擇器

變數是程式語言中的常用術語，但在 CSS 中使用變數（也稱為自定義屬性）已經有一些年頭了。

下面的程式碼示例展示瞭如何在 CSS 中建立和使用變數。

:root {
--spacing: 10px;
}
.button {
padding: var (--spacing) var (--spacing * 2);
margin: var (--spacing);
}

另一方面，CSS 選擇器是用於在網頁中定位 HTML 元素的模式。下面是 CSS 選擇器及其型別名稱的一些示例。

*Type Selector* or *Element Selector*:
selects HTML elements by their types.
Example: `div` (selects all `div` elements).
*Class Selector*:
selects HTML elements by the `class` names assigned to them.
Example: `.btn` (selects all elements with the `class` attribute value set to `"btn"`).
*ID Selector*:
selects HTML elements by the `id` names assigned to them.
Example: `#header` (selects the element with the `id` attribute value set to `"header"`).

如你所見，這些（CSS 元素和選擇器）都是 CSS 的基本概念，但我還是想解釋一下，以防你需要複習一下。在本文中，你將需要這些知識。

在佈局檔案中匯入和設定字型

檢視上面的截圖，你會發現只匯入和使用了一種字型。此外，在該截圖中，用於新增 Google 字型的方法是預設的 className 方法，我們將在本文稍後部分介紹該方法。

如上面第二張截圖所示，我們匯入並使用了多種（兩種）字型。您還可以在 Next.Js 14 中檢視如何匯入和使用多種字型。

解釋執行過程

首先：從上面第二張截圖中可以看出，我們匯入了兩種字型，並將其附加到不同的變數中，然後進行了如上配置。它們配置了不同的選項，你可以瞭解並將其新增到你的專案中。

上述截圖中最相關的兩項配置是變數和字型權重（重量）。

然後：從上面的截圖中，我們還可以看到一個 nunito_sans （字型）類是如何附加到作為 children 道具包裝器的 main 元素上的。然後，我們需要在 layout.js 檔案匯入的 CSS 檔案中設定該類（以及 poppins 字型的類），如上圖第二張截圖所示。下面是第三張截圖，顯示了實現的過程。

注意：請仔細觀察 CSS 中呼叫的字型配置中是如何使用相同變數的。不過請注意，你可以使用任何你想要的選擇器模式。(選擇器模式已在上文解釋）。例如，你可以直接針對 HTML 元素而不是類。

最後：既然我們選擇了多種字型，並且只使用了其中一種 – nunito_sans （字型）類，那麼現在我們就可以在應用程式中的任意位置使用其他字型，而不會再有任何麻煩。下面是第四張截圖的實現情況。

將字型設定提取到不同的字型實用程式檔案中

在完成上述所有設定後，我們可以看到，將字型設定提取到一個單獨的實用程式檔案中，可以使我們的工作更加簡潔。這樣一來，字型實用程式檔案就會變成下面第五張截圖中的樣子。

我們的 layout.js 檔案看起來就像下面第六張截圖所示的那樣簡單。請仔細觀察字型（配置變數）是如何匯出為新的 JavaScript 變數，然後匯入並用於 layout.js 檔案的。

注：還要觀察並注意，用於封裝 children 道具的 main 元素上的 nunito_sans （字型）類與從 utils 檔案匯入的 JavaScript 變數不同，儘管它們的拼寫相同。你可以更改拼寫以避免混淆/錯誤。

這種方法是我最喜歡的，因為從長遠來看，它簡化了你的構建工作。設定完成後，您只需呼叫自定義字型類，然後就可以享受構建過程了。

方法 2：通過 Tailwindcss 配置在 Next.js 14 中使用谷歌字型

下一種方法是使用 Tailwindcss 配置檔案設定字型。

簡要回顧一下 Tailwindcss 配置檔案

Tailwindcss 配置檔案是一個包含專案中 Tailwindcss 配置的檔案。以下是為本演示安裝的應用程式的 Tailwindcss 配置檔案。

匯入和設定字型

在使用第二種方法重構程式碼並引入字型實用程式檔案來實現字型之前，我們不會從頭開始。字型實用程式檔案將與上文討論的第一種方法保持一致，如下截圖所示。

在這種情況下，差異將來自於

• 在專案中使用字型，以及
• 我們不會使用 CSS（變數和選擇器）*，而是在 Tailwindcss 配置檔案中處理字型設定。

解釋執行過程

首先：如上所述，我們已經確定字型工具檔案將保持不變。現在，我們可以在 Tailwindcss 配置檔案中設定字型。

其次：下面是 Tailwindcss 配置檔案的外觀。

這裡值得注意的變化是在 extend 物件中新增了 fontFamily 物件/設定，而該物件又包含在 Tailwindcss 配置檔案的 theme 物件中。這就是我們需要做的全部工作。

最後：現在，我們可以在應用程式中的任何地方使用字型，就像在上一個方法中所做的那樣。但在這種情況下，我們需要在每個字型 class 的字首加上 “font” 關鍵字。因此， nunito_sans （字型）類將變為 font-nunito_sans， poppins（字型）類將變為 font-poppins – 如下兩張截圖所示，分別是 layout.js 檔案和 page.js 檔案。

方法 3：通過預設的 className 方法在 Next.js 14 中使用 Google 字型

本文的最後一種方法是全新安裝 Next.js 14 時使用的預設方法。

瞭解本地/預設 className 方法

在新安裝的 Next.js 應用程式中使用的預設方法有一些缺點。這種方法的一個問題是，由於字型是使用變數以 Javascript 格式匯入和配置的，因此必須不斷將一行 class 名轉換為 JSX。前面討論過的另外兩種方法涉及到 CSS 的使用，因此更易於使用；它們能讓你在開發過程中獲得更好的開發體驗。

下面是在新安裝的 Next.js 應用程式中匯入和使用字型的情況。

匯入和設定字型

本方法的字型匯入在字型實用程式檔案中將保持不變。但我們需要做一些改動。

解釋執行過程

首先：在本方法中，從字型工具檔案中 export 的將是 className 名（例如， nunit_sans_init.className ），而不是前兩種方法中使用的 CSS 變數（例如， nunit_sans_init.variable ）。此外，請注意，我們不需要像其他兩種方法那樣，在全域性 CSS 檔案或 Tailwindcss 配置檔案中做任何進一步設定。

請看下面的截圖。

最後：現在，我們可以在應用程式中的每個 className 屬性上使用從字型實用程式檔案匯出的 JavaScript 變數，如下圖所示。

這種方法的另一個問題是，無論在哪個檔案中使用字型，我們都必須不斷地將字型匯入。

這種方法適用於簡單專案或只需使用單一字型的專案。但是，如果需要使用多種字型，這種方法就變得具有挑戰性。

對三種不同方法的比較和評論

本文討論的三種方法各有利弊。以下是我對如何使用它們的評論。

如果你正在構建一個需要多種字型的專案，請使用 CSS（變數和選擇器）方法或 TailwindCSS 配置方法。尤其是中型或大型字型。這將給你帶來靈活性和便利性，只需呼叫 CSS 類名，你的字型就能完美執行。

這兩種方法的問題在於需要花費大量時間進行設定。不過，當你掌握了這些步驟後，這就不再是問題了。

CSS（變數和選擇器）方法是我最推薦的方法，因為它最簡單易用。它給你帶來的令人印象深刻的開發體驗是無與倫比的。

如果你正在構建一個簡單或小規模的專案，請使用預設的 className 方法。如果你正在構建一個只需要單一字型的專案，這種方法也是一個完美的選擇。

小結

就是這樣。在 Next.js 14 應用程式中使用 Google 字型的三種超棒方法：充分利用新的構建時間方法，為應用程式使用者提供他們應得的更好 UX（使用者體驗）。