<返回更多

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

2023-11-02  微信公众号  编程界
加入收藏

在选择前端框架时，可靠性对我的客户至关重要。尽管我研究了诸如SvelteKit等选项，但"为什么选择Next.js？"仍然是一个经常被问到的问题。在这篇文章中，我将详细解释为什么Next.js是一个可靠的选择，以及它充满前景的未来。

我的自由职业客户经常问我哪个前端框架最好。他们不想要最新的潮流；他们想要可靠的东西。我研究了新的选项，比如SvelteKit，但Next.js总是位居前列。这不是关于最新和最伟大的，而是关于选择经得起考验和可靠的东西。在这篇文章中，我们将深入探讨为什么我押注在Next.js上的主要原因，以及为什么我对它的未来感到乐观。

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

在 Github上 获得了令人瞩目的 113,000 颗 Star ⭐，Next.js 无疑已经成为 Web 开发世界中领先的框架。这些星星在一定程度上可以表明开发者社区的普遍欣赏和兴趣。虽然不是一个框架质量或成功的绝对衡量标准，但它确实暗示了 Next.js 在同行中所取得的关注和动力。

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

然而，在数字世界中，受欢迎并不足够，关键是要赢得行业领袖的信任。而 Next.js 正是做到了这一点。

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

像《华盛顿邮报》、Loom 和.NETflix 等主要公司已经将 Next.js 集成到他们的技术堆栈中，展示了它处理大规模高流量平台的能力。即使是拥有 1 亿 YouTube 订阅者和庞大社交媒体影响力的内容创作者 MrBeast 也是使用 Next.js 构建他的在线商店。加入这个列表的还有像 TikTok、Twitch 和 Notion 这样有影响力的平台，这使得 Next.js 不仅仅是一个框架，而是数字革命前线企业和创作者的值得信赖的合作伙伴。

性能和 seo：Next.js 采用的驱动力

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

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

当 Next.js 首次出现时，它为开发者提供了一个革命性的选择：在服务器上渲染页面还是在浏览器中直接渲染，为 Web 开发开启了新纪元。

客户端渲染 VS 服务器端渲染 客户端渲染是指浏览器使用 JAVAScript 生成和更新网页，通常导致动态交互。相比之下，服务器端渲染是服务器创建初始页面，将完全形成的页面交付给浏览器，这可以提供更快的初始加载时间。

随着 Next.js 13 的推出，游戏发生了更大的变化。开发者现在可以根据每个组件的情况，决定是在服务器上还是在客户端上进行渲染。这种微调确保了最佳性能和最大的灵活性。关于何时使用每种策略的更清晰图像，可以在 Next.js 文档中找到相关信息。

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

Next.js 中的渲染策略

Next.js 提供了三种主要的渲染策略，每种都对 SEO 和性能有独特的影响：

作出正确选择：Edge 和 Node.js 运行时

在快速发展的 Next.js 世界中，开发者面临着更多的选择，这些选择不仅影响渲染，还影响性能和 SEO 的基础。这两个核心运行时引领了这一提供，每个运行时都在这些领域具有独特的优势。

通过将运行时选择与您的目标对齐，您可以优化您的 Next.js 项目，同时提高性能和搜索可见性。

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

React服务器组件的强大

React 服务器组件在这个新时代至关重要，它使 Next.js 开发者能够创建直接在服务器上渲染的UI组件。这将带来重大的 SEO 和性能优势：

加载 UI 和流式渲染：Next.js 增强用户体验的答案

在今天的 Web 景观中，用户体验至关重要。内容加载的任何延迟都可能降低用户的参与度或转化率：

沃尔玛发现，每提高 1 秒的页面加载时间，转化率增加 2%。

鉴于这一点，Next.js 引入了 loading.js约定，结合 React Suspense，提供有意义的加载 UI。这确保了用户在特定路由段的内容准备就绪时立即看到加载状态。

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

流式渲染将其提升到更高水平。通过在服务器上准备好的 UI 片段，用户可以在整个内容完成渲染之前开始浏览页面的部分部分。

集成到 Next.js 应用程序路由器中，流式渲染提高了初始页面加载速度和依赖于较慢数据获取的 UI。结果是用户得到迅速的反馈，即使在像产品评论这样的内容丰富页面上也是如此。

有了这些工具，开发者可以设计加载 UI，以及策略性地流式传送路由部分，从而确保提供最佳的用户体验。

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

