如何使用 Next 和 MDX 构建博客
在本指南中,我们将关注 这是一个流行的 React 框架,它提供了出色的开发人员体验,并附带了生产所需的所有功能。我们还将使用 和 MDX 逐步构建一个博客。最后,我们将介绍为什么您会选择而不是“普通”React 和 Gatsby 等替代方案 是一个 React 框架,可让您快速构建静态和动态应用程序。它已做好生产准备,并支持开箱即用的服务器端渲染和静态站点生成,应用程序快速且有利于 SEO。 在本教程中,我将首先解释到底是什么以及为什么要使用它而不是 Create React App 或 Gatsby。然后,我将向您展示如何构建一个博客,您可以在该博客上使用和 MDX 编写和呈现帖子。 首先,您需要一些 React 经验。了 会很方便,但不是强制性的。本教程将使那些想要使用 创建博客(个人或组织)或仍在寻找要使用的内容的人受益。
让我们深入了解下什么是
是由Vercel创建和维护的 React 框架。它是用 React、Babel 和 Webpack 构建的。它是生产就绪的,因为它具有 哈萨克斯坦手机号码列表 许多通常在“普通”React 应用程序中设置的出色功能。 框架可以在服务器上渲染应用程序或静态导出它们。它不会等待浏览器加载 JavaScript 来显示内容,这使得 Next.js 应用程序对 SEO 友好且速度极快。 为什么使用 而不是 Create React App 是一个方便的工具,它提供了无需配置的现代构建设置,并且无需设置 Webpack、Babel 等或维护它们的依赖项。这是当今创建 React 应用程序的推荐方法。它有一个 TypeScript 模板,还附带了 React 测试库。 但是,如果您想构建一个多页面应用程序,那么您需要安装一个额外的库,就像您在服务器上渲染一个 React 应用程序一样。
额外的设置可能是一个问题
安装的任何软件包都可能会增加应用程序的最终包大小。 这正是 想要解决的问题。它提供了最佳的开发人员体验,以及生产所需的所有功能。它具有几个很酷的功能: 静态导出(预渲染) 允许您在构建时将 应用程序导出为无需服务器即可运行的静态 HTML。这是生成网站的推荐 AERO 领先 方法,因为它是在构建时完成的,而不是在每次请求时完成的。 服务器端渲染(预渲染) 它根据每个请求在服务器上将页面预渲染为 HTML。 自动代码分割 与 React 不同,会自动分割代码并仅加载所需的 JavaScript,这使得应用程序速度更快。 基于文件系统的路由 使用文件系统在应用程序中启用路由,这意味着目录下的每个文件pages都会被自动视为路由。 代码热重载 依靠 React Fast Refresh 来热重载您的代码,从而提供出色的开发人员体验。