在選擇前端框架時，可靠性對我的客戶至關(guān)重要。盡管我研究了諸如SvelteKit等選項，但"為什么選擇Next.js？"仍然是一個經(jīng)常被問到的問題。在這篇文章中，我將詳細解釋為什么Next.js是一個可靠的選擇，以及它充滿前景的未來。

我的自由職業(yè)客戶經(jīng)常問我哪個前端框架最好。他們不想要最新的潮流；他們想要可靠的東西。我研究了新的選項，比如SvelteKit，但Next.js總是位居前列。這不是關(guān)于最新和最偉大的，而是關(guān)于選擇經(jīng)得起考驗和可靠的東西。在這篇文章中，我們將深入探討為什么我押注在Next.js上的主要原因，以及為什么我對它的未來感到樂觀。

統(tǒng)一采用：客戶和開發(fā)者對 Next.js 的信任

在 GitHub上 獲得了令人矚目的 113,000 顆 Star ?，Next.js 無疑已經(jīng)成為 Web 開發(fā)世界中領(lǐng)先的框架。這些星星在一定程度上可以表明開發(fā)者社區(qū)的普遍欣賞和興趣。雖然不是一個框架質(zhì)量或成功的絕對衡量標準，但它確實暗示了 Next.js 在同行中所取得的關(guān)注和動力。

圖片

然而，在數(shù)字世界中，受歡迎并不足夠，關(guān)鍵是要贏得行業(yè)領(lǐng)袖的信任。而 Next.js 正是做到了這一點。

圖片

像《華盛頓郵報》、Loom 和 Netflix 等主要公司已經(jīng)將 Next.js 集成到他們的技術(shù)堆棧中，展示了它處理大規(guī)模高流量平臺的能力。即使是擁有 1 億 YouTube 訂閱者和龐大社交媒體影響力的內(nèi)容創(chuàng)作者 MrBeast 也是使用 Next.js 構(gòu)建他的在線商店。加入這個列表的還有像 TikTok、Twitch 和 Notion 這樣有影響力的平臺，這使得 Next.js 不僅僅是一個框架，而是數(shù)字革命前線企業(yè)和創(chuàng)作者的值得信賴的合作伙伴。

性能和 SEO：Next.js 采用的驅(qū)動力

圖片

Server vs. client 端渲染。Next.js 繪制。

當 Next.js 首次出現(xiàn)時，它為開發(fā)者提供了一個革命性的選擇：在服務(wù)器上渲染頁面還是在瀏覽器中直接渲染，為 Web 開發(fā)開啟了新紀元。

客戶端渲染 VS 服務(wù)器端渲染 客戶端渲染是指瀏覽器使用 JavaScript 生成和更新網(wǎng)頁，通常導(dǎo)致動態(tài)交互。相比之下，服務(wù)器端渲染是服務(wù)器創(chuàng)建初始頁面，將完全形成的頁面交付給瀏覽器，這可以提供更快的初始加載時間。

隨著 Next.js 13 的推出，游戲發(fā)生了更大的變化。開發(fā)者現(xiàn)在可以根據(jù)每個組件的情況，決定是在服務(wù)器上還是在客戶端上進行渲染。這種微調(diào)確保了最佳性能和最大的靈活性。關(guān)于何時使用每種策略的更清晰圖像，可以在 Next.js 文檔中找到相關(guān)信息。

圖片

Next.js 中的渲染策略

Next.js 提供了三種主要的渲染策略，每種都對 SEO 和性能有獨特的影響：

