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