Next.js的崛起：为什么它是现代网站的首选全栈框架-每日运维

在选择前端框架时，可靠性对我的客户至关重要。尽管我研究了诸如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 {
  // 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译者：编程界

Next.js的崛起：为什么它是现代网站的首选全栈框架

统一采用：客户和开发者对 Next.js 的信任