• 靜態(tài)渲染：在構(gòu)建時創(chuàng)建頁面，緩存并通過內(nèi)容交付網(wǎng)絡(luò)（CDN）進行分發(fā)。由于它的可預(yù)測性和快速的加載時間，它非常適合不經(jīng)常更改的內(nèi)容，比如博客文章。
• 動態(tài)渲染：頁面根據(jù)用戶請求生成，促進個性化內(nèi)容。雖然這提供了自定義用戶體驗，但速度可能會慢一些，可能會影響 SEO。不過，通過適當?shù)恼{(diào)整，仍然可以保持最佳性能。
• 流式渲染：服務(wù)器逐漸渲染 UI 片段。這種方法可以增強感知性能，允許用戶在整個內(nèi)容完成渲染之前與頁面的部分部分進行互動——這對依賴較慢數(shù)據(jù)獲取的內(nèi)容來說絕對是一個優(yōu)勢。

作出正確選擇：Edge 和 Node.js 運行時

在快速發(fā)展的 Next.js 世界中，開發(fā)者面臨著更多的選擇，這些選擇不僅影響渲染，還影響性能和 SEO 的基礎(chǔ)。這兩個核心運行時引領(lǐng)了這一提供，每個運行時都在這些領(lǐng)域具有獨特的優(yōu)勢。

• Edge 運行時：專為快速的全球內(nèi)容交付而定制，Edge 運行時利用分布式服務(wù)器。它的優(yōu)勢在于即時的低延遲用戶體驗，可以極大地提升網(wǎng)站性能和用戶參與度。雖然它的速度對 SEO 是一個優(yōu)勢，但與 Node.js 相比，它的功能范圍有限，可能需要根據(jù)內(nèi)容需求來取得平衡。
• Node.js 運行時：作為 Next.js 的基礎(chǔ)，Node.js 運行時打開了廣闊的生態(tài)系統(tǒng)和 API。雖然它的啟動時間可能落后于 Edge，但它提供了可以顯著增強站點動態(tài)性的功能，這反過來對于富有 SEO 的內(nèi)容和復(fù)雜的 Web 應(yīng)用程序非常重要。

通過將運行時選擇與您的目標對齊，您可以優(yōu)化您的 Next.js 項目，同時提高性能和搜索可見性。

圖片

React服務(wù)器組件的強大

React 服務(wù)器組件在這個新時代至關(guān)重要，它使 Next.js 開發(fā)者能夠創(chuàng)建直接在服務(wù)器上渲染的UI組件。這將帶來重大的 SEO 和性能優(yōu)勢：

• 高效的數(shù)據(jù)獲?。和ㄟ^將數(shù)據(jù)檢索靠近其源頭，它減少了客戶端請求，加速了數(shù)據(jù)檢索過程。
• 增強的安全性：確保服務(wù)器上保持敏感信息，如令牌和 API 密鑰的安全性。
• 減小 Bundle Sizes：通過在服務(wù)器端保留大型依賴項，可以最小化客戶端 JavaScript 捆綁大小 —— 對于互聯(lián)網(wǎng)速度較慢或基本設(shè)備的用戶來說是一個福音。
• 優(yōu)化初始頁面加載：在服務(wù)器上呈現(xiàn) HTML，讓用戶立即查看內(nèi)容，而無需等待客戶端渲染。
• 提高 SEO 和可分享性：向搜索引擎和社交平臺提供完全呈現(xiàn)的 HTML，改進索引和內(nèi)容預(yù)覽。

加載 UI 和流式渲染：Next.js 增強用戶體驗的答案

在今天的 Web 景觀中，用戶體驗至關(guān)重要。內(nèi)容加載的任何延遲都可能降低用戶的參與度或轉(zhuǎn)化率：

沃爾瑪發(fā)現(xiàn)，每提高 1 秒的頁面加載時間，轉(zhuǎn)化率增加 2%。

鑒于這一點，Next.js 引入了 loading.js約定，結(jié)合 React Suspense，提供有意義的加載 UI。這確保了用戶在特定路由段的內(nèi)容準備就緒時立即看到加載狀態(tài)。

圖片

流式渲染將其提升到更高水平。通過在服務(wù)器上準備好的 UI 片段，用戶可以在整個內(nèi)容完成渲染之前開始瀏覽頁面的部分部分。

集成到 Next.js 應(yīng)用程序路由器中，流式渲染提高了初始頁面加載速度和依賴于較慢數(shù)據(jù)獲取的 UI。結(jié)果是用戶得到迅速的反饋，即使在像產(chǎn)品評論這樣的內(nèi)容豐富頁面上也是如此。

有了這些工具，開發(fā)者可以設(shè)計加載 UI，以及策略性地流式傳送路由部分，從而確保提供最佳的用戶體驗。

圖片

如果您想以互動方式體驗這些功能，請查看這個出色的 Next.js 13 應(yīng)用程序游樂場演示。參見 ?https://vercel.com/templates/next.js/app-directory

內(nèi)置優(yōu)化

它并不僅止于此。在 Next.js 的核心是內(nèi)置的優(yōu)化，確保圖像、字體和腳本都經(jīng)過優(yōu)化，以提供最佳的用戶體驗。這些特定針對核心 Web 要點的增強功能，確保用戶在每次訪問時都能得到最佳的體驗。

使用next/image優(yōu)化圖像

圖像是現(xiàn)代 Web 設(shè)計的重要組成部分，通常決定用戶的參與度和認知度。識別了它們的關(guān)鍵作用，Next.js Image 組件提供了一系列旨在增強性能和用戶體驗的優(yōu)點：

• 最佳大?。和ㄟ^自動提供正確大小的圖像，適應(yīng)不同的設(shè)備顯示。
• 現(xiàn)代格式：采用像 WebP 和 AVIF 這樣的尖端圖像格式，確保高質(zhì)量的同時減小文件大小。
• 視覺穩(wěn)定性：通過確保圖像在加載時保持其分配的空間，防止了破壞性的布局變化。
• 智能加載：實現(xiàn)本機瀏覽器延遲加載，確保僅在即將進入視口時才獲取圖像。
• 增強用戶體驗：可選擇模糊占位符，以在圖像加載時提供平滑的過渡。
• 無與倫比的靈活性：即使對于外部托管的圖像也可以實時調(diào)整大小。

使用next/script優(yōu)化第三方腳本

第三方腳本，如 Google Tag Manager，通常會對網(wǎng)站性能產(chǎn)生負面影響，從而顯著影響 SEO。Next.js 通過其 next/script 模塊來解決這一問題，為開發(fā)者提供了增強的控制和優(yōu)化。使用 next/script 的主要優(yōu)勢包括：

• 策略性加載：根據(jù)需要自定義腳本的加載方式和時間，以優(yōu)化網(wǎng)站速度。
• Web Worker 卸載（實驗性的）：通過從主線程卸載腳本，可以提高性能。

Next.js 的 next/link 組件：轉(zhuǎn)化 Web 導(dǎo)航

流暢的導(dǎo)航是積極的用戶體驗的核心。Next.js 中的  組件提升了這一點，使 Web 應(yīng)用程序感覺即時和用戶中心化。以下是為什么它至關(guān)重要的原因：

• 即時加載：借助預(yù)取的功能， 甚至在用戶單擊之前就預(yù)先加載內(nèi)容。這意味著路由轉(zhuǎn)換幾乎是瞬間的，幾乎沒有等待時間。
• 動態(tài)鏈接：的靈活性在處理不同內(nèi)容時尤其突出。它輕松適應(yīng)動態(tài)段，使開發(fā)者可以輕松地創(chuàng)建到包含可變數(shù)據(jù)的頁面的鏈接，比如博客文章或產(chǎn)品列表。
• 效率：在幕后， 使用了一些策略，如部分渲染和內(nèi)存中緩存。這確保只有必要的內(nèi)容更新，而以前獲取的數(shù)據(jù)可以快速從緩存中檢索。結(jié)果是站點轉(zhuǎn)換迅速，資源利用效率高。

Next.js Metadata API：增強 SEO 和 Web 可分享性

元數(shù)據(jù)是 Web 重要性的無形動力，驅(qū)動搜索引擎排名，并增強平臺之間的可分享性。Next.js 提供了強大的 Metadata API，允許開發(fā)者輕松地集成這些關(guān)鍵數(shù)據(jù)片段。您可以通過 Next.js 中的兩種簡化的方式嵌入元數(shù)據(jù)：

基于配置：從布局或頁面文件中簡單地導(dǎo)出元數(shù)據(jù)對象。

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

基于函數(shù)：使用 generateMetadata 函數(shù)來獲取需要動態(tài)值的元數(shù)據(jù)。

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

Key Benefits:

• 增強的 SEO：元數(shù)據(jù)增強了搜索引擎對內(nèi)容的理解和排名，確保其達到預(yù)期的受眾。
• 提高可分享性：元數(shù)據(jù)，特別是在使用 Open Graph 等動態(tài)圖像的情況下，使您的內(nèi)容在社交平臺上共享時更具吸引力和可理解性。
• 靈活性：無論您需要靜態(tài)、不變的元數(shù)據(jù)還是動態(tài)、特定內(nèi)容的元數(shù)據(jù)，Next.js 都能滿足您的需求。
• 自動管理  元素：通過該 API，Next.js 自動生成適當?shù)? 元素，節(jié)省時間并避免錯誤。

