在選擇前端框架時，可靠性對我的客戶至關重要。盡管我研究了諸如SvelteKit等選項，但"為什么選擇Next.js？"仍然是一個經常被問到的問題。在這篇文章中，我將詳細解釋為什么Next.js是一個可靠的選擇，以及它充滿前景的未來。
我的自由職業客戶經常問我哪個前端框架最好。他們不想要最新的潮流；他們想要可靠的東西。我研究了新的選項，比如SvelteKit，但Next.js總是位居前列。這不是關于最新和最偉大的，而是關于選擇經得起考驗和可靠的東西。在這篇文章中，我們將深入探討為什么我押注在Next.js上的主要原因，以及為什么我對它的未來感到樂觀。
統一采用：客戶和開發者對 Next.js 的信任
在 Github上 獲得了令人矚目的 113,000 顆 Star ?，Next.js 無疑已經成為 Web 開發世界中領先的框架。這些星星在一定程度上可以表明開發者社區的普遍欣賞和興趣。雖然不是一個框架質量或成功的絕對衡量標準，但它確實暗示了 Next.js 在同行中所取得的關注和動力。
圖片
然而，在數字世界中，受歡迎并不足夠，關鍵是要贏得行業領袖的信任。而 Next.js 正是做到了這一點。
圖片
像《華盛頓郵報》、Loom 和.NETflix 等主要公司已經將 Next.js 集成到他們的技術堆棧中，展示了它處理大規模高流量平臺的能力。即使是擁有 1 億 YouTube 訂閱者和龐大社交媒體影響力的內容創作者 MrBeast 也是使用 Next.js 構建他的在線商店。加入這個列表的還有像 TikTok、Twitch 和 Notion 這樣有影響力的平臺，這使得 Next.js 不僅僅是一個框架，而是數字革命前線企業和創作者的值得信賴的合作伙伴。
性能和 seo：Next.js 采用的驅動力
圖片
Server vs. client 端渲染。Next.js 繪制。
當 Next.js 首次出現時，它為開發者提供了一個革命性的選擇：在服務器上渲染頁面還是在瀏覽器中直接渲染，為 Web 開發開啟了新紀元。
客戶端渲染 VS 服務器端渲染 客戶端渲染是指瀏覽器使用 JAVAScript 生成和更新網頁，通常導致動態交互。相比之下，服務器端渲染是服務器創建初始頁面，將完全形成的頁面交付給瀏覽器，這可以提供更快的初始加載時間。
隨著 Next.js 13 的推出，游戲發生了更大的變化。開發者現在可以根據每個組件的情況，決定是在服務器上還是在客戶端上進行渲染。這種微調確保了最佳性能和最大的靈活性。關于何時使用每種策略的更清晰圖像，可以在 Next.js 文檔中找到相關信息。
圖片
Next.js 中的渲染策略
Next.js 提供了三種主要的渲染策略，每種都對 SEO 和性能有獨特的影響：
- 靜態渲染：在構建時創建頁面，緩存并通過內容交付網絡（CDN）進行分發。由于它的可預測性和快速的加載時間，它非常適合不經常更改的內容，比如博客文章。
- 動態渲染：頁面根據用戶請求生成，促進個性化內容。雖然這提供了自定義用戶體驗，但速度可能會慢一些，可能會影響 SEO。不過，通過適當的調整，仍然可以保持最佳性能。
- 流式渲染：服務器逐漸渲染 UI 片段。這種方法可以增強感知性能，允許用戶在整個內容完成渲染之前與頁面的部分部分進行互動——這對依賴較慢數據獲取的內容來說絕對是一個優勢。
作出正確選擇：Edge 和 Node.js 運行時
在快速發展的 Next.js 世界中，開發者面臨著更多的選擇，這些選擇不僅影響渲染，還影響性能和 SEO 的基礎。這兩個核心運行時引領了這一提供，每個運行時都在這些領域具有獨特的優勢。
- Edge 運行時：專為快速的全球內容交付而定制，Edge 運行時利用分布式服務器。它的優勢在于即時的低延遲用戶體驗，可以極大地提升網站性能和用戶參與度。雖然它的速度對 SEO 是一個優勢，但與 Node.js 相比，它的功能范圍有限，可能需要根據內容需求來取得平衡。
- Node.js 運行時：作為 Next.js 的基礎，Node.js 運行時打開了廣闊的生態系統和 API。雖然它的啟動時間可能落后于 Edge，但它提供了可以顯著增強站點動態性的功能，這反過來對于富有 SEO 的內容和復雜的 Web 應用程序非常重要。
通過將運行時選擇與您的目標對齊，您可以優化您的 Next.js 項目，同時提高性能和搜索可見性。
圖片
React服務器組件的強大
React 服務器組件在這個新時代至關重要，它使 Next.js 開發者能夠創建直接在服務器上渲染的UI組件。這將帶來重大的 SEO 和性能優勢：
- 高效的數據獲取：通過將數據檢索靠近其源頭，它減少了客戶端請求，加速了數據檢索過程。
- 增強的安全性：確保服務器上保持敏感信息，如令牌和 API 密鑰的安全性。
- 減小 Bundle Sizes：通過在服務器端保留大型依賴項，可以最小化客戶端 JavaScript 捆綁大小 —— 對于互聯網速度較慢或基本設備的用戶來說是一個福音。
- 優化初始頁面加載：在服務器上呈現 html，讓用戶立即查看內容，而無需等待客戶端渲染。
- 提高 SEO 和可分享性：向搜索引擎和社交平臺提供完全呈現的 HTML，改進索引和內容預覽。
加載 UI 和流式渲染：Next.js 增強用戶體驗的答案
在今天的 Web 景觀中，用戶體驗至關重要。內容加載的任何延遲都可能降低用戶的參與度或轉化率：
沃爾瑪發現，每提高 1 秒的頁面加載時間，轉化率增加 2%。
鑒于這一點，Next.js 引入了 loading.js約定，結合 React Suspense，提供有意義的加載 UI。這確保了用戶在特定路由段的內容準備就緒時立即看到加載狀態。
圖片
流式渲染將其提升到更高水平。通過在服務器上準備好的 UI 片段，用戶可以在整個內容完成渲染之前開始瀏覽頁面的部分部分。
集成到 Next.js 應用程序路由器中，流式渲染提高了初始頁面加載速度和依賴于較慢數據獲取的 UI。結果是用戶得到迅速的反饋，即使在像產品評論這樣的內容豐富頁面上也是如此。
有了這些工具，開發者可以設計加載 UI，以及策略性地流式傳送路由部分，從而確保提供最佳的用戶體驗。
圖片
如果您想以互動方式體驗這些功能，請查看這個出色的 Next.js 13 應用程序游樂場演示。參見 ?https://vercel.com/templates/next.js/App-directory
內置優化
它并不僅止于此。在 Next.js 的核心是內置的優化，確保圖像、字體和腳本都經過優化，以提供最佳的用戶體驗。這些特定針對核心 Web 要點的增強功能，確保用戶在每次訪問時都能得到最佳的體驗。
使用next/image優化圖像
圖像是現代 Web 設計的重要組成部分，通常決定用戶的參與度和認知度。識別了它們的關鍵作用，Next.js Image 組件提供了一系列旨在增強性能和用戶體驗的優點：
- 最佳大小：通過自動提供正確大小的圖像，適應不同的設備顯示。
- 現代格式：采用像 WebP 和 AVIF 這樣的尖端圖像格式，確保高質量的同時減小文件大小。
- 視覺穩定性：通過確保圖像在加載時保持其分配的空間，防止了破壞性的布局變化。
- 智能加載：實現本機瀏覽器延遲加載，確保僅在即將進入視口時才獲取圖像。
- 增強用戶體驗：可選擇模糊占位符，以在圖像加載時提供平滑的過渡。
- 無與倫比的靈活性：即使對于外部托管的圖像也可以實時調整大小。
使用next/script優化第三方腳本
第三方腳本，如 google Tag Manager，通常會對網站性能產生負面影響，從而顯著影響 SEO。Next.js 通過其 next/script 模塊來解決這一問題，為開發者提供了增強的控制和優化。使用 next/script 的主要優勢包括：
- 策略性加載：根據需要自定義腳本的加載方式和時間，以優化網站速度。
- Web Worker 卸載（實驗性的）：通過從主線程卸載腳本，可以提高性能。
Next.js 的 next/link 組件：轉化 Web 導航
流暢的導航是積極的用戶體驗的核心。Next.js 中的 組件提升了這一點，使 Web 應用程序感覺即時和用戶中心化。以下是為什么它至關重要的原因：
- 即時加載：借助預取的功能， 甚至在用戶單擊之前就預先加載內容。這意味著路由轉換幾乎是瞬間的，幾乎沒有等待時間。
- 動態鏈接：的靈活性在處理不同內容時尤其突出。它輕松適應動態段，使開發者可以輕松地創建到包含可變數據的頁面的鏈接，比如博客文章或產品列表。
- 效率：在幕后， 使用了一些策略，如部分渲染和內存中緩存。這確保只有必要的內容更新，而以前獲取的數據可以快速從緩存中檢索。結果是站點轉換迅速，資源利用效率高。
Next.js Metadata API：增強 SEO 和 Web 可分享性
元數據是 Web 重要性的無形動力，驅動搜索引擎排名，并增強平臺之間的可分享性。Next.js 提供了強大的 Metadata API，允許開發者輕松地集成這些關鍵數據片段。您可以通過 Next.js 中的兩種簡化的方式嵌入元數據：
基于配置：從布局或頁面文件中簡單地導出元數據對象。
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
}
export default function Page() {}
基于函數：使用 generateMetadata 函數來獲取需要動態值的元數據。
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：元數據增強了搜索引擎對內容的理解和排名，確保其達到預期的受眾。
- 提高可分享性：元數據，特別是在使用 Open Graph 等動態圖像的情況下，使您的內容在社交平臺上共享時更具吸引力和可理解性。
- 靈活性：無論您需要靜態、不變的元數據還是動態、特定內容的元數據，Next.js 都能滿足您的需求。
- 自動管理 元素：通過該 API，Next.js 自動生成適當的 元素，節省時間并避免錯誤。
使用 @vercel/og 生成 Open Graph（OG）圖像
通過利用 Open Graph 協議和 @vercel/og 庫，可以提升您在社交媒體上的存在感。這個工具允許為社交媒體共享生成動態和自定義圖像。
關鍵優勢包括：
- 性能：通過最小的代碼快速生成圖像，通過 Edge Functions 增強。
- 易于使用：通過熟悉的 HTML 和 css 定義圖像，同時庫處理動態圖像生成。
- 經濟實惠：自動添加的標頭在邊緣緩存圖像，節省資源并避免重復計算。
- 多功能性：支持各種 CSS 布局、自定義字體、嵌套圖像，甚至在部署之前提供對 OG 圖像的預覽。
圖片
通過 Next.js 提升開發者體驗
在快節奏的 Web 開發世界中，效率和易用性可以使項目的成功有所不同。一個框架的功能，結合簡化的開發者旅程，可以極大地影響項目的成功。在 Next.js 中，開發者不僅僅獲得了工具，還提供了一個生態系統，從構思到部署都旨在優化他們的工作流程。讓我們深入了解 Next.js 為開發者中受歡迎的選擇的原因。
生產就緒的 React 框架
React 以其創建動態 UI 組件的能力而取得了一定的成就。然而，盡管其靈活性允許了廣泛的可能性，但它并不滿足更廣泛的架構需求，比如路由或數據獲取。為了彌合這一差距，React 團隊推廣全棧框架，Next.js（以及 Remix）位居首位：
圖片
集成中間件和后端的統一開發
Next.js 通過直觀地集成中間件和后端功能而脫穎而出。它是一個一站式解決方案。開發者可以在同一個框架內處理前端和后端，簡化整個流程。這種統一消除了不斷的上下文切換，甚至編程語言切換的需要，確保了高效的開發體驗。
圖片
無縫部署與 Vercel
部署階段通常被視為繁瑣的過程。然后 Vercel 進入了這個領域。專門針對 Next.js，Vercel 簡化了部署過程，使其變得直接而無憂。只需幾個步驟，您的應用程序就可以投入使用，準備擴展，并優化性能。
以下是我最喜歡的關于 Vercel 的部分：
- 免費的 Hobby 層：Vercel 提供了適合 Next.js 開發者的免費 Hobby 層，享受快速的全球交付、自動 Git 集成和無服務器函數。這是在不花費任何成本的情況下啟動 Next.js 作品集項目的絕佳選擇。
圖片
- 推送到部署：通過簡單的 git push，每次部署都會自動觸發創建實時預覽站點，使其與您的更改保持同步。不需要額外的命令。
- 自動預覽：每個新分支都會自動獲得自己的實時、類似于生產的 URL。這是團隊中的每個人或客戶實時查看更改和更新的最佳方式。
圖片
- 協作UI審查：Vercel 鼓勵協作工作流程。團隊成員可以直接在 UI 組件、布局、拷貝等上發表評論，促進實時反饋。這種協作與 GitHub 和 Slack 等平臺無縫集成。
- 快速回滾以快速恢復：Vercel 的 Instant Rollback 允許團隊迅速恢復到先前的生產部署，確保快速從任何未預料的生產問題中恢復，比如重大錯誤或破壞性更改。特別是在關鍵事件期間，這個功能對于保持正常運行時間和無縫的用戶體驗至關重要。
第一流的 Next.js 文檔
一個框架的成功往往取決于其文檔的清晰度和可訪問性。Next.js 在這個領域表現出色，提供了精心制作和結構良好的文檔，有幾個原因使其脫穎而出：
圖片
- 直觀導航：無縫切換頁面和應用程序路由的文檔。
- 強大搜索：使用強大的搜索功能查找您尋找的精確細節。
- 組織良好的布局：在左側邊欄中呈現基本概念，右側可以快速跳轉到各個部分，導航非常方便。
- 視覺學習：清晰、引人入勝的圖像有助于闡明核心概念，增強理解。
- 開發者工具：使用專門的按鈕輕松復制代碼片段，并根據需要在 JavaScript 和 TypeScript 視圖之間進行選擇。
- 社區參與：一個 “在GitHub上編輯此頁面” 的鏈接鼓勵社區反饋和更新，確保文檔不斷改進。
使用多功能模板快速啟動開發
從頭開始啟動項目可能會令人望而卻步。有了 Next.js，您不再需要重新發明輪子。它提供了一個廣泛的多功能模板庫，適用于各種用途，無論您是構建基于 AI 的應用、電子商務商店、博客還是 SaaS 平臺。
我個人最喜歡的模板包括以下：
- ?Platform Starter Kit - Steven Tey
- ?Next.js AI Chatbot - Steph Dietz
- ?Novel – AI-powered Notion-style editor - Steven Tey
React 茁壯成長的生態系統：未來的明智選擇
在涉及到技術抉擇時，"永遠不要押注反對 React" 的格言比以往任何時候都更為真實。Next.js 的崛起與 React 茂盛的生態系統息息相關。一個僅僅是一個 UI 組件構建器的庫已經發展成為一個全面的生態系統，驅動著許多 Web 上最具活力的應用程序。
React 的廣泛采用意味著有大量的資源、庫和社區解決方案可用。以下是我最喜歡的庫的簡要列表，可加速您的 Next.js 全棧應用程序的開發。
- 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 的能力和其強大的生態系統。選擇 Next.js，從而間接選擇 React，開發者們將自己與一個未來可靠且不斷發展的技術堆棧相一致，這個技術堆棧得到了充滿激情和創新的社區的支持。明顯的是：押注 React 就是押注更明亮、更高效、更流暢的 Web 開發未來。
原文鏈接：https://www.felixvemmer.com/blog/why-next-js
作者：Felix Vemmer
譯者：編程界