如果您想以互动方式体验这些功能，请查看这个出色的 Next.js 13 应用程序游乐场演示。参见 ?https://vercel.com/templates/next.js/App-directory

内置优化

它并不仅止于此。在 Next.js 的核心是内置的优化，确保图像、字体和脚本都经过优化，以提供最佳的用户体验。这些特定针对核心 Web 要点的增强功能，确保用户在每次访问时都能得到最佳的体验。

使用next/image优化图像

图像是现代 Web 设计的重要组成部分，通常决定用户的参与度和认知度。识别了它们的关键作用，Next.js Image 组件提供了一系列旨在增强性能和用户体验的优点：

使用next/script优化第三方脚本

第三方脚本，如 google Tag Manager，通常会对网站性能产生负面影响，从而显著影响 SEO。Next.js 通过其 next/script 模块来解决这一问题，为开发者提供了增强的控制和优化。使用 next/script 的主要优势包括：

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:

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

通过利用 Open Graph 协议和 @vercel/og 库，可以提升您在社交媒体上的存在感。这个工具允许为社交媒体共享生成动态和自定义图像。

关键优势包括：

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

通过 Next.js 提升开发者体验

在快节奏的 Web 开发世界中，效率和易用性可以使项目的成功有所不同。一个框架的功能，结合简化的开发者旅程，可以极大地影响项目的成功。在 Next.js 中，开发者不仅仅获得了工具，还提供了一个生态系统，从构思到部署都旨在优化他们的工作流程。让我们深入了解 Next.js 为开发者中受欢迎的选择的原因。

生产就绪的 React 框架

React 以其创建动态 UI 组件的能力而取得了一定的成就。然而，尽管其灵活性允许了广泛的可能性，但它并不满足更广泛的架构需求，比如路由或数据获取。为了弥合这一差距，React 团队推广全栈框架，Next.js（以及 Remix）位居首位：

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

集成中间件和后端的统一开发

Next.js 通过直观地集成中间件和后端功能而脱颖而出。它是一个一站式解决方案。开发者可以在同一个框架内处理前端和后端，简化整个流程。这种统一消除了不断的上下文切换，甚至编程语言切换的需要，确保了高效的开发体验。

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

无缝部署与 Vercel

部署阶段通常被视为繁琐的过程。然后 Vercel 进入了这个领域。专门针对 Next.js，Vercel 简化了部署过程，使其变得直接而无忧。只需几个步骤，您的应用程序就可以投入使用，准备扩展，并优化性能。

以下是我最喜欢的关于 Vercel 的部分：

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

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

第一流的 Next.js 文档

一个框架的成功往往取决于其文档的清晰度和可访问性。Next.js 在这个领域表现出色，提供了精心制作和结构良好的文档，有几个原因使其脱颖而出：

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

使用多功能模板快速启动开发

从头开始启动项目可能会令人望而却步。有了 Next.js，您不再需要重新发明轮子。它提供了一个广泛的多功能模板库，适用于各种用途，无论您是构建基于 AI 的应用、电子商务商店、博客还是 SaaS 平台。

我个人最喜欢的模板包括以下：

React 茁壮成长的生态系统：未来的明智选择

在涉及到技术抉择时，"永远不要押注反对 React" 的格言比以往任何时候都更为真实。Next.js 的崛起与 React 茂盛的生态系统息息相关。一个仅仅是一个 UI 组件构建器的库已经发展成为一个全面的生态系统，驱动着许多 Web 上最具活力的应用程序。

React 的广泛采用意味着有大量的资源、库和社区解决方案可用。以下是我最喜欢的库的简要列表，可加速您的 Next.js 全栈应用程序的开发。

Next.js 的成功证明了 React 的能力和其强大的生态系统。选择 Next.js，从而间接选择 React，开发者们将自己与一个未来可靠且不断发展的技术堆栈相一致，这个技术堆栈得到了充满激情和创新的社区的支持。明显的是：押注 React 就是押注更明亮、更高效、更流畅的 Web 开发未来。

原文链接：https://www.felixvemmer.com/blog/why-next-js
作者：Felix Vemmer
译者：编程界

关键词：框架      点击(10)
声明：本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系，我们将立即删除或处理。
▍相关推荐
更多框架相关>>>
Copyright @ 简易百科 V 2.0 京ICP备14042104号