使用 @vercel/og 生成 Open Graph（OG）圖像

通過利用 Open Graph 協(xié)議和 @vercel/og 庫，可以提升您在社交媒體上的存在感。這個工具允許為社交媒體共享生成動態(tài)和自定義圖像。

關(guān)鍵優(yōu)勢包括：

• 性能：通過最小的代碼快速生成圖像，通過 Edge Functions 增強。
• 易于使用：通過熟悉的 HTML 和 CSS 定義圖像，同時庫處理動態(tài)圖像生成。
• 經(jīng)濟實惠：自動添加的標頭在邊緣緩存圖像，節(jié)省資源并避免重復(fù)計算。
• 多功能性：支持各種 CSS 布局、自定義字體、嵌套圖像，甚至在部署之前提供對 OG 圖像的預(yù)覽。

圖片

通過 Next.js 提升開發(fā)者體驗

在快節(jié)奏的 Web 開發(fā)世界中，效率和易用性可以使項目的成功有所不同。一個框架的功能，結(jié)合簡化的開發(fā)者旅程，可以極大地影響項目的成功。在 Next.js 中，開發(fā)者不僅僅獲得了工具，還提供了一個生態(tài)系統(tǒng)，從構(gòu)思到部署都旨在優(yōu)化他們的工作流程。讓我們深入了解 Next.js 為開發(fā)者中受歡迎的選擇的原因。

生產(chǎn)就緒的 React 框架

React 以其創(chuàng)建動態(tài) UI 組件的能力而取得了一定的成就。然而，盡管其靈活性允許了廣泛的可能性，但它并不滿足更廣泛的架構(gòu)需求，比如路由或數(shù)據(jù)獲取。為了彌合這一差距，React 團隊推廣全?？蚣?，Next.js（以及 Remix）位居首位：

圖片

集成中間件和后端的統(tǒng)一開發(fā)

Next.js 通過直觀地集成中間件和后端功能而脫穎而出。它是一個一站式解決方案。開發(fā)者可以在同一個框架內(nèi)處理前端和后端，簡化整個流程。這種統(tǒng)一消除了不斷的上下文切換，甚至編程語言切換的需要，確保了高效的開發(fā)體驗。

圖片

無縫部署與 Vercel

部署階段通常被視為繁瑣的過程。然后 Vercel 進入了這個領(lǐng)域。專門針對 Next.js，Vercel 簡化了部署過程，使其變得直接而無憂。只需幾個步驟，您的應(yīng)用程序就可以投入使用，準備擴展，并優(yōu)化性能。

以下是我最喜歡的關(guān)于 Vercel 的部分：

• 免費的 Hobby 層：Vercel 提供了適合 Next.js 開發(fā)者的免費 Hobby 層，享受快速的全球交付、自動 Git 集成和無服務(wù)器函數(shù)。這是在不花費任何成本的情況下啟動 Next.js 作品集項目的絕佳選擇。

圖片

• 推送到部署：通過簡單的 git push，每次部署都會自動觸發(fā)創(chuàng)建實時預(yù)覽站點，使其與您的更改保持同步。不需要額外的命令。
• 自動預(yù)覽：每個新分支都會自動獲得自己的實時、類似于生產(chǎn)的 URL。這是團隊中的每個人或客戶實時查看更改和更新的最佳方式。

圖片

• 協(xié)作UI審查：Vercel 鼓勵協(xié)作工作流程。團隊成員可以直接在 UI 組件、布局、拷貝等上發(fā)表評論，促進實時反饋。這種協(xié)作與 GitHub 和 Slack 等平臺無縫集成。
• 快速回滾以快速恢復(fù)：Vercel 的 Instant Rollback 允許團隊迅速恢復(fù)到先前的生產(chǎn)部署，確保快速從任何未預(yù)料的生產(chǎn)問題中恢復(fù)，比如重大錯誤或破壞性更改。特別是在關(guān)鍵事件期間，這個功能對于保持正常運行時間和無縫的用戶體驗至關(guān)重要。

第一流的 Next.js 文檔

一個框架的成功往往取決于其文檔的清晰度和可訪問性。Next.js 在這個領(lǐng)域表現(xiàn)出色，提供了精心制作和結(jié)構(gòu)良好的文檔，有幾個原因使其脫穎而出：

圖片

• 直觀導(dǎo)航：無縫切換頁面和應(yīng)用程序路由的文檔。
• 強大搜索：使用強大的搜索功能查找您尋找的精確細節(jié)。
• 組織良好的布局：在左側(cè)邊欄中呈現(xiàn)基本概念，右側(cè)可以快速跳轉(zhuǎn)到各個部分，導(dǎo)航非常方便。
• 視覺學(xué)習：清晰、引人入勝的圖像有助于闡明核心概念，增強理解。
• 開發(fā)者工具：使用專門的按鈕輕松復(fù)制代碼片段，并根據(jù)需要在 JavaScript 和 TypeScript 視圖之間進行選擇。
• 社區(qū)參與：一個 “在GitHub上編輯此頁面” 的鏈接鼓勵社區(qū)反饋和更新，確保文檔不斷改進。

使用多功能模板快速啟動開發(fā)

從頭開始啟動項目可能會令人望而卻步。有了 Next.js，您不再需要重新發(fā)明輪子。它提供了一個廣泛的多功能模板庫，適用于各種用途，無論您是構(gòu)建基于 AI 的應(yīng)用、電子商務(wù)商店、博客還是 SaaS 平臺。

我個人最喜歡的模板包括以下：

• ?Platform Starter Kit - Steven Tey
• ?Next.js AI Chatbot - Steph Dietz
• ?Novel – AI-powered Notion-style editor - Steven Tey

React 茁壯成長的生態(tài)系統(tǒng)：未來的明智選擇

在涉及到技術(shù)抉擇時，"永遠不要押注反對 React" 的格言比以往任何時候都更為真實。Next.js 的崛起與 React 茂盛的生態(tài)系統(tǒng)息息相關(guān)。一個僅僅是一個 UI 組件構(gòu)建器的庫已經(jīng)發(fā)展成為一個全面的生態(tài)系統(tǒng)，驅(qū)動著許多 Web 上最具活力的應(yīng)用程序。

React 的廣泛采用意味著有大量的資源、庫和社區(qū)解決方案可用。以下是我最喜歡的庫的簡要列表，可加速您的 Next.js 全棧應(yīng)用程序的開發(fā)。

• shadcn/ui
• react-hook-form
• tanstack query
• tanstack table
• trpc
• tremor.so
• clerk auth
• drizzle orm
• zod
• react-select
• Vercel AI SDK
• Upstash Rate Limiter

Next.js 的成功證明了 React 的能力和其強大的生態(tài)系統(tǒng)。選擇 Next.js，從而間接選擇 React，開發(fā)者們將自己與一個未來可靠且不斷發(fā)展的技術(shù)堆棧相一致，這個技術(shù)堆棧得到了充滿激情和創(chuàng)新的社區(qū)的支持。明顯的是：押注 React 就是押注更明亮、更高效、更流暢的 Web 開發(fā)未來。

原文鏈接：https://www.felixvemmer.com/blog/why-next-js
作者：Felix Vemmer
譯者：編程界